BessieAI
Get started
Installation

BessieAI widget — installation guide

BessieAI is embedded using one JavaScript snippet. If your website can insert a <script> tag, the widget will work.

Works on: WordPress · Webflow/Wix/Squarespace · Shopify · GTM · Custom sites · Modern frameworks
Before you start
After you finish your setup, you should have already received your unique embed snippet (with your broker ID). If you don't have it, contact support.
Important
BessieAI only runs on the website you provided during setup. You can change your preferences at any time using the “Change settings” link in the website footer.
Universal embed snippet (copy this)

Replace YOUR_BROKER_ID with the value provided to you.

<script
  src="https://bessie.kekolabs.eu/bessie-widget.js"
  data-bessie-broker-id="YOUR_BROKER_ID"
  async>
</script>
Rules (read this)
  • Add the script only once (site-wide).
  • Place it near the end of the page (footer / before </body>).
  • Do not modify the script URL.
  • Do not wrap it in an <iframe>.
Choose your setup

Pick the section that matches how your website is built.

1) Plain HTML websites (static sites)

Custom-built sites, older websites, simple landing pages, FTP-based hosting.

Where to put it
Right before the closing </body> tag.
<body>
  <!-- page content -->

  <script
    src="https://bessie.kekolabs.eu/bessie-widget.js"
    data-bessie-broker-id="YOUR_BROKER_ID"
    async>
  </script>
</body>
2) WordPress

Recommended methods (choose one).

Option A - Plugin (easiest)
  • Install a plugin like "Insert Headers and Footers".
  • Paste the snippet into the Footer section.
Option B - Theme footer
  • Appearance → Theme Editor
  • Open footer.php
  • Paste snippet before </body>
3) Website builders (no-code platforms)

Webflow, Wix, Squarespace, Framer, Carrd, and similar builders.

Where to put it
  • Look for "Custom Code", "Code Injection", or "Footer Code".
  • Paste the snippet into the Footer / End of Body section.
This ensures the widget loads after the page content.
4) Google Tag Manager (GTM)

Useful when you prefer not to touch website code directly.

  1. Open Google Tag Manager
  2. Create a new tag → Custom HTML
  3. Paste the embed snippet
  4. Trigger: All Pages
  5. Publish the container
<script
  src="https://bessie.kekolabs.eu/bessie-widget.js"
  data-bessie-broker-id="YOUR_BROKER_ID"
  async>
</script>
5) Modern JavaScript frameworks (developers)

Next.js, React, Vue, Nuxt, Astro, Remix, and similar.

Goal
Ensure the widget script is loaded once, on every page, preferably near the end of the document (or after the app becomes interactive). Avoid injecting it per-route.
Next.js (recommended)
Add the Script in your global layout so it loads site-wide. This is the simplest "just works" approach.
  • App Router: put it in app/layout.tsx (near the bottom of the body).
  • Pages Router: put it in pages/_app.tsx or pages/_document.tsx.
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}

        <Script
          src="https://bessie.kekolabs.eu/bessie-widget.js"
          data-bessie-broker-id="YOUR_BROKER_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
React / Vue / SPA (generic)
Preferred: add the snippet to the main HTML template so it loads once for the entire app. Examples: public/index.html (CRA), index.html (Vite), or your framework's base template. Place it near </body>.
<!-- index.html / public/index.html -->
<body>
  <div id="root"></div>

  <script
    src="https://bessie.kekolabs.eu/bessie-widget.js"
    data-bessie-broker-id="YOUR_BROKER_ID"
    async>
  </script>
</body>
If you must inject programmatically
Do it once at app startup (e.g., in a root component). Guard against duplicates.
// Example: React useEffect (similar idea in Vue onMounted)
useEffect(() => {
  if (document.querySelector('script[src="https://bessie.kekolabs.eu/bessie-widget.js"]')) return;

  const s = document.createElement("script");
  s.src = "https://bessie.kekolabs.eu/bessie-widget.js";
  s.async = true;
  s.setAttribute("data-bessie-broker-id", "YOUR_BROKER_ID");
  document.body.appendChild(s);
}, []);
CSP reminder
If your site uses a strict Content Security Policy (CSP), allow scripts from https://bessie.kekolabs.eu.
6) Shopify

Common for operators with Shopify-based landing sites.

Where
  • Online Store → Themes → Edit code
  • Open theme.liquid
  • Paste snippet before </body>
Tip: if you're using multiple theme apps, make sure the snippet is only added once.
How to verify installation
  1. Open your website in a new tab.
  2. Open Developer Tools → Network.
  3. Refresh the page.
  4. Confirm bessie-widget.js loads with status 200.
  5. The widget should appear automatically.
Tip
If the script loads but the widget does not appear, it's usually a domain allowlist issue, a CSP restriction, or the script was added multiple times.
Troubleshooting (common issues)
1) Widget doesn't appear
  • Check Network: bessie-widget.js must be 200.
  • Ensure your domain is allowlisted for your broker account.
  • Disable ad blockers and reload.
  • Check Console for errors (CSP blocks, script errors).
2) Added via GTM but nothing happens
  • Make sure the trigger is All Pages.
  • Confirm the container was Published.
  • Use GTM Preview to confirm the tag fires.
3) Widget appears twice / behaves strangely
  • You likely added the script more than once (theme + plugin + GTM).
  • Remove duplicates and keep a single global install.
4) Strict security policy (CSP)
  • Allow scripts from https://bessie.kekolabs.eu.
  • If your CSP uses nonces/hashes, your dev may need to adjust policy rules.
Need help?
Send your website domain, broker ID, and a screenshot of the Network tab showing the widget script request.
Final guarantee

If your website can insert a <script> tag, BessieAI will work — regardless of platform or framework.

Back to snippet ↑