Setup guide

Add Cluable to any website in 5 minutes

There is nothing to integrate and nothing to migrate. It is one script tag. Paste it once and the chat widget is live on every page, whatever your site is built with.

The one snippet

This is the only code you ever paste. Grab your bot’s ID from the dashboard (Overview → Embed code) and swap it in forYOUR_BOT_ID.

Paste before </body>
<!-- Cluable AI chat widget -->
<script
  src="https://cluable.com/widget/widget.js"
  data-widget-id="YOUR_BOT_ID"
  async
></script>
No dependenciesLoads async · zero speed impactLive on every pageUpdate anytime from the dashboard

Pick your platform

Any website (HTML)WordPressShopifyWebflowWixSquarespaceFramerGoogle Tag ManagerReact / Next.jsGhostBBubble

Any website (HTML)

1 min

If you can edit your site’s HTML, this works everywhere. Paste the snippet just before the closing </body> tag on every page you want the widget on (or in a shared layout / footer include).

  1. 1Open the HTML file or template that renders your pages (often index.html, or a shared header/footer partial).
  2. 2Paste the snippet immediately before the closing </body> tag.
  3. 3Replace YOUR_BOT_ID with your bot’s ID from the Cluable dashboard (Overview → Embed code).
  4. 4Save and re-upload. The chat bubble appears in the corner within seconds.
index.html
<!-- Cluable AI chat widget -->
<script
  src="https://cluable.com/widget/widget.js"
  data-widget-id="YOUR_BOT_ID"
  async
></script>

WordPress

2 min

The safest way is a free header/footer plugin, so your snippet survives theme updates.

  1. 1In wp-admin, go to Plugins → Add New and install “WPCode” (or “Insert Headers and Footers”). Activate it.
  2. 2Open Code Snippets → Header & Footer (WPCode) or Settings → Insert Headers and Footers.
  3. 3Paste the Cluable snippet into the Footer / “Scripts in Body” box.
  4. 4Replace YOUR_BOT_ID with your bot’s ID, then Save.
<!-- Cluable AI chat widget -->
<script
  src="https://cluable.com/widget/widget.js"
  data-widget-id="YOUR_BOT_ID"
  async
></script>

Prefer not to use a plugin? Add the snippet to your (child) theme’s footer.php just before </body>. Use a child theme so a theme update doesn’t overwrite it.

Shopify

2 min

Add it to your theme layout so it shows on every storefront page.

  1. 1From your Shopify admin, go to Online Store → Themes.
  2. 2On your current theme, click … → Edit code.
  3. 3Under “Layout”, open theme.liquid.
  4. 4Paste the snippet right before the closing </body> tag, replace YOUR_BOT_ID, and Save.
theme.liquid
<!-- Cluable AI chat widget -->
<script
  src="https://cluable.com/widget/widget.js"
  data-widget-id="YOUR_BOT_ID"
  async
></script>

The widget appears on all storefront pages, including product, collection and cart pages.

Webflow

1 min

Webflow has a built-in place for custom code — no exporting required.

  1. 1Open your project, then go to Project Settings → Custom Code.
  2. 2Paste the snippet into the “Footer Code” box (before </body>).
  3. 3Replace YOUR_BOT_ID with your bot’s ID.
  4. 4Save changes, then Publish your site for it to go live.
<!-- Cluable AI chat widget -->
<script
  src="https://cluable.com/widget/widget.js"
  data-widget-id="YOUR_BOT_ID"
  async
></script>

To add it to a single page instead, use Page Settings → Custom Code → Before </body> tag.

Wix

2 min

Wix loads third-party scripts through its Custom Code manager.

  1. 1In your Wix dashboard, go to Settings → Custom Code (under “Advanced”).
  2. 2Click “+ Add Custom Code”.
  3. 3Paste the snippet, and set “Place Code in” to Body – end.
  4. 4Choose “All pages”, name it “Cluable”, set it to load once, replace YOUR_BOT_ID, and Apply.
