The chat widget is not loading on my site

You added the embed snippet but no widget bubble appears. Walk this checklist for snippet errors, CSP rules, master toggles and console errors.

By ChristopherUpdated May 14, 20263 min read

Symptom: You pasted the Ochre chat widget snippet into your site, but the bubble is not showing up. Or it shows up locally but not in production. Or it appears for some visitors and not others.

The widget has a small surface area and a short list of common failure modes. Walk them in order.

Checklist

1. Confirm the snippet is correct

The embed loader is a single line:

<script async src="https://ochrehq.com/api/widget/embed"></script>

It must be paired with a config block that sets your workspace slug. The config typically looks like this:

<script>
  window.OchreChatConfig = { workspaceSlug: "your-slug-here" };
</script>

Common mistakes:

The workspaceSlug is wrong, misspelled, or pasted with extra whitespace.
The config block is placed after the loader script. The config must be set before the loader runs, or you must use the loader's config event hook.
Two copies of the snippet on the same page. Remove duplicates.

For the canonical setup, see embedding the widget.

2. Open the browser console

Right-click the page, choose Inspect, and open the Console tab. Reload the page.

A 404 from ochrehq.com/api/widget/embed means the script never reached the page. Check your network tab and any ad-blocker.
A CSP error mentioning ochrehq.com is the most common production-only failure. See step 3.
A JavaScript error from the snippet itself usually means a missing or malformed OchreChatConfig.

3. Check your Content Security Policy

If your site sends a Content-Security-Policy header, the browser will block our script unless your policy allows our origin. You need at least:

script-src must include https://ochrehq.com.
connect-src must include https://ochrehq.com.
frame-src must include https://ochrehq.com if your widget config opens any modals.

A CSP error in the console will tell you exactly which directive needs an addition. This is the single most common reason a widget works locally and breaks in production.

4. Confirm the master toggle

Go to Settings → Channels in Ochre and confirm the live chat master toggle is on. If it is off, the loader runs but the bubble stays hidden by design. See channel master toggles.

5. Check office hours and the prechat form

Two settings can change widget behaviour without breaking it:

Office hours can hide the bubble outside business hours.
The prechat form shows a short form before the conversation opens. If it is misconfigured, the bubble may render but clicks may seem to do nothing.

6. Try a private window

Open the page in a private or incognito window with extensions disabled. Many "widget not loading" reports are ad-blockers, privacy extensions, or aggressive script blockers on the visitor side. If the widget appears in a clean private window, the issue is on the visitor's browser, not your site.

7. Verify the workspace is live

If your workspace is brand new or in trial, confirm billing is current and the workspace is not suspended. See pricing overview.

Quick test

Visit your page on a fresh device or browser. Open the console.

Bubble appears, no errors. You are done. The original report was probably a local extension or stale cache.
Bubble missing, CSP error in console. Update your CSP. Step 3.
Bubble missing, no errors. Master toggle, slug, or office hours. Steps 1, 4 and 5.

When to contact support

The console shows no errors, the snippet matches our docs, your CSP allows our origin, the master toggle is on, and the bubble is still missing.
The bubble appears but clicks do nothing and the prechat form looks fine.

Send the URL where the snippet is installed, the workspace slug, and a screenshot of the browser console. See support contact.

Was this article helpful?

← Back to Ochre Help