Widget
/ The chat bubble for your site. One script tag gets you the full in-chat UI: product cards, calendars, forms, all of it.
What you get
This is the default for a reason. One script tag: a working chat bubble, in-chat UI components, automatic handoff to Human Desk, live data. No frontend work past pasting the snippet.
Atlas
Support specialist
Add it to your site
- 1
Open your agent, then the Integrations tab
Dashboard, then Agents, then your agent, then Integrations. Copy the embed snippet. Position and color are set here too.
- 2
Paste it right before </body>
It loads on its own and will not slow down your page.
- 3
Lock it to your domains
In Widget settings, add your allowed domains so nobody else can embed your agent.
index.html · before </body>
<script
src="https://app.humaner.ai/widget.js"
data-agent="ag_demo123"
data-color="#8B2942"
data-position="bottom-right">
</script>Refresh your site. The bubble shows up in the corner.
The built-in UI
The widget renders real UI inside the chat, no work from you. Which pieces show up depends on the vertical the agent is set to.
| Component | Vertical | What it does |
|---|---|---|
| Product card | Retail | Image, name, price, and a "View product" button inline |
| Order status | Retail | Live shipment info pulled the moment they ask |
| Return form | Retail | Inline form that becomes a Human Desk ticket |
| Plan upgrade CTA | SaaS | Locked feature turns into an upgrade button in chat |
| Cancellation flow | SaaS | Reason, then a counter-offer, then confirmation |
| Class schedule | Wellness | Tomorrow's classes with a book button |
| Medical guardrail chip | Wellness | A visual "please consult a professional" chip |
| Room card + calendar | Hospitality | Availability picker and booking handoff |
Options
| Attribute | What it does |
|---|---|
| data-agent | Your public agent ID. Required |
| data-color | Accent color as a hex value, to match your brand |
| data-position | bottom-right or bottom-left |
| data-greeting | One-off greeting override. Otherwise uses the agent's greeting, personality default if blank |