Embedding the widget
How to drop the Ochre widget into your site, identify logged-in users, and configure CSP and routing.
The basic install
Drop two script tags near the end of your <body> on every page where you want the launcher. The exact snippet is shown in Settings → Channels → Widget. It looks like this:
<script>
window.OchreChatConfig = { workspaceSlug: "your-workspace-slug" };
</script>
<script async src="https://ochrehq.com/api/widget/embed"></script>Place it once per page, before </body>. The loader is async, so it doesn't block your page from rendering. After your next deploy, the launcher appears.
The first script declares the workspace slug; the second loads the loader. The loader reads window.OchreChatConfig.workspaceSlug and inserts a fixed-position iframe pointing at https://ochrehq.com/widget/<slug>.
On a marketing site
If your marketing site is built with Webflow, Framer, Wix, Squarespace, or similar, every one of them has a "custom code" or "head/body inject" panel. Paste the two script tags into the body inject section and publish.
For Next.js, Astro, Remix, or any other framework, paste the script tags into your root layout right before </body>. We don't ship a framework-specific package because it isn't needed: the loader is just a script tag plus a config global.
On your authenticated app
Today the widget identifies visitors via the Pre-chat form. When the visitor submits an email, the conversation is linked to that end user, and any matching Stripe or HubSpot record gets pulled into the conversation context automatically.
A signed-token identity flow for authenticated apps is on the roadmap.
Hiding the launcher on certain pages
Two options:
- Don't include the script on that page.
- Include the script and conditionally render based on your own state.
The first is simpler.
Content Security Policy
If your site sets a CSP, allow the following:
script-srcandconnect-src:https://ochrehq.comframe-src:https://ochrehq.comimg-src:https://ochrehq.com data:
If you're seeing CSP errors in the console, this is almost always why.
SPA route changes
The widget handles client-side route changes correctly. If you're using Next.js, React Router, Vue Router, or any other client router, the launcher persists across navigation without re-mounting.
What's next
- Add a Pre-chat form for anonymous visitors.
- See Chat widget for behavior and branding.
Was this article helpful?