Placement avancé du widget
L’installation standard place une bulle flottante dans le coin de chaque page. Ces options couvrent les cas où ce n’est pas ce que vous voulez.
Options de configuration
window.MIKADO_CHATBOT_CONFIG accepte ces clés :
| Clé | Obligatoire | Rôle |
|---|---|---|
domain | oui | L’URL de l’application Mikabot. Déjà renseignée dans votre code. |
store_id | oui | Votre clé de chatbot, dans Settings → General settings. |
language | non | Langue de départ. Doit valoir en, nl, fr, de, es ou it ; toute autre valeur est ignorée. |
debugLogging | non | true affiche l’activité du widget dans la console du navigateur. |
container | non | Un sélecteur CSS. S’il est défini, le chat s’affiche dans cet élément au lieu d’une bulle flottante. |
Intégrer le chat dans la page
Utilisez container lorsque le chat doit vivre dans une section de la page — page conseil, page support, configurateur produit.
<div id="mikabot-inline" style="height: 600px;"></div>
<script>
window.MIKADO_CHATBOT_CONFIG = {
"domain": "https://app.mikabot.chat",
"store_id": "st_votre_cle_chatbot",
"language": "fr",
"container": "#mikabot-inline"
};
</script>
<script src="https://app.mikabot.chat/js/mikabot-init.js"></script>
Règles importantes :
- L’élément conteneur doit exister dans le DOM avant l’exécution du loader. Si le sélecteur ne correspond à rien, le widget ne s’affiche nulle part et échoue silencieusement.
- Donnez une hauteur explicite au conteneur. Le chat remplit son parent.
- En mode conteneur, il n’y a pas de bouton d’ouverture — le chat est toujours ouvert.
Gestionnaires de balises
Le code fonctionne dans Google Tag Manager comme balise HTML personnalisée :
- Créez une balise Custom HTML
- Collez les deux balises script, la configuration en premier
- Déclenchez sur All Pages
- Laissez Support document.write décoché
- Publiez, puis vérifiez en navigation privée
Ne placez pas aussi le code dans votre thème. Une seule installation.
Applications monopage
Le loader s’accroche à window load et le widget survit à la navigation côté client : vous ne le montez qu’une fois.
- Next.js — utilisez le code Next.js de Settings → Site info → Install widget. Il rend les deux scripts avec
strategy="afterInteractive"depuis un composant client dans votre layout racine. - Autres frameworks — montez les deux balises script dans votre layout racine ou votre app shell, pas dans un composant de route. Le montage par route crée des doublons.
Si votre application change de langue côté client, rechargez la page après le changement. language est lue à l’initialisation du widget.
Si language est absente ou ne fait pas partie des six codes pris en charge, le widget se rabat sur l’attribut lang de <html>, puis sur la langue du navigateur du visiteur, puis sur l’anglais. language comme lang doivent être un code à deux lettres seul — nl-BE n’est pas reconnu.
Journalisation de débogage
Ajoutez "debugLogging": true à la configuration pour écrire l’activité du widget dans la console du navigateur. Utile lorsqu’une CSP ou un bloqueur de publicité interfère.
Elle garde aussi le widget visible lorsque le bot se déclare hors ligne, ce qui le masque normalement. Désactivez-la avant la mise en ligne.
Mise en cache
Le loader demande le script principal avec un paramètre de version : une nouvelle version de Mikabot invalide donc le script mis en cache. Le fichier du loader lui-même — mikabot-init.js — est servi sans paramètre : un navigateur ou un proxy qui le met en cache de façon agressive peut conserver une version plus ancienne.
Si votre CDN met le HTML en cache de façon agressive, c’est votre propre page qu’il faut purger après avoir collé le code, pas le widget.
Voir aussi
Articles associés
Configuration du compte
Créez votre compte Mikabot, vérifiez votre e-mail et prenez vos repères dans le tableau de bord.
Créer votre premier chatbot
Parcourez l'assistant en cinq étapes et obtenez un chatbot fonctionnel en quelques minutes.
Installer le widget
Copiez votre code d'intégration et mettez le widget de chat Mikabot en ligne sur votre site.
Contactez-nous
Notre équipe d'assistance est prête à vous fournir une aide rapide et personnelle lorsque vous en avez besoin.