The Web Widget puts one of your agents on your website. A visitor clicks, talks in
their browser, and the agent answers. No phone number, no dialing.
Each agent has its own widget, so different pages can run different agents.
Where it lives
Open the agent, then More at the end of the tab row, then Web Widget.
The tab has two options, and which one you want depends on whether the site is a test
or a real product.
Generate JWT
Use this to get something working today.
The Widget agent field shows the agent the widget will connect to. It is fixed to
the agent you are editing.
JWT lifetime decides how long the token stays valid. Options are 30 minutes,
1 hour, 3 hours, 6 hours and Never expire. The default is 1 hour.
Click Generate JWT and copy the token.
Never expire is for testing only. A token pasted into a public web page is
readable by anyone who views the source, and one that never expires never stops
being useful to them.
Install it on your site
Paste this immediately before the closing </body> tag on any page where you want the
widget, and replace the placeholder with your token.
The dashboard shows this same snippet with a copy button, so you do not have to
retype it.
API JWT Generation
Use this for a real site.
Instead of pasting a token that eventually expires and breaks your page, you generate
an API key, keep it on your server, and have your server mint a short-lived token
for each visitor. The page always gets a fresh token, and the key itself never reaches
the browser.
Click Generate API key. The key is shown once, so store it somewhere safe
immediately.
The API key belongs on your backend and nowhere else. Anyone who can read it can
generate tokens for your agent. If you put it in client-side code, you have
published it.
Test before you install
Use Test Agent on the agent and choose Start Browser Call. That is the same
browser conversation your visitors will get, so if the agent behaves there it will
behave in the widget.
If it works in the dashboard but not on your site, the problem is the token or the
snippet, not the agent.
Where to go next
- Configure what the agent says: Agents
- Let the visitor move to a phone call: Switch Communication
- React to widget conversations in your own systems: Webhooks
- Read the conversations afterwards: Calls
