Embedded Mode Configuration

Embedded mode allows you to mount the agent directly into a specific DOM element within your application layout. This is ideal for creating integrated chat experiences, custom sidebars, or dedicated support pages where the agent is a native part of the UI rather than a floating widget.

embeddedConfiguration

Defines the layout and behavior of the agent when mode is set to EMBEDDED. This object controls how the agent mounts into your application's DOM and its initial UI state.

Type: object
Default Value: {}

Structure:

container
- The HTML element into which the agent will mount. Type: HTMLElement
horizontalMargin
- Horizontal spacing/padding for the embedded view. Type: string (e.g., "20px" or "10%")
isMenuOpenByDefault
- Whether the agent's side menu is open initially. Type: boolean Default: false
isRightSideMenu
- When true, places the navigation menu on the right side of the container. Type: boolean Default: false

Example

const containerElement = document.getElementById('agent-container');

window.foldspace.agent({
  apiName: 'AGENT_API_NAME',
  mode: 'EMBEDDED',
  configuration: {
    embeddedConfiguration: {
      container: containerElement,
      horizontalMargin: '0px',
      isMenuOpenByDefault: true,
      isRightSideMenu: false
    }
  }
});

Updated 6 days ago