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. Web addresses and email addresses in an answer are clickable even when the agent writes them out in full, so a visitor can open a product page or start an email with one tap.
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.
Photos and files from visitors
On Starter, Pro and Business, switching on Photos & File Attachments in the agent's settings puts a paperclip next to the message box. Visitors can send a photo — JPG, PNG, WebP, or HEIC from an iPhone — or a document (PDF, DOCX, TXT, CSV and similar, up to 5 MB). A photo is useful wherever a business quotes from a picture: a garden to fence, a room to renovate, furniture to repair or move. The agent looks at the photo and answers about what it shows, and the photo appears in the conversation in the dashboard (Conversations and Inbox) next to the visitor's message.
Before upload the widget shrinks the photo to at most 1600 pixels on its long side and re-saves it as a JPEG, which also removes the camera's metadata, including the GPS location; the server removes that metadata again for anything that did not come through the widget. A conversation can hold up to 5 photos. Photos are deleted together with the conversation when the account's retention period runs out. A HubSpot transcript notes that a photo was sent but does not carry the photo itself.
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 "Powered by AnroAgents" line
The AnroAgents widget shows a small "Powered by AnroAgents" line under the chat. On the Business plan the line is removed, both in the widget and on the agent's hosted chat page, so the chat carries only your own brand. Nothing needs to be switched on: it follows the plan of the account that pays for the agent, and for a team member's agent that is the workspace owner. If the subscription lapses or moves to a lower plan, the line comes back on its own within a minute. There is no snippet attribute to hide it on other plans.
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.