Installing the Widget

Installing the Widget

The Corebee chat widget is a lightweight JavaScript snippet that adds AI-powered chat to your website.

Getting Your Snippet

1. Go to Settings > Widget in your Corebee dashboard
2. Copy your install snippet — it looks like this (your dashboard fills in your real website token):

<script>
  window.corebeeSettings = { website_token: "YOUR_WEBSITE_TOKEN" };
  (function () {
    var s = document.createElement("script");
    s.src = "https://corebee.ai/widget-sdk.min.js";
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

Installation Methods

HTML (any website) Paste the snippet before the closing </body> tag on every page where you want the widget.

React / Next.js Add the Script component in your layout:

import Script from "next/script";

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script id="corebee-settings" strategy="lazyOnload">
        {`window.corebeeSettings = { website_token: "YOUR_WEBSITE_TOKEN" };`}
      </Script>
      <Script
        src="https://corebee.ai/widget-sdk.min.js"
        strategy="lazyOnload"
      />
    </>
  );
}

WordPress Paste the snippet in your theme's footer via Appearance > Theme Editor (or with any header/footer-scripts plugin).

Shopify Add the snippet to your theme's theme.liquid file before </body>.

Customizing Appearance

In Settings > Widget > Appearance:

• Position: Bottom-right (default) or bottom-left
• Primary color: Match your brand colors
• Welcome message: The first thing customers see
• Launcher icon: Default bubble or custom icon

Testing Your Installation

1. Open your website in an incognito window
2. Look for the chat bubble in the bottom corner
3. Send a test message
4. Verify the conversation appears in your Corebee dashboard

Troubleshooting

• Widget not showing? Check for ad blockers or content security policy restrictions
• Slow to load? The async attribute ensures it does not block page rendering
• Wrong colors? Clear your browser cache after making changes

Next up: Importing your knowledge base to power the AI.