# Embedded mode

Mount the Foldspace agent as a web component inside your application by initializing it into a DOM container.

Embedded mode renders the agent as a web component directly inside your application, anchored to a DOM element you control. Use it when you want the chat to live inline in your layout rather than as a floating overlay.

<EmbeddedComparison />

:::note[Prerequisite]
This page assumes you've already installed the [SDK](/start/install/).
:::

## Initialize the agent

The snippet below waits for the SDK to be ready, then mounts the agent into the container element you pass.

```javascript
// Replace with the API name from Agent Studio → Setup
const AGENT_API_NAME = "Foo"; 

const agentContainer = document.getElementById('agentContainer');

foldspace('when', 'ready', () => {
  foldspace.agent({
    apiName: AGENT_API_NAME,
    mode: 'EMBEDDED',
    configuration: {
      embeddedConfiguration: {
        container: agentContainer
      }
    }
  });
});
```

## Embedded configuration

The `embeddedConfiguration` object controls how the agent renders inside your application. The property relevant to initialization:

| Property  | Type          | Required | Default | Description                                                                                      |
| :-------- | :------------ | :------- | :------ | :----------------------------------------------------------------------------------------------- |
| container | `HTMLElement` | Yes      | -       | The DOM element where the embedded agent will be mounted. Must be an existing element reference. |

:::note
For all other appearance, layout, and behavioral options, visit the full configuration reference.
:::

:::tip
Configure the agent's look and feel in **Agent Studio** > **Style & Behavior**.
:::

## Next steps

- [Actions](/guides/connecting-actions/): give the agent AI-Native actions that run workflows and return context-aware responses.
- [Knowledge Base](/user-guides/knowledge-base/): connect a Knowledge Base for grounded answers.