Put it on your website
Add the assistant's chat drawer to your site with one script tag, and sign your customers in.
The assistant can live on your website as a chat drawer: a button in the corner that opens a chat panel. You add it with one script tag. Nothing else on your page changes.
Add the script
- In the console, open Integrations and find the Install on your site card.
- Add your website's domains to the list on the card. The drawer only works on the domains listed there.
- Copy the script tag from the card and paste it into your pages, anywhere before
</body>.
The tag loads asynchronously and brings your company's greeting, sample questions, colors, logo and fonts with it. When your team publishes a change in the console, it reaches your site within a few minutes.
The drawer renders in its own isolated area of the page: your site's CSS does not affect it, and its CSS does not affect your site.
Google Tag Manager
Use a Custom HTML tag with the script, triggered on all pages (or on your consent trigger). No other setup is needed.
Content Security Policy
If your site sets a Content Security Policy, allow the script's origin (the host in the script tag) in
script-src and connect-src. If your team set a custom font, also allow data: in font-src. The drawer
uses no iframes.
Domains
- List bare hosts, such as
www.example.com, orlocalhost:3400while you develop. *.example.commatches subdomains only. Listexample.comas well if your site also runs there.- Chat requests from a domain that is not on the list are refused.
Signed-in customers
Visitors are guests until your server says who they are. Once it does, the assistant can act for the customer: their account, their history, and anything else that needs a signed-in customer.
The assistant only trusts a signed statement from your server. A name sent by the page is not enough, because anyone can change what a page sends.
1. Get a secret
In Integrations, on the Install on your site card, select Generate secret. The secret is shown once. Keep it on your server like any other API secret, never in page code.
- Rotate secret replaces it. The old one stops working within about a minute.
- Turn off makes every visitor a guest again.
2. Sign an assertion on your server
For a signed-in customer, create a short-lived JWT signed with HS256 and the secret:
| Claim | Value |
|---|---|
sub | Your stable id for the customer, up to 80 characters. |
aud | Your company key: the key in the script tag's address. |
exp | Expiry, in Unix seconds. At most 5 minutes ahead; anything longer is refused. |
iat | Optional. When it was issued. |
// Node, with the `jose` package. Any JWT library that supports HS256 works.
import { SignJWT } from 'jose';
const key = new TextEncoder().encode(process.env.CHANNELIZED_CUSTOMER_SECRET);
const assertion = await new SignJWT({})
.setProtectedHeader({ alg: 'HS256', typ: 'JWT' })
.setSubject(customer.id)
.setAudience('<company-key>')
.setIssuedAt()
.setExpirationTime('5m')
.sign(key);3. Give it to the drawer
Set window.aelIdentity on the page. The drawer reads it on every message, so set it when the customer signs
in and clear it when they sign out. It can be the token itself:
<script>
window.aelIdentity = '<assertion from your server>';
</script>Or, so that a long visit outlives the 5-minute expiry, a function that returns a fresh token (or a promise of one):
<script>
window.aelIdentity = () =>
fetch('/assistant-identity', { credentials: 'same-origin' }).then(r => (r.ok ? r.text() : ''));
</script>If the assertion is missing, expired, signed with the wrong secret, made for another company, or valid for more than 5 minutes, the visitor is treated as a guest. The chat keeps working, and tools that need a signed-in customer ask them to sign in.
What your team sees
Conversations from the drawer appear in the console under the embed channel, on Live sessions, Tool calls and Audience.