---
updatedAt: 2026-09-14T11:56:52.000Z
agentTools:
  projectIndex: https://docs.d-id.com/llms.txt
---

# Overview

Add an AI agent to your website with a single script tag

## What is the Agents embed

The Agents Embed is the fastest way to add an interactive AI agent to any website. Add a single script tag to your HTML and get a fully functional agent with video avatar, voice, and chat capabilities. No backend code, no bundlers, no build steps required.

## When to use

* You want the quickest integration (minutes)
* You prefer no-code or minimal-code solutions
* You want a pre-built UI that works out of the box
* You need only minimal control / customization options

<br />

## Customization options

<Cards>
  <Card title="Appearance and Attributes" href="https://docs.d-id.com/docs/embed-attributes" icon="fa-paintbrush">
    Change the look and feel through the data attributes of the script
  </Card>

  <Card title="Controls and Methods" href="https://docs.d-id.com/docs/embed-methods" icon="fa-dial">
    Controlling the widget operation and functionality
  </Card>

  <Card title="Events and States" href="https://docs.d-id.com/docs/embed-events" icon="fa-flag">
    Change the internal state or intercept lifecycle events using callbacks
  </Card>
</Cards>

<br />

<CoolAccordionBox>
  <CoolAccordion title="Need more control?">
    <p>See the Agents SDK section for building fully custom UI.</p>
  </CoolAccordion>
</CoolAccordionBox>

## Display modes

<Cards>
  <Card title="Widget" icon="fa-circle-user">
    A floating action button that opens the agent in an overlay. Perfect for adding an agent to existing pages without changing your layout or design.
  </Card>

  <Card title="Compact" icon="fa-rectangle">
    A floating window that is overlayed on top of your existing webpage, it can be expanded to full screen mode.
  </Card>

  <Card title="Full mode" icon="fa-expand">
    Render the agent inside a specific container element you control. Gives you precise placement and sizing while keeping the pre-built UI.
  </Card>
</Cards>

## How it works

The embed script loads a lightweight client that connects to your D-ID agent. It handles all the complexity of WebRTC connections, audio/video streaming, and real-time communication with the LLM and avatar services.

```mermaid
---
config:
  theme: redux
  look: neo
---
flowchart LR
    Website(["fa:fa-globe Your Website"]) <--> Client(["fa:fa-link Embed Client"])
    Client --> Agent(["fa:fa-robot D-ID Agent"])
    Agent --> STT(["fa:fa-microphone STT"])
    Agent --> Chat(["fa:fa-comments Chat"])
    STT --> LLM(["fa:fa-brain LLM"])
    Chat --> LLM
    LLM --> TTS(["fa:fa-volume-up TTS"])
    TTS --> Avatar(["fa:fa-user Video Avatar"])
    Avatar --> Client
```

All configuration happens through HTML data attributes on the script tag. The embed automatically handles initialization, connection management, error states, and cleanup.

## Use cases

1. **Customer support** Add a support agent to your help center or product pages. Customers get instant answers with a friendly face, reducing support tickets.
2. **Lead generation:**  Capture leads on landing pages with an interactive agent that qualifies prospects and answers questions before they bounce.
3. **Product demos:** Let prospects explore your product through conversation. The agent can explain features, show use cases, and guide users through your offering.
4. **E-commerce assistance:** Help shoppers find products, answer sizing questions, and provide recommendations with a personal touch.

## Get started

Ready to add an agent to your site? Follow the [Quickstart guide](https://docs.d-id.com/docs/embed-quickstart) to integrate in 5 minutes.

## FAQ

<CoolAccordionBox>
  <CoolAccordion title="Does the embed work with all agent types?">
    Yes. The embed supports all D-ID agent configurations including different avatar types, voice providers, and LLM models. The UI adapts automatically to your agent's capabilities.
  </CoolAccordion>

  <CoolAccordion title="Can I customize the appearance?">
    The embed provides configuration options for position, layout, and initial state through data attributes. For programmatic control
  </CoolAccordion>

  <CoolAccordion title="What are the different layouts I can use??">
    You can use widget (overlay) mode, the overlay apears in expanded and compact modes. Or you can have the agent in dull size mode expanded inside a div in your website.
  </CoolAccordion>

  <CoolAccordion title="How is embed flow secured?">
    Client keys read only and are locked to specific domains you specify. Your agent will only work on domains in the `allowed_domains` list, preventing unauthorized use on other sites.
  </CoolAccordion>

  <CoolAccordion title="Can I build my own UI?">
    While the agent embed offer many customization options if you require full control - see [D-ID Agents SDK](https://docs.d-id.com/reference/agents-sdk-overview) for building fully custom UI.
  </CoolAccordion>
</CoolAccordionBox>

<br />