Overview

Configure the embed script with data attributes. No JavaScript required for basic setup.

Display modes

Floating button (fabio)

A floating button opens the agent in an overlay. Best for adding an agent to any page without affecting layout.

Inline

Embed the agent directly in your page. Best for dedicated agent pages or custom layouts.

Full mode

Render the agent in a target element. Requires data-target-id and a DOM element.

Required attributes

Attribute	Type	Description
`data-client-key`	string	Client key from Create Client Key API
`data-agent-id`	string	Agent ID from Create Agent

Optional attributes

Attribute	Type	Default	Description
`data-mode`	string	`fabio`	Display mode: `fabio`, `inline`, or `full`
`data-name`	string	`did-agent`	Custom name for the script element (for multiple agents)
`data-position`	string	`right`	Position: `right` or `left`
`data-orientation`	string	`vertical`	Layout: `horizontal` or `vertical`
`data-open-mode`	string	`compact`	Initial state: `compact` or `expanded`
`data-monitor`	string	`true`	Enable analytics: `true` or `false`
`data-track`	string	`true`	Enable tracking: `true` or `false`
`data-auto-connect`	string	`false`	Connect automatically on load: `true` or `false`
`data-show-restart-button`	string	`true`	Show restart button: `true` or `false`
`data-target-id`	string	-	Target element ID for `full` mode

Basic examples

Floating button (default)

<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}"
  data-position="right"
></script>

Inline mode

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

Full mode (target element)

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

When to use

Use the embed when:

You want the quickest integration (minutes)
You're adding an agent to a content or marketing site
You prefer no-code or minimal-code solutions

Need more control? See Advanced option for the programmatic API, or the D-ID Agents SDK for custom UI.

Browser support

Chrome, Firefox, Safari, Edge (latest 2 versions), and mobile browsers. Requires WebRTC.

Troubleshooting

Agent not appearing?

Verify data-client-key and data-agent-id are correct
Ensure your domain is in the client key's allowed_domains (use Update Client Key API)
Check the browser console for errors
Confirm https://agent.d-id.com/v2/index.js loads

Custom styling:

did-agent {
  /* Your custom styles */
}

FAQ

Create an agent in D-ID Studio, then use the Embed menu to copy the script tag with credentials. Or use the Create Agent and Create Client Key APIs.

Yes. Use different data-name values for each script (e.g. did-agent, did-agent-2) and ensure each has a unique client key and agent ID.

Yes. The embed works with all D-ID agent versions and configurations.

Next steps

Advanced option — Programmatic API and events
D-ID Agents SDK — Custom UI integration
Create agents — Create agents via API

Support

Have any questions? We're here to help! Go to the Help Center or send us a message.

Contact Support