Skip to content
Back to all support articles
Getting started widgetcontainerspatag manager

Advanced widget placement

The standard install puts a floating bubble in the corner of every page. These options cover the cases where that is not what you want.

Configuration options

window.MIKADO_CHATBOT_CONFIG accepts these keys:

KeyRequiredPurpose
domainyesThe Mikabot app URL. Pre-filled in your snippet.
store_idyesYour chatbot key from Settings → General settings.
languagenoStarting language. Must be one of en, nl, fr, de, es, it; anything else is ignored.
debugLoggingnotrue prints widget activity to the browser console.
containernoA CSS selector. When set, the chat renders inside that element instead of as a floating bubble.

Embed the chat inside the page

Use container when the chat should live in a section of the page — an advice page, a support page, a product configurator.

<div id="mikabot-inline" style="height: 600px;"></div>
<script>
window.MIKADO_CHATBOT_CONFIG = {
    "domain": "https://app.mikabot.chat",
    "store_id": "st_your_chatbot_key",
    "language": "en",
    "container": "#mikabot-inline"
};
</script>
<script src="https://app.mikabot.chat/js/mikabot-init.js"></script>

Rules that matter:

  • The container element must exist in the DOM before the loader runs. If the selector matches nothing, the widget renders nowhere and fails silently.
  • Give the container an explicit height. The chat fills its parent.
  • In container mode there is no toggle button — the chat is always open.

Tag managers

The snippet works in Google Tag Manager as a Custom HTML tag:

  1. Create a Custom HTML tag
  2. Paste both script tags, config first
  3. Trigger it on All Pages
  4. Leave Support document.write unchecked
  5. Publish, then verify with a private window

Do not also place the snippet in your theme. One installation only.

Single-page apps

The loader attaches on window load and the widget survives client-side navigation, so you only mount it once:

  • Next.js — use the Next.js snippet from Settings → Site info → Install widget. It renders both scripts with strategy="afterInteractive" from a client component in your root layout.
  • Other frameworks — mount the two script tags in your root layout or app shell, not in a route component. Mounting per route creates duplicates.

If your app changes language client-side, reload the page after the switch. language is read when the widget initialises.

When language is absent or not one of the six supported codes, the widget falls back to the lang attribute on <html>, then to the visitor’s browser language, then to English. Both language and lang must be a bare two-letter code — nl-BE is not matched.

Debug logging

Add "debugLogging": true to the config to print widget activity to the browser console. Useful when a store’s CSP or an ad blocker interferes.

It also keeps the widget visible when the bot reports itself offline, which normally hides it. Turn it off before going live.

Caching

The loader requests the main script with a version query string, so a new Mikabot release invalidates the cached script. The loader file itself — mikabot-init.js — is served without one, so a browser or proxy that caches it aggressively can hold on to an older version.

If your CDN caches HTML aggressively, it is your own page rather than the widget that needs purging after you paste the snippet.

Related articles

Contact us

Our support team is ready to give you fast, personal help when you need it.