Fix chat widget problems

Work through the section that matches what you're seeing. Most widget problems come from where the code is pasted, a cached copy of the page, or something on the website blocking it.

The widget doesn't appear

Check these in order.

1. Is the code on the live page?

Open your website, view the page source (usually right-click > View page source) and search for chat-widget.js.

• Not there: the code isn't on the published page. Many site builders only add custom code after you publish, and some only on paid plans. Paste it again following Add the chat widget to your website, then publish.
• There, but only on some pages: paste it into a template, footer or site-wide custom code area rather than a single page.

2. Was the code copied in full?

The widget code must include the bot ID in the id attribute:

<script src="https://chatthing.ai/chat-widget.js" type="text/javascript" id="YOUR_BOT_ID" async defer></script>

If there's a window.chatThingConfig line, it must come before the widget script. If your platform or editor removes attributes from script tags, add your bot ID to the config instead: window.chatThingConfig = { botId: "YOUR_BOT_ID" };. You'll find the bot ID under Other embed methods in the Embed dialog.

Some editors convert quotes to "smart quotes" or wrap pasted code in formatting. Paste into a code or HTML field, not a normal text block.

3. Is something blocking it?

Open your browser's developer tools and look at the Console for errors mentioning chatthing.

• "ChatThing: no bot id found" - the bot ID is missing. See step 2.
• Content Security Policy errors - your site's CSP must allow Chat Thing. Add https://chatthing.ai to script-src and https://app.chatthing.ai to frame-src (or your custom domain to both). The widget adds a small <style> element, so style-src needs 'unsafe-inline'. If you use a first message preview or launcher label, also allow https://fonts.googleapis.com in style-src and https://fonts.gstatic.com in font-src.
• Blocked requests - ad blockers, privacy extensions and some company networks block chat widgets. Try a private window with extensions turned off, or another network. You can't control your visitors' blockers, so also offer another way to contact you.
• Cookie consent tools - if your consent tool blocks third-party scripts until a visitor accepts, the widget only appears after consent. Check how the tool categorises the widget script.

4. Is it hidden behind something?

If the code loads but you can't see the button, another element may be covering it, such as a cookie banner or another chat tool in the same corner. Move the widget with position: "bottom-left" or raise it with zIndex - see Customise the widget with code.

5. Are you looking at an old copy of the page?

Caching plugins, CDNs and site builders can keep serving a version of the page from before you added the code. Clear your site's cache, then check again in a private or incognito window.

The widget shows old colours, language or preview message

The widget button's colour and icon, the widget language and the first message preview are written into the embed code when you copy it. After changing them in the web channel settings, click Embed on your bot's dashboard, copy the code again and replace the old code on your site. Then clear your site's cache.

Changes to the chat itself - the colours inside the chat window, the welcome message, whether branding shows - apply straight away without new code.

The page won't scroll

On screens 640px wide or narrower, the chat opens full screen and the page behind it stops scrolling while the chat is open. Scrolling comes back when the chat is closed.

• If you close the chat with your own code, use window.chatThing.hide() so the page is unlocked properly.
• If you'd rather the chat didn't open full screen on phones, set mobileFullscreen: false in window.chatThingConfig.

Visitors see a password box

The web channel has Require a password turned on. Turn it off in the Access control section, or share the password with your visitors. See Access and security.

The embedded chat is too small or cut off

For an iframe embed, change the height in the iframe code, for example height="700". Make sure the element you placed it in isn't limiting its height.

Voice input doesn't work in an iframe embed

The iframe code must keep allow="clipboard-write; microphone;". Without the microphone permission, the browser blocks the microphone inside the chat.

Still stuck?

Check the general troubleshooting page, or contact us from Help and support in the app. Tell us the address of the page where the widget should appear.