---
updatedAt: 2026-02-27T08:21:05.000Z
agentTools:
  projectIndex: https://docs.d-id.com/llms.txt
---

# Quickstart

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

Add an interactive AI agent with video avatar, chat, and voice to any website. No backend required — just a script tag and client key.

## Quick setup

<CoolSteps name="agents-embed-quickstart">
  <CoolStep number={1} title="Create an agent">
    Create an agent:

    ```yaml Request
    curl -X POST "https://api.d-id.com/agents" \
      -H "Authorization: Basic <YOUR KEY>" \
      -H "Content-Type: application/json" \
      -d '{
        "preview_name": "Amber",
        "presenter": {
          "type": "clip",
          "presenter_id": "v2_public_Amber@0zSz8kflCN",
          "voice": {
            "type": "microsoft",
            "voice_id": "en-US-JennyMultilingualV2Neural"
          }
        }
      }'
    ```

    Save the `id` from the response — you need it for the embed.
  </CoolStep>

  <CoolStep number={2} title="Create a client key">
    Generate a client key for authenticating your embed. The key only works from the allowed domains you specify:

    ```yaml Request
    curl -X POST "https://api.d-id.com/agents/client-key" \
      -H "Authorization: Basic <YOUR KEY>" \
      -H "Content-Type: application/json" \
      -d '{
        "allowed_domains": ["http://localhost:3000", "https://yourdomain.com"]
      }'
    ```

    Save the `client_key` from the response — you need it for the embed.
  </CoolStep>

  <CoolStep number={3} title="Add the embed script">
    Add this script tag to your HTML:

    ```html
    <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-name="did-agent"
    ></script>
    ```

    Replace `{client_key}` and `{agent_id}` with your credentials.
    
You can get the script also by going to the [studio](https://studio.d-id.com/agents), hover over your agent → ⠸ → Embed
  </CoolStep>
</CoolSteps>