Skip to content

Widget runtime

What the widget does in the browser after you paste the embed snippet. Use it to drive the widget from your own code, debug a load problem, or answer questions in a security review.

Configuration object

The snippet sets window.MIKADO_CHATBOT_CONFIG before the loader runs.

  • domain (required) — the Mikabot app URL the widget calls. Pre-filled in your snippet.
  • store_id (required) — your chatbot key, prefixed st_. Sent with every request.
  • language (optional) — forces a language. Omit it to auto-detect.
  • container (optional) — a CSS selector. Renders the chat inside that element instead of as a floating bubble.
  • debugLogging (optional) — set to true to print the widget’s internal steps to the console. It also keeps the widget visible when the bot reports itself offline, so turn it off before going live.

Load sequence

  1. Your page loads and defines MIKADO_CHATBOT_CONFIG.
  2. mikabot-init.js waits for the window load event, then injects the main widget script. Nothing is fetched before your own page has finished loading.
  3. The loader first checks whether mikabot-script.js is already on the page and does nothing if it is, so a snippet pasted twice does not load the widget twice.
  4. The main script adds the widget stylesheet from your Mikabot domain, and an icon stylesheet from cdnjs.cloudflare.com.
  5. Store details and your written answers are fetched for the detected language. If the chatbot is inactive, over its monthly message limit, or Mikabot is temporarily unavailable, nothing is rendered at all.
  6. The bubble, or your container, appears.

The main script is requested with a version query string, so a new Mikabot release invalidates the cached copy. The loader itself is served without one.

Language detection

The first match wins:

  1. language in MIKADO_CHATBOT_CONFIG
  2. The lang attribute on <html>
  3. The browser language, from navigator.language
  4. English

Supported values are en, nl, fr, de, es, and it. Anything else — including a regional code such as en-US or nl-BE — is ignored, and detection moves to the next step.

What the widget exposes

Once initialised, these globals are available:

  • window.chatbot — the widget instance, useful in the console for checking state
  • window.trackProductClick(externalId, clickType, event) — records a click on a product you render yourself
  • window.askAboutProduct(productId, productTitle, externalId) — opens the chat with a question about a specific product

Call them from a user action, such as a button in your own product card, not from a script that runs before the widget exists.

What is stored in the browser

The widget uses localStorage and sets no cookies:

  • mikabot_session_id — the session that groups a visitor’s messages into one conversation
  • mikado_chat_messages — the visible conversation, so it survives a page reload. Cleared after 24 hours.
  • chatbot-language — the language the visitor last used
  • mikabot_popup_tracking — how often the attention popup has been shown, which caps it at twice per 24 hours
  • chatbot-debug-logging — whether debug output is on for this browser

Starting a new conversation clears the session ID and the stored messages. The language, popup counter, and debug flag survive.

Hosting requirements

  • The widget must reach your Mikabot domain for scripts, styles, and API calls.
  • With a Content-Security-Policy, allow that host in script-src, style-src, and connect-src, and cdnjs.cloudflare.com in style-src and font-src.
  • The hostname of the page must match the Domain configured on the chatbot, exactly. The comparison is on hostname and port only, so www.yourshop.com and yourshop.com are different values. A mismatch is the most common cause of a widget that loads but never answers.