Skip to main content

Plain HTML

The baseline case, and the one everything else is a variation of.

Adding the snippet​

Paste it immediately before the closing </body> tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>

  <h1>Welcome</h1>
  <p>Your page content.</p>

  <!-- SiteMesh chat widget -->
  <script>
    (function() {
      window.ChatbotConfig = {
        chatbotId: "YOUR_CHATBOT_ID",
        apiKey: "YOUR_WIDGET_KEY",
        apiUrl: "https://apimesh.byteleaps.tech/api"
      };
      var s = document.createElement('script');
      s.src = 'https://apimesh.byteleaps.tech/widget.js';
      s.async = true;
      document.head.appendChild(s);
    })();
  </script>

</body>
</html>

Repeat on every page where the bubble should appear.

Multi-page sites​

Pasting the same block into fifty files is a maintenance problem — change your key and you have fifty edits.

If you have server-side includes, put the snippet in your shared footer partial:

footer.php
<!-- SiteMesh chat widget -->
<script>
  (function() { /* ... */ })();
</script>
</body>
</html>
any-page.php
<?php include 'footer.php'; ?>

If you use a static site generator — Jekyll, Hugo, Eleventy, Pelican — put it in the base layout template. One edit, every page.

If you have neither, put the snippet in its own file and load that:

<script src="/js/sitemesh.js"></script>
/js/sitemesh.js
(function() {
  window.ChatbotConfig = {
    chatbotId: "YOUR_CHATBOT_ID",
    apiKey: "YOUR_WIDGET_KEY",
    apiUrl: "https://apimesh.byteleaps.tech/api"
  };
  var s = document.createElement('script');
  s.src = 'https://apimesh.byteleaps.tech/widget.js';
  s.async = true;
  document.head.appendChild(s);
})();

Now the key lives in one file.

Testing locally​

Opening an HTML file directly with file:// will not work — the widget makes network requests that browsers block from file origins.

Serve it over HTTP instead:

# Python
python3 -m http.server 8000

# Node
npx serve

Then visit http://localhost:8000.

Because localhost is a different hostname from your production domain, add it to your key's allowed domains while testing — or better, use a separate key for local development so your production key never allows localhost.

Content Security Policy​

If your pages send a Content-Security-Policy header, allow the widget's script source and API origin. A blocked script shows up as a CSP violation in the browser console.

It is not showing up​

  1. View source on the live page and search for ChatbotConfig. If it is not there, the file you edited is not the file being served.
  2. Hard-refresh — Ctrl+Shift+R, or Cmd+Shift+R on a Mac.
  3. Check the console for SiteMesh Widget: ChatbotConfig missing chatbotId or apiKey, which means a field was left as a placeholder.
  4. Check you are not on file://.

→ Widget troubleshooting