Website widget & embeds
Add your support agent's chat to any website. Two options are available, both part of the Professional plan:
- Widget - a floating chat button in your brand colours that opens the chat in a panel. One script tag, no other changes.
- Iframe embed - the chat page placed inside your own layout, wherever you want it.
Both require the agent to have a public chat URL (a subdomain or custom domain, set under the agent's Domain settings). Your snippets, pre-filled with your agent's key, are under Integrations on the agent's page in your dashboard.
Widget
Paste this just before the closing </body> tag on any page:
<script src="https://handover.support/widget/YOUR_WIDGET_KEY.js" async></script>
That's it. The script adds a floating chat button in the bottom-right corner. Clicking it opens the chat in a panel; on small screens the panel fills the viewport. The button uses your agent's accent colour, and the chat itself follows your full branding (colours and font) automatically.
The widget key is public - it only identifies which agent's chat to display, and cannot be used to read conversations or call the API. It is different from your secret API token.
Behaviour notes
- The script is self-contained: no dependencies, no CSS files, no cookies of its own, and it never touches your page's styles.
- The chat loads lazily - nothing is fetched until a visitor opens the widget.
- If the widget is disabled in your dashboard, the plan changes, or the agent is deactivated, the script serves a harmless no-op - your site never breaks.
- Visitors chat as guests (they are asked for an email address first) and their conversation continues across pages and visits via a cookie set on your chat domain. Browsers that block third-party cookies (e.g. Safari) may start a fresh conversation per visit.
Iframe embed
Prefer the chat inside your own layout - a help centre page, for example? Embed the chat page directly:
<iframe
src="https://YOUR_AGENT_DOMAIN/?embed=1"
style="width: 100%; height: 640px; border: none; border-radius: 12px;"
title="Support chat">
</iframe>
Replace YOUR_AGENT_DOMAIN with your agent's subdomain (e.g. acme.handover.support) or custom domain. The ?embed=1 parameter renders the chat without the surrounding site chrome, sized to fill the frame.
Branding
On the Professional plan you can set, per agent, under the agent's Edit page:
- Accent colour - buttons, highlights and the widget launcher
- Background colour - the chat message area
- Text colour - headings and body text
- Font - from a set of web-safe and bundled fonts
Branding applies to the hosted chat page, the widget and the iframe embed. Leave a colour untouched to keep the default look. The agent's logo (set in Basic Information) appears in the chat header and next to AI replies.
Custom builds
Need complete control over the UI? Use the REST API to build your own chat front end - it exposes the agent's branding, greeting and conversation starters so you can mirror the hosted experience.
Troubleshooting
- The button doesn't appear. Check the script tag's key against the snippet in your dashboard, that the widget is enabled on the agent, and that your plan includes it. View the page source of the script URL - it explains when it is serving a no-op.
- The chat shows but says the agent is unavailable. The agent is inactive or outside its configured business hours.
- The iframe shows a blank page or a refusal to connect. Make sure the URL includes
?embed=1- without it, framing is blocked for security.