Geavanceerde widgetplaatsing
De standaardinstallatie zet een zwevende bel in de hoek van elke pagina. Deze opties dekken de gevallen waarin je dat niet wilt.
Configuratieopties
window.MIKADO_CHATBOT_CONFIG aanvaardt vier sleutels:
| Sleutel | Verplicht | Doel |
|---|---|---|
domain | ja | De URL van de Mikabot-app. Staat al ingevuld in je code. |
store_id | ja | Je chatbotsleutel uit Settings → Chatbot settings. |
language | nee | Starttaal. Standaard en, met terugval op paginadetectie. |
container | nee | Een CSS-selector. Is die gezet, dan rendert de chat binnen dat element in plaats van als zwevende bel. |
De chat in de pagina inbouwen
Gebruik container wanneer de chat in een deel van de pagina hoort — een adviespagina, een supportpagina, een productconfigurator.
<div id="mikabot-inline" style="height: 600px;"></div>
<script>
window.MIKADO_CHATBOT_CONFIG = {
"domain": "https://mikabot.studio-mikado.be",
"store_id": "st_jouw_chatbotsleutel",
"language": "nl",
"container": "#mikabot-inline"
};
</script>
<script src="https://mikabot.studio-mikado.be/js/mikabot-init.js"></script>Regels die ertoe doen:
- Het containerelement moet in de DOM staan voor de loader draait. Matcht de selector niets, dan rendert de widget helemaal niet.
- Geef de container een expliciete hoogte. De chat vult zijn ouder.
- In containermodus is er geen knop om te openen — de chat staat altijd open.
Tagmanagers
De code werkt in Google Tag Manager als Custom HTML-tag:
- Maak een Custom HTML-tag aan
- Plak beide scripttags, config eerst
- Trigger op All Pages
- Laat Support document.write uitgevinkt
- Publiceer en controleer in een privévenster
Zet de code dan niet ook in je thema. Eén installatie volstaat.
Single-page apps
De loader hangt zich op aan window load en de widget overleeft client-side navigatie, dus je mount hem één keer:
- Next.js — gebruik de Next.js-code uit Settings → Site info → Install widget. Die rendert beide scripts met
strategy="afterInteractive"vanuit een client component in je root layout. - Andere frameworks — mount de twee scripttags in je root layout of app shell, niet in een routecomponent. Per route mounten maakt duplicaten.
Wisselt je app client-side van taal, herlaad dan de pagina na de wissel. language wordt gelezen bij het initialiseren van de widget.
Debug logging
Voeg "debugLogging": true toe aan de config om widgetactiviteit naar de browserconsole te schrijven. Handig als een CSP of adblocker in de weg zit.
Zet het uit voor je live gaat — het is luidruchtig en zichtbaar voor iedereen die de console opent.
Caching
De loader vraagt het hoofdscript op met een versieparameter, dus een nieuwe Mikabot-release maakt zichzelf ongeldig. Cachet je CDN de HTML agressief, dan moet je je eigen pagina purgen na het plakken van de code — niet de widget.
Zie ook
Gerelateerde artikelen
Account instellen
Maak je Mikabot-account aan, verifieer je e-mailadres en leer het dashboard kennen.
Je eerste chatbot aanmaken
Doorloop de wizard van vijf stappen en zet in enkele minuten een werkende chatbot op.
Widget installeren
Kopieer je embedcode en zet de Mikabot-chatwidget live op je website.
Neem contact op
Ons supportteam staat klaar om je snel en persoonlijk te helpen wanneer je hulp nodig hebt.