> ## Documentation Index > Fetch the complete documentation index at: https://cntillion.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # AI chat widget for your website > Install the Centillion AI chat widget for website visitors with one snippet: a floating chat bubble or an inline chat. Set it up and test it today. Your agent answers on your own site through an AI chat widget for website visitors. It comes in two shapes: a floating bubble in the corner of every page, or an inline chat inside a page you choose. Both are one snippet, and neither needs a plugin. ![Channels page with Install and the Chat bubble, Help page and Center stage cards](https://mintcdn.com/centillion/HETe0o8F9JBS-hxj/images/channels/website-01-channels-page.webp?fit=max\&auto=format\&n=HETe0o8F9JBS-hxj\&q=85\&s=5a5af119c5caa02b9d3d0fc276efb98d) Channels holds the Install menu and the three website surfaces: Chat bubble, Help page and Center stage. ## What it does * Adds a pill-shaped **Chat now** launcher to every page from one script tag. The conversation itself loads only when a visitor reaches for it, so a chat nobody opens costs your page next to nothing. * Puts the chat inline on a help or contact page with an iframe. Give it at least 700 pixels of height. * Offers three website surfaces: **Chat bubble** (a corner window while visitors browse), **Help page** (a dedicated support page) and **Center stage** (a focused conversation in the middle of your site). Each one can be switched off on its own. * Takes files from visitors, up to five files of 5 MB each per message, on Hobby and up. * Hands the chat to your team: AI replies pause and a person takes over from the [helpdesk inbox](https://cntillion.com/docs/helpdesk.md). * Lets visitors dictate or talk to the agent out loud, within your plan's call limits. ## What you need * An agent with website chat among its surfaces. An agent made with **Create AI agent** has it from the start. An agent made through onboarding has whatever you ticked on the deployment step. * The Owner or Member role. Viewers can try the agent in Playground but cannot save changes. These [workspace roles](https://cntillion.com/docs/workspaces/members.md) apply to your dashboard team, not to people using the widget. * Access to your site's shared layout, or to the page that should hold the inline chat. * Hobby and up for visitor files. Live chat with your team needs Helpdesk, and voice calls need Voice: both come with Standard and up. > [!WARNING] > > The surfaces are chosen once, when the agent is created, and no setting > changes them afterwards. If your agent's embed address returns a page not > found and the ID is right, website chat was never on it. Create a new agent and > point the snippet at that one. Wait for automatic training to finish and **Publish** the branch before you put the snippet on a page real customers visit. An untrained agent still replies from its instructions, but none of your imported knowledge is available to it yet. See [Training and publishing](https://cntillion.com/docs/agents/training-and-publishing.md). ## Set it up ### The floating chat bubble **1. Open the Install menu** Open your agent's **Channels** page and click **Install**. The same menu is available as an **Install** shortcut in **Playground → Chat bubble**. ![Playground with Chat bubble selected, a chat preview open and the Install shortcut](https://mintcdn.com/centillion/WLpDA0mJ1ryQ1IZ5/images/channels/website-02-playground-chat-bubble.webp?fit=max\&auto=format\&n=WLpDA0mJ1ryQ1IZ5\&q=85\&s=9c9a03b6faa5751b2fbf145134622ef5) The Playground keeps an Install shortcut beside the chat bubble preview. **2. Choose Website widget** The menu lists **Website widget**, **Website iframe**, **Shopify** and **WordPress**. Pick **Website widget**. ![Install menu on Channels with Website widget, Website iframe, Shopify and WordPress options](https://mintcdn.com/centillion/WLpDA0mJ1ryQ1IZ5/images/channels/website-03-deploy-menu.webp?fit=max\&auto=format\&n=WLpDA0mJ1ryQ1IZ5\&q=85\&s=a0e9962309c9ffceba42cca00be45a1c) Channels, Install: choose the widget, the iframe or Shopify. WordPress is marked Coming soon. **3. Copy the snippet** The sheet shows the code with your agent's ID already in it. Copy it from there rather than from this page, so the ID is right. ```html theme={null} ``` Leave the `?v=10` in place: it names the version of the widget script the snippet was made for. ![Website widget panel with the Specific domains switch, the domain list and the embed snippet loading embed.js from app.cntillion.com](https://mintcdn.com/centillion/OVR3XViKbG9zMitv/images/channels/website-04-widget-setup-panel.webp?fit=max\&auto=format\&n=OVR3XViKbG9zMitv\&q=85\&s=0e8966751a1cdfc7f554f331ba017c75) The Website widget panel holds the snippet and the Specific domains allowlist. **4. Paste it into your site** Put it in your site's shared layout, near the closing `` tag, so it loads on every page. If someone else maintains the site, **Send instructions via email** writes the snippet and where it goes into a mail you can forward. **Copy prompt** gives the same instructions phrased for an AI assistant, if you edit your site with one. **5. Check it in a private window** Open your site in a private window, send a real question and confirm the answer. Then check that the conversation appears under **Conversations**. The widget caches for an hour, so a browser that loaded your site before you pasted the snippet may keep showing the old page for a while. ### The inline chat **1. Choose Website iframe** In **Channels**, click **Install**, then **Website iframe**. The Playground has the same Install shortcut. **2. Paste the iframe where the chat belongs** ```html theme={null} ``` This is the right choice for a dedicated help or contact page. Below about 700 pixels of height the conversation gets cramped. Keep `allow="microphone"` if you edit the code: voice calls need it. ### Only on your own sites By default the chat loads wherever the snippet is pasted, including on a site that is not yours. **1. Turn on Specific domains** Open **Channels → Install**, then **Website widget** or **Website iframe**, and turn on **Specific domains**. **2. List the sites, one per line** ```text theme={null} example.com *.example.com ``` A leading `*.` covers the domain and every subdomain under it. You can write `https://example.com` too: the scheme and any port are ignored. Up to 50 entries. **3. Save the list** From then on, a visitor on any other site sees "Agent unavailable on this domain" instead of the chat. Voice calls follow the same list. ### Shopify and WordPress For a Shopify store, use **Channels → Install → Shopify**, connect the store, and enable and save **Centillion chat** in the active theme's app embeds. No snippet goes into the theme. See [Shopify setup and actions](https://cntillion.com/docs/channels/shopify.md). The WordPress option in the Install menu is still coming soon; the snippets above work on WordPress when pasted into the site's layout. ## Use it every day ### Appearance and behaviour The launcher shows the agent's picture on the left and **Chat now** on the right. The picture is the one under **Display**, **Content**, **Agent picture**, the same one the chat header shows; without one, the Centillion logo stands in. An agent created from a website starts with that site's icon as its picture and the site's brand colour as its accent (see [creating an agent](https://cntillion.com/docs/agents/create-an-agent.md)). **Chat now** expands the pill into the conversation. **Close** or the Escape key collapses it and keeps the conversation and any unsent message. The chat runs in its own frame, apart from your page's styles. In **Display**, choose the light or dark theme, the launcher's position and offsets, the conversation size, and whether it starts open or closed. Edit **Floating bubble**, **Button label** to replace **Chat now**. The **Chat now** and **Close** buttons take the accent colour when it is on. Auto-open after a delay is off unless you turn it on. A widget set to start open, or shown without a launcher, loads with the page. The Playground preview starts open so you can test at once. It follows your dashboard theme, except in **Display**, where it shows the theme you are editing. Switching tabs keeps the conversation and unsaved drafts; choose **Save changes** to save the draft, then **Publish** in the top bar to update new customer conversations. Each surface has a **Visibility** switch on the Playground's **Overview** tab. Turning one off stops it showing and routing messages to your agent. The same tab can give the surface its own instructions. Every agent uses [version control](https://cntillion.com/docs/agents/releases-and-workflows.md). The chat opens with its assigned version's greeting and appearance, and an explicit restart loads a version by the current traffic split. Domain allowlists and plan limits still apply at once. ### Live support with your team Enable Centillion Helpdesk, then set up **Centillion live chat** under **Tools → Add tool → New tool → Integration** and select **Chat bubble**, **Help page** or **Center stage**. A customer who asks for a person gets a waiting confirmation and can keep writing in the same chat. AI replies pause, and your teammates continue from a **Live chat** ticket. The chat timeline marks when live support starts and when AI replies resume, apart from the messages themselves. For a person to handle the first message, turn on **Human-first conversations** in **Helpdesk settings**, **Human handoff**. Chat bubble and Help page conversations without a ticket then enter the inbox before the AI answers. This does not apply to Center stage or the Playground. Center stage runs at `/embed/YOUR_AGENT_ID/center-stage` on the app domain; enable its channel as well as selecting it in the live chat action. Its chat, ticket history and human replies stay with that Center stage conversation, and the domain allowlist applies there too. When live alerts are on, the widget tells your team which page the visitor is on. Only the address is sent, never the part after `?` or `#`. ### Files from visitors Visitors attach files with the paperclip, by dropping them on the chat or by pasting. Images show a preview; wait for **Ready to send**. If sending fails, the text and files return to the message box. The agent sees images and reads the text of documents with the message they arrive in; later it knows them by name. A model that cannot read images is told an image was sent. Files stay private with the conversation: open them from **Conversations** or the Helpdesk, where they stay on the ticket. Turn off **Attachments** under **Display**, **Capabilities** to stop uploads. ### Voice and dictation **Start dictation** fills the message box from the visitor's speech, in browsers that support speech recognition, and works whenever **Voice to text (Dictation)** is on. **Start a voice conversation** starts a call: the agent opens with the **First message → Call** from **Agent**, or a greeting with its name when that is empty, then the visitor speaks, the agent answers in its own voice, and the visitor can cut in. Pressing it again ends the call, and typing still works during it. The call button appears only when dictation is on in **Display** and voice is on for the agent with its voice settings complete. The browser asks for microphone access the first time. ### Your site, your customers * **Control the bubble from your site.** `window.centillion.open()`, `close()` and `resetChat()` connect your own buttons. `setOptions()` changes the title, launcher label, greetings, suggestions and composer for the current page load. [Chat bubble controls](https://cntillion.com/docs/developer-guides/chat-bubble-control.md) covers proactive messages and dictation-only mode too. * **Listen for events.** Sent messages, finished answers, tool calls and results, dictation transcripts and option changes reach `window.centillion.addEventListener`; a plain iframe posts them to its parent. See [event listeners](https://cntillion.com/docs/developer-guides/event-listeners.md). * **Recognise signed-in customers.** Your server signs the user's ID and the page passes the signature, so the agent can link the chat to their contact and answer about their account. With a signed identity, the script syncs the contact before the widget opens. Choose **Set up identity verification** in the Install sheet, then read [identity verification](https://cntillion.com/docs/customer-data/identity-verification.md). Without it, every visitor is anonymous. * **Run actions on your site.** The script embed supports [website functions](https://cntillion.com/docs/agents/custom-actions.md), which call functions your site registers. * **Billing questions.** [Stripe actions](https://cntillion.com/docs/customer-data/stripe.md) run in the Chat bubble for identified visitors whose contact is linked to a Stripe customer. Invoice and subscription cards appear in chat; changes open Stripe's portal. Help page and Center stage do not run them. * **Meeting bookings.** A Cal.com booking action on Chat bubble, Help page or Center stage shows a calendar in the chat. Visitors pick a time zone and a free slot, enter their details and confirm. Confirming a test in Playground creates a real appointment. * **Procedures.** [Free-form procedures](https://cntillion.com/docs/agents/procedures.md) load instructions for a task. Structured procedures enforce an ordered sequence, with Ask steps waiting for the visitor's answer. Referenced actions must be enabled for the website surface. * **Campaign attribution.** The script embed keeps the visitor's first campaign for the tab session and adds its five UTM parameters to agent links back to your site. It needs `embed.js?v=5` or later on every page. See [UTM tracking](https://cntillion.com/docs/channels/utm-tracking.md). ### A/B testing Show the agent to a share of visitors and compare them with visitors who see no chat. Open **Playground**, **Chat bubble** or **Center stage**, then under **Display**, **A/B testing**, turn on **Show to a percentage of visitors**. Enter a whole number from 0 to 100 and choose **Save changes**. It starts at 50% when enabled and is shared by Chat bubble and Center stage. 0% hides the agent from everyone; 100%, or turning testing off, makes every visitor eligible. Turning it off keeps your percentage for next time. Each browser gets a random assignment that stays across visits. The percentage is a target, so a small sample may differ. Raising it adds visitors and keeps everyone already in. For included visitors, `setOptions()` also loads the chat frame so it can confirm it rendered. Excluded visitors see neither launcher nor chat, and auto-open or `open()` cannot reveal it. Direct iframes and Center stage apply the split too; the Help page and the dashboard preview always show. If the browser cannot store an assignment, a value from 1 to 99 keeps the widget hidden there. Clearing site storage or changing browser can change an assignment. ## Limits and good to know * **Rate limit.** By default an agent answers up to 20 messages every four minutes from each visitor, who then sees "Too many messages in a row". If all visitors together send ten times that (200 messages every four minutes by default), the agent pauses on your website until the window moves on. Change the limit under **Guardrails**: 1 to 1000 messages, over a window of up to 24 hours, with your own message. WhatsApp, email, SMS and other channels never count toward it. A visitor is known by the ID the chat sends, which stays the same for a browser across the bubble and the inline chat; a modified client can send a new ID each time, which is why the agent-wide limit exists. * **Visitor files.** Up to five files of 5 MB per message: PNG, JPG, GIF and WEBP images, and PDF, DOCX, TXT, CSV and MD documents. PDFs up to five pages and 2,000 tokens per page. Each image and PDF page adds the model's credit rate to the request (see [Plans and billing](https://cntillion.com/docs/workspaces/billing.md)). Each visitor can send 30 files an hour, and an agent takes 600 an hour. * **Voice calls.** The limits on calls per day and calls at once apply to the widget and are checked when the visitor presses the button. A call that reaches the maximum call length ends: the agent says a short goodbye and hangs up, unless a teammate has taken it over. A call also ends a few seconds after the agent says goodbye if nobody speaks. If the visitor goes quiet in the middle of a call, the agent follows the silence prompt and cutoff in **Settings → Advanced → Conversational behavior**. Either timer can be disabled. The same card controls waiting phrases and the maximum duration message. See [Conversational behavior](https://cntillion.com/docs/agents/create-an-agent.md#conversational-behavior). * **The allowlist** checks the page that loaded the chat, which browsers report as the referring site. It deters a copied snippet; do not treat it as a security boundary. * **Video avatar.** You cannot set up or edit a video avatar in the dashboard today. An avatar saved earlier keeps working, as a panel docked to the side of the page with its own launcher. * **Branding.** The branding add-on removes the Centillion footer from your public agents and workspace emails. An Owner adds it in **Workspace settings**, **Plans**. ## Questions ### The chat does not appear on my site. What should I check? View the live page's source and search for `embed.js`. A snippet in a draft layout, or in a template you did not redeploy, is the usual cause. Then copy the snippet again from the Install sheet, which rules out a wrong agent ID. If both are right, the agent may not have website chat among its surfaces. ### Why do some visitors see no widget? Check **Display**, **A/B testing**. Excluded browsers see no launcher and no chat, and reloading keeps their assignment. Set 100% or turn testing off while you check the installation, then restore your split. ### The panel says the agent is unavailable on this domain. The domain allowlist is on and this site is not on it. Add the site under **Specific domains** in the Install sheet and save the list. ### The inline chat shows a page not found. Either the agent ID in the iframe address is wrong, or the agent does not have website chat among its surfaces. Copy the snippet again from the Install sheet first, since that rules out the ID. ### The chat works but its answers are not useful. That is a knowledge problem, not an installation one. Check that training has finished and that your sources cover the question. See [My agent is not answering](https://cntillion.com/docs/troubleshooting.md). ### Does the widget slow down my pages? Until a visitor points at the launcher, tabs to it, taps it, or auto-open fires, the page loads only the launcher script and its settings. A widget set to start open loads with the page, because it is on screen from the start. ### Where else can my agent answer besides the website? The same agent can answer on WhatsApp, email, phone and other channels, with the same knowledge. [What Centillion is](https://cntillion.com/docs/introduction.md) gives the overview. ## Try it Paste the snippet into a test page and send your first question. You will see the conversation in the dashboard a moment later. > [card] [Start free](https://app.cntillion.com/sign-up?utm_source=docs\&utm_medium=article\&utm_campaign=channels-website) > > Start on the Free plan, or take a seven-day trial of a paid plan. Your agent is live on your site in an afternoon. > [card] [Book a demo](https://cal.com/patrick-turricelli-smgfks/15min?utm_source=docs\&utm_medium=article\&utm_campaign=channels-website) > > Fifteen minutes with the team, on your own use case. Or ask the assistant on this page. ## Related > [card] [What Centillion is](https://cntillion.com/docs/introduction.md) > > The product in one page: agents, knowledge, channels and the helpdesk. > [card] [Helpdesk](https://cntillion.com/docs/helpdesk.md) > > Where your team picks up the chats the agent hands over. > [card] [Chat bubble controls](https://cntillion.com/docs/developer-guides/chat-bubble-control.md) > > Open, close and configure the widget from your own code. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.