The widget

The chat widget is the part of Chattering that your visitors actually use. It sits in the corner of your site as a small launcher button and opens into a panel where someone can ask a question, search your help articles, and pick up earlier conversations — all without leaving the page they were on.

Behind the panel is the AI agent you configure in the dashboard. When a visitor sends a message, the agent searches the knowledge sources you have added and replies with a cited answer. If they need a human, the conversation shows up in your inbox with full context.

Add the widget to your site

Open your agent's Deploy tab and copy the snippet. It looks like this:

<script src="https://chattering.ai/widget.js" data-chattering="YOUR_AGENT_ID" async></script>

Paste it before the closing </body> tag on any page where you want the widget. The async attribute means it loads in the background without holding up the rest of your page.

Where exactly it goes depends on your stack. In a React or Next.js project, drop it in your root layout. In Vue or Nuxt it belongs in app.vue. WordPress users can paste it into a footer-scripts plugin or their theme's footer.php. If you use Google Tag Manager, a Custom HTML tag set to fire on All Pages does the job. One tag covers every page your layout includes — you won't need to paste it again.

Customise how it looks

Once the widget is live, open Widget → Appearance in the dashboard to adjust it — no need to touch the script tag.

Accent colour controls the launcher button, the send button, and your visitors' own message bubbles. Set it to match your brand and the widget fits naturally into your design. Greeting is the second line in the panel header — the default is “How can I help?” but you can change it to anything that suits your tone. Launcher side lets you move the button to the bottom-left if something on your page already occupies the right corner.

After you click Save & publish, the change reaches your visitors within about five minutes. The widget file is cached at the edge, so a hard refresh on your own machine won't show the update any faster — the cache expires on its own schedule.

What visitors see inside the panel

The panel has five tabs. Home shows the greeting, a question input, your suggested questions, and a card linking your newest help article. Messages holds that visitor's conversation history so they can pick up where they left off. News, Roadmap, and Help surface your published changelog entries, public feature requests, and help-centre articles respectively. Everything there comes from the same dashboard you already use — no extra setup needed to populate those tabs.

If the widget doesn't appear

The most common reason is that the script tag did not land in the actual HTML your server sends. View source on your live page — not your editor — and search for chattering. If it's not there, check which layout file renders footer scripts and make sure that layout wraps the pages where you want the widget.

If the tag is present but nothing shows, open the browser console. A blocked network request usually means a content security policy is stopping the script. Add chattering.ai to the allowed script and connect sources, then reload.

One other thing worth checking: the agent itself must be active. A draft or paused agent does not serve the widget, so the launcher simply won't render. Confirm its status in the dashboard and switch it to active if needed.

Articles in this collection

The guides below go deeper on each aspect of the widget. Start with Install the widget on your site if you haven't embedded it yet, then Change the widget's colour, greeting and position once it's running. Identify your logged-in users is worth reading once you have traffic — it replaces “Visitor 4821” in your inbox with real names and links conversations to contact profiles.