<!-- Cluable AI chat widget -->
<script
  src="https://cluable.com/widget/widget.js"
  data-widget-id="YOUR_BOT_ID"
  async
></script>

Squarespace

1 min

Squarespace has a site-wide code injection area.

  1. 1Go to Settings → Advanced → Code Injection.
  2. 2Paste the snippet into the Footer box.
  3. 3Replace YOUR_BOT_ID with your bot’s ID.
  4. 4Save. The widget shows on every page of your site.
<!-- Cluable AI chat widget -->
<script
  src="https://cluable.com/widget/widget.js"
  data-widget-id="YOUR_BOT_ID"
  async
></script>

Code Injection is available on Business and Commerce plans.

Framer

1 min

Framer supports custom code at the end of the body tag.

  1. 1Open your project → Site Settings (the gear icon) → General.
  2. 2Scroll to “Custom Code”.
  3. 3Paste the snippet into “End of <body> tag”, replace YOUR_BOT_ID.
  4. 4Publish your site.
<!-- Cluable AI chat widget -->
<script
  src="https://cluable.com/widget/widget.js"
  data-widget-id="YOUR_BOT_ID"
  async
></script>

Google Tag Manager

3 min

If you manage scripts through GTM, add Cluable as a Custom HTML tag.

  1. 1In Google Tag Manager, open your container and go to Tags → New.
  2. 2Choose “Custom HTML” as the tag type.
  3. 3Paste the snippet and replace YOUR_BOT_ID.
  4. 4Set the trigger to “All Pages”, save, then Submit / Publish the container.
<!-- Cluable AI chat widget -->
<script
  src="https://cluable.com/widget/widget.js"
  data-widget-id="YOUR_BOT_ID"
  async
></script>

Leave “Support document.write” unchecked — the script loads async and does not need it.

React / Next.js

2 min

For a plain React app, add the tag to your public/index.html. For Next.js (App Router), use the built-in <Script> component so it loads on every route.

  1. 1Next.js (App Router): open app/layout.tsx and render the Script inside <body>.
  2. 2Next.js (Pages Router): add the same <Script> to pages/_app.tsx.
  3. 3Plain React (Vite / CRA): paste the plain snippet into public/index.html before </body>.
  4. 4Replace YOUR_BOT_ID with your bot’s ID.
app/layout.tsx
// app/layout.tsx (Next.js App Router)
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cluable.com/widget/widget.js"
          data-widget-id="YOUR_BOT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

The widget renders its own DOM outside React, so it never interferes with hydration.

Ghost

1 min

Ghost has a site-wide code injection panel.

  1. 1In Ghost Admin, go to Settings → Code injection.
  2. 2Paste the snippet into the “Site Footer” box.
  3. 3Replace YOUR_BOT_ID and Save.
<!-- Cluable AI chat widget -->
<script
  src="https://cluable.com/widget/widget.js"
  data-widget-id="YOUR_BOT_ID"
  async
></script>
B

Bubble

2 min

Bubble lets you inject scripts into the page body.

  1. 1Open your app → Settings → SEO / metatags.
  2. 2Find “Script/meta tags in body”.
  3. 3Paste the snippet, replace YOUR_BOT_ID, and save. Deploy to live when ready.
<!-- Cluable AI chat widget -->
<script
  src="https://cluable.com/widget/widget.js"
  data-widget-id="YOUR_BOT_ID"
  async
></script>

Check it is live

  • Open your site in a new tab (hard-refresh if you had it open). The chat bubble appears in the bottom corner within a few seconds.
  • Click it and ask a question. The dashboard shows a green “Live” status once it has served its first message.
  • Don’t see it? Make sure the snippet is before </body>, that YOUR_BOT_ID is your real ID, and that any caching plugin/CDN has been cleared.

Don’t have a bot yet?

Point Cluable at your website and it trains itself in about five minutes. Then come back here and paste the one line.

Start free

Stuck on a platform we haven’t listed? Email hello@cluable.com and we’ll walk you through it.