Chat Widget Not Loading? Cookiebot or CSP May Be Blocking It

If you've correctly installed the chat widget using Google Tag Manager (GTM) or directly in a single-page React app — but it still doesn’t appear — the problem is likely due to:

• Cookiebot blocking scripts until consent is given
• Content Security Policy (CSP) preventing external scripts
• Incorrect GTM tag configuration or load timing

This article explains the cause and gives step-by-step solutions.

🚫 Common Errors You Might See

When inspecting your browser's developer console, you might see:

🔒 Cookiebot Blocking Scripts

1consent.cookiebot.com/:1 Refused to frame 'https://consentcdn.cookiebot.com/' ...

This means Cookiebot is blocking third-party scripts (including your chat widget) before the user gives consent.

🔐 Content Security Policy (CSP) Errors

1Refused to load the stylesheet 'https://www.googletagmanager.com/debug/badge.css' ...

This indicates your CSP is too strict and blocks resources like:

• Chat widget scripts
• GTM scripts
• External iframes or fonts

✅ How to Fix It

🔧 Fix 1: Allow Chat Widget Domain in Your CSP

Ask your developer or hosting team to add the following to your Content-Security-Policy (CSP) headers:

1script-src https://handle-chat-widget.s3.amazonaws.com;
2frame-src https://handle-chat-widget.s3.amazonaws.com;

If you're using 'self' in your CSP, you must explicitly list all allowed domains — including the chat widget script host.

🔧 Fix 2: Configure Cookiebot to Allow the Widget

Cookiebot blocks scripts until users consent to specific categories. Here's how to ensure it allows the chat widget:

Option A: Use data-cookieconsent Attributes

If injecting manually (HTML or GTM):

1<script type="text/plain" data-cookieconsent="functionality">
2  window.webchatConfig = { token: "K3622313-109-356-0797850F" };
3</script>
4
5<script type="text/plain" data-cookieconsent="functionality" src="https://handle-chat-widget.s3.amazonaws.com/assets/js/webchat-widget.min.js"></script>

This tells Cookiebot: “Only run this script if the user has given functionality consent.”

Option B: Set It Up in Cookiebot Dashboard

1. Log into Cookiebot.

2. Go to "Your Scripts" or "Custom Scripts".

3. Add a new script:

   • Set Category to Functionality or similar
   • Paste your chat widget script
   • Choose Load after consent

🔧 Fix 3: Configure GTM Tag Consent Settings

If you're using GTM with Consent Mode, configure your tag:

1. In GTM, edit the chat widget tag.
2. Go to "Consent Settings".
3. Enable “Require additional consent”.
4. Add functionality (or whatever category you used in Cookiebot).

This ensures GTM will wait for proper consent before injecting the widget.

Test Your Setup

After making these changes:

1. Clear cookies in your browser (to reset consent).

2. Visit your website.

3. Decline cookies — the widget should not appear.

4. Accept cookies — the widget should now appear.

5. In the Dev Console, check:

   • Is window.webchatConfig defined?
   • Did the script from handle-chat-widget.s3.amazonaws.com load?
   • Is the widget DOM element present?

Summary