​
Overview

The Retell embeddable chat widget is a production-ready, customizable, and secure chat widget for websites, powered by the Retell API. The widget is embeddable via a single <script> tag and uses the Retell public key system, allowing direct API calls from the frontend—no backend proxy required.

1

Create a Chat Agent

Before embedding the chat widget, you need a chat agent to handle the conversation.

For detailed instructions on creating a chat agent, refer to the Create Chat Agent guide.

2

Get Your Public Key and Agent ID

To embed the chat widget, you’ll need:

3

Add the Widget to Your Website

Add the following script tag to your HTML, within head tag:

<script
  id="retell-widget"
  src="https://dashboard.retellai.com/retell-widget.js"
  type="module"
  data-public-key="YOUR_RETELL_PUBLIC_KEY"
  data-agent-id="YOUR_RETELL_CHAT_AGENT_ID"
  data-agent-version="YOUR_RETELL_CHAT_AGENT_VERSION"
  data-title="YOUR_CUSTOM_TITLE"
  data-logo-url="YOUR_LOGO_URL"
  data-color="YOUR_CUSTOM_COLOR"
></script>

Replace:

  • YOUR_RETELL_PUBLIC_KEY with your actual Retell public key
  • YOUR_RETELL_CHAT_AGENT_ID with your actual Retell agent ID
  • YOUR_RETELL_CHAT_AGENT_VERSION with your agent version (optional). If left unset, the latest version will be used.
  • YOUR_CUSTOM_TITLE with your preferred chat window title (optional)
  • YOUR_LOGO_URL with the URL of your logo image (optional)
  • YOUR_CUSTOM_COLOR with a hex color code for the widget theme (optional, e.g., “#FFA07A”)
4

Test the Widget

After adding the widget to your website, test it by:

  1. Loading your website
  2. Clicking the floating button (bottom right, robot icon)
  3. Starting a conversation with your agent

The widget will automatically handle chat sessions and persist previous chats in localStorage.

​
Example: Minimal HTML Implementation

Here’s a complete example of a minimal HTML page with the Retell Chat Widget:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Retell Chat Widget Example</title>
    <script
      id="retell-widget"
      src="https://dashboard.retellai.com/retell-widget.js"
      data-public-key="key_xxxxxxxxxxxxxxxxxxxxx"
      data-agent-id="agent_xxxxxxxxxxxxxxxxxxx"
      data-agent-version="0"
      data-title="Chat with us!"
    ></script>
  </head>
  <body></body>
</html>

if you don’t specify data-agent-version, it will use the latest version of the agent.

​
Overview

The Retell embeddable chat widget is a production-ready, customizable, and secure chat widget for websites, powered by the Retell API. The widget is embeddable via a single <script> tag and uses the Retell public key system, allowing direct API calls from the frontend—no backend proxy required.

1

Create a Chat Agent

Before embedding the chat widget, you need a chat agent to handle the conversation.

For detailed instructions on creating a chat agent, refer to the Create Chat Agent guide.

2

Get Your Public Key and Agent ID

To embed the chat widget, you’ll need:

3

Add the Widget to Your Website

Add the following script tag to your HTML, within head tag:

<script
  id="retell-widget"
  src="https://dashboard.retellai.com/retell-widget.js"
  type="module"
  data-public-key="YOUR_RETELL_PUBLIC_KEY"
  data-agent-id="YOUR_RETELL_CHAT_AGENT_ID"
  data-agent-version="YOUR_RETELL_CHAT_AGENT_VERSION"
  data-title="YOUR_CUSTOM_TITLE"
  data-logo-url="YOUR_LOGO_URL"
  data-color="YOUR_CUSTOM_COLOR"
></script>

Replace:

  • YOUR_RETELL_PUBLIC_KEY with your actual Retell public key
  • YOUR_RETELL_CHAT_AGENT_ID with your actual Retell agent ID
  • YOUR_RETELL_CHAT_AGENT_VERSION with your agent version (optional). If left unset, the latest version will be used.
  • YOUR_CUSTOM_TITLE with your preferred chat window title (optional)
  • YOUR_LOGO_URL with the URL of your logo image (optional)
  • YOUR_CUSTOM_COLOR with a hex color code for the widget theme (optional, e.g., “#FFA07A”)
4

Test the Widget

After adding the widget to your website, test it by:

  1. Loading your website
  2. Clicking the floating button (bottom right, robot icon)
  3. Starting a conversation with your agent

The widget will automatically handle chat sessions and persist previous chats in localStorage.

​
Example: Minimal HTML Implementation

Here’s a complete example of a minimal HTML page with the Retell Chat Widget:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Retell Chat Widget Example</title>
    <script
      id="retell-widget"
      src="https://dashboard.retellai.com/retell-widget.js"
      data-public-key="key_xxxxxxxxxxxxxxxxxxxxx"
      data-agent-id="agent_xxxxxxxxxxxxxxxxxxx"
      data-agent-version="0"
      data-title="Chat with us!"
    ></script>
  </head>
  <body></body>
</html>

if you don’t specify data-agent-version, it will use the latest version of the agent.