Put the chat widget on your website
The chat widget is the same assistant you see in this dashboard, embedded on your own site to answer your visitors from your documents. Getting it live is three steps: create a key on API keys, paste a snippet on your site, and optionally try it first on Widget preview.
Who does what
| Who | What they do |
|---|---|
| You | Create a key, say which of your sites may use it, paste the snippet on your site. |
| Agentech | Runs the widget from the key you paste — resolving your workspace from it, answering from your documents, and enforcing the sites you've allowed. |
Step by step
- Open API keys in the left menu.
- Under Create a key, type a name (e.g. "Marketing site").
- If this is the first key your workspace has ever created, you're also asked "Where will it
run?" — type the site's address (e.g.
https://www.acme.com). Only that site will be able to use the key; you can add more afterward.
- If this is the first key your workspace has ever created, you're also asked "Where will it
run?" — type the site's address (e.g.
- Click Create key. A Key created panel shows the key itself and, under Embed snippet, the exact HTML to paste — see below.
- Click Copy snippet, then paste it into your site's HTML just before the closing
</body>tag, as the panel says. - Before or after going live, click Try it next to the key on the API keys table to open Widget preview and ask it a question — this works whatever sites you've allowed, since the dashboard itself is always permitted (see below).
- Come back to API keys any time to see the key again (Show/Copy), add more sites under Allowed sites, or Rotate/Revoke the key.
The embed snippet
The Key created panel and the row's own Try it/Copy controls always give you the real
thing — don't hand-write it. It's a single <script> tag with two attributes:
<script src="https://cdn.assistant.agentech.tech/agentech-widget.js"
data-api-key="YOUR_KEY_HERE"
data-api-base="https://api.assistant.agentech.tech"></script>
data-api-key is your key from API keys. data-api-base points the widget at Agentech's API;
you don't need to change it. Pasting this once is enough — it draws its own launcher button in a
bottom corner of your page and mounts a <agentech-chat> element for it.
The key is meant to be public. The API keys page says so directly: "Your publishable key identifies your workspace to the chat widget. It goes in your page source, so treat it as public — what keeps it from being misused is the list of sites below, not secrecy." Anyone can read it by viewing your page source — that's expected. What stops a stranger from using it on their own site is the Allowed sites list, not the key being secret.
Which corner the button sits in, and what language it's in
On a left-to-right page the launcher sits in the bottom-right corner. On a right-to-left page — an Arabic site — it sits in the bottom-left, and the chat panel opens from that side. You don't configure this: the widget reads the direction of the page it is on.
If your page is Arabic but the button is still on the right, the page itself hasn't declared its
direction. Add dir="rtl" to your <html> tag (<html lang="ar" dir="rtl">) and the widget will
follow. You can also force it for the widget alone by putting dir="rtl" on the script's element
— but fixing the page is better, because everything else on it mirrors too.
The widget's own buttons and labels — "Send", "Powered by Agentech", the message box's placeholder — follow the same signal, so an Arabic page gets an Arabic launcher and panel.
Two things do not follow it, deliberately:
- Your own wording. The title, the conversation opener and the little teaser bubble are yours. If you set them in the embed snippet, they show exactly as you wrote them, in any language.
- Each message's own direction. A customer writing Arabic gets a right-to-left bubble and one writing English gets a left-to-right one, in the same conversation. That is per message, not per page.
Which conversation opener a visitor sees is a separate setting — see Setting up your assistant.
Allowed sites
Under Allowed sites on the API keys page, list the site(s) your key may run on — one per
line or comma-separated, e.g. https://www.acme.com. Use https://*.acme.com to allow every
subdomain. At least one is required to save the list.
If your workspace has never set one, you'll see: "Your widget accepts any website. Nobody has said which sites may use your key, so anyone who copies it from your page source can spend your messages. Name your site under Allowed sites below." This is a safety net for workspaces that created a key before this list existed — until you add a site, the key works from anywhere, exactly as if there were no list.
Widget preview
Widget preview (the Preview page) talks to the same public chat endpoint your embedded widget uses, so a question you ask there gets exactly the answer a visitor would get on your site. It's for testing the widget, or a change to its opening message, before or without touching your live site.
- Pick which key to test with from the Key dropdown — it lists every key that isn't revoked. Opening Preview from a key's own Try it link on the API keys page pre-selects that key; with only one usable key, there's nothing to choose.
- This dashboard is always allowed to use your keys, so testing here works whatever sites you have allowed — Preview doesn't go through your Allowed sites list at all, so it can't tell you whether a different site would be blocked. It only tells you whether the key and your documents are working.
- A key with no visible value yet (see "ak_… — rotate to reveal" below) can't be used here — Preview only offers keys it can actually send.
"This chat isn't available right now."
This is the message a visitor sees inside the widget itself if they try to send a message and the key or the site isn't accepted — it covers two different causes that look the same to a visitor:
- The site isn't on your Allowed sites list. Check the exact address in the browser's address
bar against what you saved —
https://www.acme.comandhttps://acme.comare different origins, and so arehttp://andhttps://. Add the missing one under Allowed sites and save. - The key is wrong, was rotated, or was revoked. Re-copy the current snippet from API keys and replace it on your site.
Fix: open Widget preview with the key in question — if it answers fine there, the key itself is good and the problem is the site not being on your Allowed sites list; if it fails there too, the key needs rotating.
Note that the widget's launcher and its opening greeting can still appear normally even when this is wrong — the failure only shows once a visitor actually sends a question.
"ak_… — rotate to reveal"
A key created before we started keeping keys readable on this page shows only its first few characters in the Key column, followed by "… — rotate to reveal" — for example "ak_1a2b3c4d… — rotate to reveal" — instead of the full value — we no longer have the plaintext stored to show you. Fix: click Rotate, then copy the new snippet from the row and replace it on your site. The old key stops working the moment you rotate.
When to email us
See When to email us. Include your workspace name and, if it's about one key or one site, the key's name and the site's address.
