Data 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	Yes

UI Attributes

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

Attribute	Type	Default	Valid 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	Valid Values	Description
`data-auto-connect`	string	`false`	`true`, `false`	Connect automatically on page load
`data-speech-silence-timeout-ms`	string	`500ms`	Number (ms)	Silence timeout for speech detection

Tracking Attributes

Control analytics and user identification.

Attribute	Type	Default	Valid 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.

FAQ

Changing the script tag attributes after load has no effect. Use the runtime API (api.configure()) to change settings dynamically. See Control & Methods.

Yes, if you're using a templating language or build system:

<script
  data-client-key="<%= ENV['AGENT_CLIENT_KEY'] %>"
  data-agent-id="<%= ENV['AGENT_ID'] %>"
  ...
></script>

Add http://localhost:3000 (or your local port) to the allowed_domains when creating your client key. Use a development agent and client key separate from production.

Client keys are designed to be used in frontend code. They're restricted to specific domains you configure, so even if someone sees the key, they can't use it on their own site.