Home
Initio
Getting started

Widget shows but won't connect

If your chat launcher appears but the colours are wrong, notifications never arrive, or messages don't send, the widget is loading but can't reach Initio's server. On almost every site, the cause is a single missing line in your Content-Security-Policy. Here's how to spot it and fix it.

How the widget loads (why it can render but not work)

The launcher paints instantly using built-in defaults, so visitors never wait on a blank corner. A split second later it makes a request to chat.initiochat.com to load your saved colours, status, and to open the live connection for messages and notifications.

If that second request is blocked, the widget is stuck on its defaults: it looks alive (default green, "Online now"), but it can't load your branding, can't send messages, and can't ring. Everything you'll read below is about unblocking that request.

Quick check: open your browser's developer console (F12) on the page with the widget. A blocked connection shows a red error like "Refused to connect to 'https://chat.initiochat.com/…' because it violates the Content-Security-Policy directive 'connect-src …'". That message confirms the fix below.

Symptom 1: the widget shows the wrong colours

The launcher and chat window appear in the default green no matter what you set in Widget Settings. Your colours are saved correctly, the widget just can't fetch them because the connection is blocked. Apply the CSP fix below and the branding loads on the next refresh.

Symptom 2: notifications and messages don't work

Visitors can see the launcher, but sending a message does nothing, chats never reach your dashboard, and agents get no sound or alert. Same root cause: the widget can't open its connection to Initio, so no data flows in either direction. The CSP fix restores it.

The fix: allow Initio in your Content-Security-Policy

A Content-Security-Policy (CSP) is an allowlist your site sends to the browser, controlling which domains scripts may load from and connect to. Any third-party widget, live chat, analytics, payments, needs its domain added. Add chat.initiochat.com to these directives:

Content-Security-Policy:
  script-src  'self' https://chat.initiochat.com;
  connect-src 'self' https://chat.initiochat.com wss://chat.initiochat.com;
  img-src     'self' data: https:;
  • script-src lets the browser download the widget script.
  • connect-src lets the widget make its requests, this is the one that fixes both the colours and the notifications. The wss:// entry is the live WebSocket connection for real-time messages.
  • img-src with https: lets avatars and country flags display.

Keep your existing sources, add ours to the same line rather than replacing it. If you don't set a CSP at all, there's nothing to change, this only applies if your site (or a security plugin, CDN, or Cloudflare rule) sends one.

Where your CSP lives

  • WordPress: usually a security plugin (Wordfence, Really Simple Security) or a header snippet in your theme, add our domain there.
  • Cloudflare: Rules → Transform Rules → Modify Response Header, or a Worker that sets the CSP.
  • Nginx / Apache: the add_header Content-Security-Policy (or Header set) line in your server config.
  • Custom / framework sites: wherever you set response headers or a <meta http-equiv="Content-Security-Policy"> tag.

Still on the wrong colours after fixing CSP?

  • Hard refresh the page (Ctrl/Cmd + Shift + R). The widget script and your browser cache it for a short time.
  • Check the token. If you deleted or recreated your organization, the widget token changed, copy the current snippet from Workspace → Widget Settings and replace the old one.
  • Tag Manager: confirm your GTM tag fires on all pages and serves the latest widget script.

Frequently asked questions

My chat widget shows but the colours are wrong (still the default green). Why?
The widget renders instantly from built-in defaults, then loads your saved colours from our server. If that second request is blocked, usually by a Content-Security-Policy on your site, the widget stays on the default colours. Add chat.initiochat.com to your CSP connect-src and the branding loads correctly.
Notifications and new messages are not coming through. What is wrong?
The launcher can appear while the connection to our server is blocked. When that happens the widget can never send or receive messages, so nothing rings and no chats reach your inbox. The cause is nearly always a Content-Security-Policy that omits chat.initiochat.com from connect-src (and wss://chat.initiochat.com for the live connection).
What do I add to my Content-Security-Policy for Initio?
Add https://chat.initiochat.com to script-src (to load the widget) and both https://chat.initiochat.com and wss://chat.initiochat.com to connect-src (for tracking, messages and the live connection). img-src should allow https: so avatars and flags display.
It works in Chrome but not in Edge or Firefox. Is that a browser bug?
No. When the widget is loaded through a tag manager, the config and the script can execute in a different order across browsers. Initio now waits for its config and boots in any order, so make sure you are serving the latest widget script (do a hard refresh). If the widget still will not connect, check your Content-Security-Policy.
The widget was working, then a visitor stopped appearing. Could it be the token?
Yes. If you delete or recreate an organization, its widget token changes. Any site still using the old token will render the widget from defaults but fail to connect. Copy the current snippet from Workspace, Widget Settings and replace the old one.
Back to docs Still stuck? Contact support