Widget configuration

The widget reads a single global object, window.ChatbotConfig, which must be defined before the widget script loads.

<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>

Fields

Field	Required	Description
chatbotId	Yes	Which chatbot to load
apiKey	Yes	Your widget key
apiUrl	Recommended	API base URL, including the /api suffix

chatbotId

Found in the dashboard, and pre-filled in the snippet the dashboard generates.

apiKey

The full key from key generation — the data.key value, not keyPrefix.

The key appears in your page source. That is expected: it is a public, domain-restricted, revocable credential. Why it is safe.

apiUrl

Must include the /api suffix:

https://apimesh.byteleaps.tech/api

The widget derives other origins from this value. Static assets — the widget bundle and uploaded logos — live at the server root rather than under /api, and the widget strips the suffix to resolve them. Getting this wrong breaks logo loading in a way that looks like a styling bug.

If omitted, the widget falls back to a development default that will not work in production. Always set it explicitly.

Validation

Both chatbotId and apiKey are required. If either is missing, the widget logs to the console and does nothing:

SiteMesh Widget: ChatbotConfig missing chatbotId or apiKey

No bubble, no error on the page, no network requests. Seeing this message means a field was left as a placeholder or an environment variable did not resolve.

Load order

ChatbotConfig must exist before widget.js executes. The standard snippet guarantees this by defining the object and only then injecting the script.

If you split them, keep that order. Defining the config after the script has run does not work.

Configuring appearance

Colours, logo, welcome message and quick prompts are not set here. They live on the chatbot and are fetched from the config endpoint at load time.

Change them in the dashboard, or with PATCH /chatbots/:id. Changes appear on the next page load — no redeployment of your site needed.

This split is deliberate: your site holds only identifiers, so rebranding never requires touching your website's code.

Environment-specific values

Keep the values in environment variables so staging and production use different keys:

window.ChatbotConfig = {
  chatbotId: process.env.NEXT_PUBLIC_SITEMESH_CHATBOT_ID,
  apiKey: process.env.NEXT_PUBLIC_SITEMESH_WIDGET_KEY,
  apiUrl: process.env.NEXT_PUBLIC_SITEMESH_API_URL,
};

These end up in the client bundle, which is fine and unavoidable.

Give each environment its own key with its own allowed domains, so a staging key never works on production and revoking one does not disturb the other.

→ React and Next.js

Loading it twice

Loading the widget script twice produces two chat bubbles. Guard against it when injecting from a framework component:

if (document.getElementById('sitemesh-widget')) return;

→ Troubleshooting