Appearance and Attributes

Configure the embed using HTML data attributes on the script tag. No JavaScript required for basic setup.

Required Attributes

These attributes must be present for the embed to work.

ATTRIBUTE	TYPE	DESCRIPTION	REQUIRED
data-client-key	string	Client Key from Create Client Key API	Yes
data-agent-id	string	Agent ID from Create Agent API	Yes

UI Attributes

Control the appearance, layout, and visibility of the agent interface.

ATTRIBUTE	TYPE	DEFAULT	VALUES	DESCRIPTION
data-mode	string	`fabio`	`fabio`, `full`	Display mode
data-position	string	`right`	`right`, `left`	Position of widget (fabio mode)
data-target-id	string	-	Any valid DOM element ID	Target element ID (required for full mode)
data-orientation	string	`vertical`	`vertical`, `horizontal`	Layout orientation
data-open-mode	string	`compact`	`compact`, `expanded`	Initial display state
data-show-restart-button	string	`true`	`true`, `false`	Show restart conversation button
data-show-agent-name	string	`true`	`true`, `false`	Show agent name in the interface

Display Modes

fabio (default) - Floating action button that opens in an overlay

<script
  type="module"
  src="https://agent.d-id.com/v2/index.js"
  data-mode="fabio"
  data-client-key="{client_key}"
  data-agent-id="{agent_id}"
></script>

full - Render inside a specific container

<div id="agent-container"></div>

<script
  type="module"
  src="https://agent.d-id.com/v2/index.js"
  data-mode="full"
  data-target-id="agent-container"
  data-client-key="{client_key}"
  data-agent-id="{agent_id}"
></script>

Position and Orientation

<!-- Position on the left (fabio mode) -->
<script data-mode="fabio" data-position="left" ...></script>

<!-- Vertical layout - avatar on top, chat below -->
<script data-orientation="vertical" ...></script>

<!-- Horizontal layout - avatar and chat side by side -->
<script data-orientation="horizontal" ...></script>

Display State

<!-- Start compact - just the button visible -->
<script data-open-mode="compact" ...></script>

<!-- Start expanded - agent interface immediately visible -->
<script data-open-mode="expanded" ...></script>

UI Element Visibility

<!-- Hide restart button -->
<script data-show-restart-button="false" ...></script>

<!-- Hide agent name -->
<script data-show-agent-name="false" ...></script>

<!-- Hide multiple UI elements -->
<script
  data-show-restart-button="false"
  data-show-agent-name="false"
  data-client-key="{client_key}"
  data-agent-id="{agent_id}"
></script>

Behavior Attributes

Control agent connection and interaction behavior.

ATTRIBUTE	TYPE	DEFAULT	VALUES	DESCRIPTION
data-auto-connect	string	`false`	`true`, `false`	Connect automatically on page load
data-speech-silence-timeout-ms	string	`500`	Number (ms)	Silence timeout for speech detection

Tracking Attributes

Control analytics and user identification.

ATTRIBUTE	TYPE	DEFAULT	VALUES	DESCRIPTION
data-track	string	`true`	`true`, `false`	Enable event tracking
data-external-id	string	-	Any string	Custom user/session identifier
data-mixpanel-key	string	-	Any string	Custom Mixpanel project key
*data-mixpanel-property-.**	string	-	Any string	Custom Mixpanel event properties

data-external-id

Pass custom identifiers to link agent conversations to your user system.

<!-- Static ID -->
<script data-external-id="session_abc123" ...></script>

Use cases:

Link conversations to CRM records
Track specific customer sessions
Segment analytics by user type
Compliance and audit trails

data-mixpanel-key

Override the default Mixpanel project key with your own for custom analytics pipelines.

<script data-mixpanel-key="your_mixpanel_project_token" ...></script>

data-mixpanel-property-*

Add custom properties to Mixpanel events. Any attribute starting with data-mixpanel-property- is automatically extracted and included in analytics events.

<script
  data-mixpanel-property-plan="enterprise"
  data-mixpanel-property-region="us-east"
  data-mixpanel-property-team="support"
  ...
></script>

Runtime Configuration

Many attributes can also be changed dynamically at runtime using the JavaScript API. This is useful for responsive layouts, user preferences, or A/B testing.

See Control & Methods for complete runtime configuration options and examples.