Install the widget
One line of HTML, pasted once, before the closing body tag on every page. It takes about two minutes.
1. Get your snippet
Your dashboard's install page shows the exact line with your bot's own key already filled in. It looks like this, where the key identifies your bot:
<script src="https://helpbrain.net/w/YOUR_BOT_KEY.js" async></script>Replace YOUR_BOT_KEY with your own key, or copy the ready-made line from the install page in your dashboard.
Note
The script is under 3 KB gzipped and loads asynchronously, so it never blocks your page from rendering. The chat itself is only fetched when a visitor actually opens it.
2. Paste it into your site
Pick your platform. Wherever you paste it, the snippet has to end up on every page you want the chat to appear on — which almost always means a shared footer or layout template, not one page's content.
Install the free WPCode plugin
In your WordPress admin, go to Plugins → Add New, search for WPCode, then install and activate it. This is the no-code route, and it survives theme updates — which editing a theme file does not.
Add a new snippet
Go to Code Snippets → + Add Snippet → Add Your Custom Code (New Snippet). Give it a name like HelpBrain, and set Code Type to HTML Snippet.
Paste and place it
Paste the snippet into the code box. Under Insertion, choose Auto Insert and set Location to Site Wide Footer.
Save and activate
Toggle the snippet Active and press Save Snippet. Load your site in a new tab — the bubble should be there.
Prefer to edit the theme?
Appearance → Theme File Editor → footer.php, paste just before </body>, then Update File. Use a child theme if you can: a parent-theme update will overwrite footer.php and silently remove your chat.
Open your theme's code
From your Shopify admin, go to Online Store → Themes. On your live theme, click the ⋯ button and choose Edit code.
Open theme.liquid
In the file list on the left, under Layout, click theme.liquid.
Paste before the closing body tag
Scroll to the bottom of the file, find </body>, and paste the snippet on the line immediately above it.
Save
Press Save. The chat now appears on every storefront page, including product and checkout-adjacent pages that use this layout.
Open code injection
Go to Settings → Advanced → Code Injection.
Paste into the Footer box
Paste the snippet into the Footer field — not Header. Squarespace adds footer injection immediately before </body> for you.
Save
Press Save, then open your live site to check.
Heads up
Code Injection is only available on Squarespace's Business plan and above. On Personal you will not see the Code Injection menu at all.
Open custom code
In your Wix dashboard, go to Settings → Custom Code (under Advanced), then click + Add Custom Code.
Paste the snippet
Paste it into the code box and give it a name like HelpBrain so you can find it later.
Choose where it loads
Set Add Code to Pages to All pages, and set Place Code in to Body - end.
Apply
Press Apply. Wix publishes custom code to the live site, so check your published URL rather than the editor preview.
Open your site's custom code
In the Designer, go to Site Settings → Custom Code.
Paste into Footer Code
Paste the snippet into the Footer Code box — the one labelled 'before </body> tag'.
Save changes
Press Save Changes at the top of the panel.
Publish
Publish the site. This step is the one people miss: custom code only goes live on publish, and it never runs in the Designer preview.
Open custom code
Go to Project Settings (the gear icon) → General, and scroll to Custom Code.
Paste into End of <body> tag
Paste the snippet into the End of <body> tag box, not the head box.
Publish
Publish the site. As with Webflow, custom code runs on the published site only.
Open code injection
In Ghost admin, go to Settings → Code injection.
Paste into Site Footer
Paste the snippet into the Site Footer box.
Save
Press Save. It applies to every page of the site, including posts.
Create a Custom HTML tag
In your GTM workspace, go to Tags → New → Tag Configuration → Custom HTML.
Paste the snippet
Paste it into the HTML box and name the tag HelpBrain.
Trigger it on all pages
Under Triggering, choose All Pages (Page View). Save the tag.
Submit and publish
Press Submit, then Publish. Nothing goes live until the container is published.
Note
Tag Manager loads after the page does, so the bubble appears a moment later than it would with a pasted snippet. If you gate tags behind consent, the chat will not load until the visitor consents.
Next.js (App Router)
Render it with next/script in your root layout, inside <body>. afterInteractive keeps it out of the critical path.
app/layout.tsximport Script from "next/script"; export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://helpbrain.net/w/YOUR_BOT_KEY.js" strategy="afterInteractive" /> </body> </html> ); }Vite, Create React App, or any single-page app
Add the plain snippet to index.html just before </body>. There is nothing React-specific to do: the widget attaches itself to document.body and is unaffected by your app re-rendering.
index.html<script src="https://helpbrain.net/w/YOUR_BOT_KEY.js" async></script>
Note
The widget lives outside your React tree and keeps its own state, so client-side route changes do not reset an open conversation.
Open your page template
Find the template that renders on every page — usually the one holding your footer.
Paste before </body>
Paste the snippet on the line immediately before the closing </body> tag.
Repeat only if you have to
If your pages share a footer include, once is enough. If each page is a standalone file, paste it into each one.
3. Check it worked
Two ways, depending on whether you have a dashboard open.
Look at your own site
Open your site in a private window and look at the corner you chose. The bubble appears on its own; the conversation itself is only loaded once someone clicks it, which is why the page stays fast.
Use the installation check
The install page in your dashboard has a Check installation button. It fetches your homepage from our side and looks for your bot's key.
Note
If your site is behind a firewall that blocks us, the check says it could not reach the page rather than claiming the snippet is missing — those are different problems and we do not conflate them.
Content security policy
If your site sends a Content-Security-Policy header, allow our origin in two directives. The script loads the bubble; the frame is the conversation itself, which runs on our origin so nothing about it can touch your page.
Content-Security-Policy:
script-src 'self' https://helpbrain.net;
frame-src 'self' https://helpbrain.net;You do not need a connect-src entry. The chat makes its network calls from inside the frame, under its own origin, not from your page.
If it does not appear
The usual causes are a page cache that has not expired yet, a snippet that landed in one page's content rather than the shared template, or a policy blocking our origin. Each of those, and the rest, has a fix here: