# Embed the chat widget

**Category:** [AI Chat Agent](https://help.totalctrl.app/hc/totalctrl/totalctrl-help-center/en-US/categories/agent)
**Updated:** 2026-08-19

## Get your embed code

Open the agent's **Embed Code** tab. You'll see a ready-to-paste script tag that looks like this:

`<script src=".../agent/widget.js" data-agent-key="..." async></script>`

Click **Copy** and paste it into your website's HTML, ideally just before the closing `</body>` tag. The `data-agent-key` is a public key that identifies this agent — it is not a secret, so it's safe to ship in your page source.
## Where it appears

The widget loads as a floating bubble in the corner you chose (bottom-left or bottom-right). It works on any domain — the chat API sends the right cross-origin headers — so you can embed the same agent on multiple sites.
## Going live

The widget only appears to visitors when the agent is set to **Live**. While the agent is in **Draft**, the public script returns nothing, so visitors won't see it. This means you can paste the embed code into production early and flip the agent Live when you're ready — no code change required.
## Before you publish

Make sure you've [added and indexed knowledge sources](add-knowledge-sources) and run a few questions through the [Test Agent](test-your-agent-before-launch) tab. Then set up [escalation](set-up-escalation-and-handoff) so visitors can reach a human when the agent can't help.

---

## Related Articles

- [Reading your agent analytics](https://help.totalctrl.app/en-US/articles/agent-analytics)
- [AI Support Agent overview](https://help.totalctrl.app/en-US/articles/ai-support-agent-overview-1)
- [Managing Agent Conversations](https://help.totalctrl.app/en-US/articles/managing-agent-conversations)
- [Add knowledge sources](https://help.totalctrl.app/en-US/articles/add-knowledge-sources)
- [Closing conversations](https://help.totalctrl.app/en-US/articles/agent-closing-conversations)

---
[← Back to TotalCtrl Help Center](https://help.totalctrl.app/en-US/)