Suppabot
Suppabot/Docs

Installing the Widget

How to embed the Suppabot chat widget on WordPress, Shopify, Webflow, Wix, Squarespace, Next.js, and more.

Installing the Widget

The Suppabot chat widget is a single script tag. Once added to your site, it renders the chat launcher automatically — no other configuration required.

Finding your embed code

Go to Dashboard → your website → Appearance and click Copy Embed Code. Your snippet looks like this:

<script src="https://suppabot.com/widget.js?key=YOUR_WIDGET_KEY" defer></script>

Replace YOUR_WIDGET_KEY with the key shown in your dashboard. Each website has a unique key.

Platform instructions

WordPress

Option 1: Suppabot WordPress Plugin (recommended)

  1. Log in to your WordPress admin.
  2. Go to Plugins → Add New.
  3. Search for Suppabot.
  4. Click Install Now, then Activate.
  5. Go to Settings → Suppabot and paste your widget key.
  6. Save. The widget appears on all pages automatically.

Option 2: Manual (theme footer)

  1. Go to Appearance → Theme File Editor.
  2. Open footer.php (or your child theme's footer).
  3. Paste the script tag immediately before </body>.
  4. Click Update File.

Shopify

  1. Log in to your Shopify admin.
  2. Go to Online Store → Themes.
  3. Click Actions → Edit Code next to your active theme.
  4. Open Layout → theme.liquid.
  5. Find the closing </body> tag.
  6. Paste the script tag immediately before it.
  7. Click Save.

The widget will appear on all storefront pages including product and cart pages.

Webflow

  1. Open your project in Webflow Designer.
  2. Go to Project Settings → Custom Code.
  3. Scroll to the Footer Code section.
  4. Paste the script tag.
  5. Click Save Changes.
  6. Publish your site.

Wix

  1. Open your site in Wix Editor.
  2. Go to Settings → Custom Code (in the left sidebar).
  3. Click + Add Custom Code.
  4. Paste the script tag.
  5. Set Place Code In to Body — end.
  6. Set Add Code To to All Pages.
  7. Click Apply.
  8. Publish your site.

Squarespace

  1. Log in to your Squarespace admin.
  2. Go to Settings → Advanced → Code Injection.
  3. Scroll to the Footer field.
  4. Paste the script tag.
  5. Click Save.

The widget will appear across all pages of your site.

Next.js (App Router)

Use the Next.js Script component with strategy="afterInteractive" to load the widget after page hydration:

// src/app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://suppabot.com/widget.js?key=YOUR_WIDGET_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Adding it to the root layout.tsx ensures the widget loads on every page.

React (Vite or Create React App)

Inject the script on mount in your root component:

// src/main.tsx or App.tsx
import { useEffect } from "react";

function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://suppabot.com/widget.js?key=YOUR_WIDGET_KEY";
    script.defer = true;
    document.body.appendChild(script);
  }, []);

  return <>{/* your app */}</>;
}

Google Tag Manager

  1. In your GTM workspace, go to Tags → New.
  2. Click Tag Configuration → Custom HTML.
  3. Paste the script tag: 
    <script src="https://suppabot.com/widget.js?key=YOUR_WIDGET_KEY" defer></script>
  4. Under Triggering, select All Pages.
  5. Name the tag (e.g. "Suppabot Widget") and click Save.
  6. Click Submit to publish.

Raw HTML

For any site where you can edit raw HTML directly, paste the script tag immediately before the closing </body> tag on every page:

    <script src="https://suppabot.com/widget.js?key=YOUR_WIDGET_KEY" defer></script>
  </body>
</html>

Verifying installation

After embedding, visit your website and look for the chat launcher button in the bottom corner of the screen. Click it — if a chat window opens, installation is successful.

If the widget does not appear, check:

  • The script tag is present in the rendered HTML (use browser DevTools → Elements, search for suppabot).
  • Your widget key is correct (compare against Dashboard → Appearance → Embed Code).
  • Your site's Content Security Policy allows https://suppabot.com. See the Widget Integration developer guide for CSP configuration.
← PreviousQuick StartNext →Building Your Knowledge Base