Home / Docs / Putting the chat widget on your website
Putting an AnroAgents chat widget on your website
The embed snippet, its options, and how the widget behaves on a page.
An AnroAgents agent goes on a website as one script tag. There is nothing to build, no npm package, and no change to your site's framework — the snippet works on any HTML page, including sites built with Webflow, Tilda, Squarespace, Wix or a hand-written template.
Copy the snippet from the Embed Code section of the agent's detail screen in the AnroAgents dashboard. It contains your agent's ID and its API key:
<script src="https://widget.anroagents.com/widget.js" data-agent-id="YOUR_AGENT_ID" data-api-key="YOUR_API_KEY" async></script>
Paste the AnroAgents snippet just before the closing </body> tag on every page where the chat bubble should appear. It loads asynchronously, so it does not block your page, and it renders inside a shadow DOM, so your site's CSS and the widget's CSS cannot break each other.
Options on the AnroAgents embed snippet
The AnroAgents widget snippet accepts a few optional attributes:
data-position— where the bubble sits. The default isbottom-right;bottom-leftis the alternative.data-accent-color— the widget's accent colour as a hex value. The default is#3b82f6.data-title— overrides the chat window title for this site.data-greeting— overrides the agent's first message for this site.data-live-handoff— forces the "talk to a human" option on or off for this site.
Anything you do not set on the AnroAgents snippet comes from the agent's configuration in the dashboard, so the same agent can be embedded on several sites while its greeting and title are still managed centrally.
What the widget does on the page
The AnroAgents widget shows a chat bubble that opens into a conversation window. Visitors can write in any language and the agent replies in the same one. Answers support formatting — lists, bold text and links render properly rather than appearing as raw markdown.
The AnroAgents widget keeps the conversation history in the visitor's browser, so someone who closes the chat and comes back later continues where they left off instead of starting over.
The AnroAgents widget can open itself when proactive triggers are configured — after a delay on a pricing page, on exit intent, for returning visitors, and so on. Triggers are set in the dashboard, not in the snippet, and take effect within a minute of being saved.
If live handoff is enabled on the plan and on the agent, the AnroAgents widget offers the visitor a way to reach a human, and the conversation then appears in your Inbox for an operator to take over.
The API key on the snippet
The API key in the AnroAgents embed snippet is a public, site-facing key: it identifies the agent to the widget and is visible in your page source by design. It cannot be used to read your conversations, change your agent or touch your account.
If a key is ever misused, regenerate it from the agent's detail screen in the AnroAgents dashboard. Regenerating invalidates the old key immediately, so update the snippet on your site at the same time or the widget will stop loading.
Checking that it works
After adding the AnroAgents snippet, open your site in a private browser window. The bubble should appear within a second or two. If it does not, the usual causes are: the snippet pasted into a page template that is not actually used, a caching plugin serving an old version of the page, or a content-security policy on your site that blocks scripts from widget.anroagents.com.