BessieAI
Get started
Installation

BessieAI widget — installation guide

BessieAI is installed using one JavaScript snippet. It captures a complete charter request (routing, dates, passengers, contact) before delivery to your team.

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.

Install once site-wide (recommended: footer / before </body>).

<script
  src="https://bessie.kekolabs.eu/bessie-widget.js"
  data-bessie-broker-id="YOUR_BROKER_ID"
  async>
</script>
What loads on your site
  • bessie-widget.js and bessie-widget.css (from bessie.kekolabs.eu)
  • Flatpickr date/time picker (from cdn.jsdelivr.net)
  • Firebase web SDK (from www.gstatic.com)
  • Outbound requests to n8n.kekolabs.eu (to submit the structured request)
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>.
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. Confirm bessie-widget.css loads with status 200.
  6. 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 blocking required domains, or the snippet was added multiple times.
Support

If anything doesn’t work, we’ll help you get it live.

Email support
Email us at support@bessie.kekolabs.eu
Include:
  • Your website domain
  • Your broker ID (or the account email you signed up with)
  • A screenshot of the Network tab showing bessie-widget.js and bessie-widget.css
  • Any Console error (CSP errors especially)
Choose your setup
Open the section that matches how your website is built.
Show
1) Plain HTML websites (static sites)
Custom-built sites, older websites, simple landing pages, FTP-based hosting.
Show
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).
Show
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>

Avoid adding the snippet more than once (e.g., plugin + theme + GTM). Use one global install method.

3) Website builders (no-code platforms)
Webflow, Wix, Squarespace, Framer, Carrd, and similar builders.
Show
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.
Show
  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

Important: if you install via GTM, do not also add the snippet in your theme or builder. One install only.

<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.
Show
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.
Show
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.
Content Security Policy (CSP)
Show

If your website uses a strict CSP, you must allow BessieAI’s required domains.

Allow these domains
script-src
  • https://bessie.kekolabs.eu
  • https://www.gstatic.com
  • https://cdn.jsdelivr.net
style-src
  • https://bessie.kekolabs.eu
  • https://cdn.jsdelivr.net
connect-src
  • https://n8n.kekolabs.eu
If you still see CSP errors
Send us a screenshot of the Console error and your CSP header/policy, and we’ll tell you exactly what to add.
Troubleshooting (common issues)
Show
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 bessie-widget.js and bessie-widget.css.
Final guarantee

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

Back to snippet ↑