Developer & no-code friendly

Add Carey to your website

One snippet of code is all it takes. The widget loads asynchronously, so it will not slow down your site.

Step 1

Copy your embed code

Inside Carey, open your bot and click the Integration tab. You'll see a snippet that looks like this:

<script>
  window.BRAINWAVE = {
    botId: "YOUR_BOT_ID",
    supabaseUrl: "YOUR_SUPABASE_URL",
    supabaseKey: "YOUR_SUPABASE_KEY"
  };
</script>
<script async src="https://careybot.com/widget.js"></script>

The values for botId, supabaseUrl, and supabaseKey are already filled in for you. Just copy and paste.

Step 2

Paste it into your site

The safest place is just before the closing </body> tag. That ensures the rest of your page loads first and the widget does not block anything.

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <!-- your page content -->

    <script>
      window.BRAINWAVE = {
        botId: "YOUR_BOT_ID",
        supabaseUrl: "YOUR_SUPABASE_URL",
        supabaseKey: "YOUR_SUPABASE_KEY"
      };
    </script>
    <script async src="https://careybot.com/widget.js"></script>
  </body>
</html>

The async attribute means the script downloads in the background and only initializes once your page is fully rendered.

Step 3

Platform-specific instructions

WordPress

Go to Appearance → Theme File Editor (or use a plugin like WPCode).
Open your active theme's footer.php file.
Paste the snippet just before </body>.
Alternatively, use a 'Custom HTML' widget in the footer area of block themes.

Shopify

Online Store → Themes → Actions → Edit code.
Open layout/theme.liquid.
Paste the snippet just before </body>.
Save. The widget appears on every page automatically.

Wix

In the editor, click the + button → Embed → Embed a Widget.
Choose 'Custom' and paste the full snippet.
Resize the embed box to zero height/width if needed, or place it in the footer.
Publish your site.

Squarespace

Settings → Advanced → Code Injection.
Paste the snippet into the FOOTER section.
Save. It runs on every page.

Webflow

Open your project → Project Settings → Custom Code.
Paste the snippet into the 'Footer Code' area.
Save & publish.

Framer

Site Settings → General → Custom Code.
Paste the snippet into the end-of-<body> section.
Publish.

React / Next.js / Vite

Add the snippet to your root layout (e.g. app/layout.tsx or index.html).
Place it just before </body>.
No npm package needed. The widget is self-contained.

Step 4

Where to place it (best practices)

Every page. Put the snippet in a shared layout or global footer so visitors can chat from anywhere. Most queries happen on product or pricing pages, but users often start from the home page.
Before </body>. This keeps it non-blocking and avoids layout-shift issues.
Only once per page. Including the snippet twice creates duplicate buttons. If you use a site-wide footer, do not also add it to individual pages.
Avoid inside iframes. The widget is already a floating panel; nesting it inside an iframe can break positioning and cookies.

Step 5

Troubleshooting

Widget does not appear? Open the browser console. If you see a "Missing config" error, double-check that window.BRAINWAVE is set before the widget script runs.
CSP errors? If your site uses a strict Content-Security-Policy, allow script-src for your app domain and connect-src for your Supabase URL.
Conflicts with other chat widgets? Carey uses high z-index values (2147483647) so it stays clickable, but if you run multiple widgets you may see overlapping buttons. Use one per page.
Still stuck? Email us or check the Integration tab inside your bot. It shows your exact, pre-filled snippet.

Ready to add it to your site?

Build your bot first, then grab the snippet from the Integration tab.

Build your bot Back to home