AI chat widget code: add a support assistant to any website
Copy one script tag and put a streaming AI chat assistant on your site. This guide covers the embed code, the options it accepts and the checks to run before you go live.
Published:
An AI chat widget answers your visitors on the page they are already reading. With api14 the whole integration is a single script tag: you design the widget in the dashboard, copy the code and paste it into your HTML. There is no SDK to install and no server code to write.
What the chat widget does
The chat widget is a small conversation window that streams answers from the model you pick. It follows private instructions that you write and visitors never see, so it can act as a support agent, a sales assistant or a guide to your documentation. Answers support basic formatting (paragraphs, lists, bold, code and links), a Stop button ends a long answer, and the conversation stays while the visitor moves between pages in the same tab.
The widget code
After you save a widget in Widgets, the editor shows its embed code:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
Put the tag inside <body> where the chat should appear. Two optional attributes change where and how it renders:
| Attribute | What it does |
|---|---|
data-target | CSS selector of an element to render into, for example #support. |
data-height | Height of an inline widget, for example 520px. Chat defaults to 480px. |
If you prefer a launcher in the corner of the screen, choose the Floating button placement in the editor. The code stays the same.
Four steps to a live chat assistant
- Pick a model. Any chat model in the catalog works. The picker shows each model's price, so you can start with a fast, inexpensive model and switch later without touching your site.
- Choose an API key. Every widget runs under one of your API keys. Select an existing key or use the last option in the list, Create new API key, to make one just for this widget. The key's limits apply to the widget, and the key itself never reaches the browser.
- Write the instructions and texts. Set the title, the greeting, the input placeholder and the button label. Add private instructions that describe your product and the tone you want.
- Allow your domains. Under Settings, Widget sites list the sites where the widget may run. Requests from any other site are rejected.
Why it does not break your page
The widget renders inside an isolated Shadow DOM. Your CSS does not leak into the chat window and the widget does not restyle your page. It loads asynchronously, so it does not block the rest of your content from rendering.
Before you go live
- Open the preview in the editor and ask the questions your customers actually ask. The preview runs your unsaved settings for real.
- Set a daily spend limit for the widget so a busy day cannot surprise you.
- Check that your balance covers the expected traffic. Visitor requests are charged to your USD balance at the model's normal price.
Ready to try it? Design a chat widget without an account on the widgets page, then read the full reference in the widget docs.