---
title: "Fix chat widget problems"
description: "What to check when the chat widget doesn't appear, shows old colours, blocks page scrolling or won't load on your website."
canonical_url: "https://chatthing.ai/docs/channels/website/troubleshooting"
last_updated: "2026-09-25"
---

# 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](https://chatthing.ai/docs/channels/website/install#platform-notes), 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:

```html
<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](https://chatthing.ai/docs/channels/website/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](https://chatthing.ai/docs/channels/website/customise-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](https://chatthing.ai/docs/channels/website/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](https://chatthing.ai/docs/help/troubleshooting), or contact us from **Help and support** in the app. Tell us the address of the page where the widget should appear.

## Related

- [Add the chat widget to your website](https://chatthing.ai/docs/channels/website/install): Copy your bot's embed code and paste it into your site as a chat widget or embedded chat, with steps for WordPress, Shopify, Webflow, Wix and more.
- [Troubleshooting](https://chatthing.ai/docs/help/troubleshooting): Fix common Chat Thing problems with data source syncing, bot answers, channels, usage limits and your account, or find out where to get help.