Aller au contenu
Retour à tous les articles d'assistance
Bien démarrer widgetconteneurspagestionnaire de balises

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éObligatoireRôle
domainouiL’URL de l’application Mikabot. Déjà renseignée dans votre code.
store_idouiVotre clé de chatbot, dans Settings → General settings.
languagenonLangue de départ. Doit valoir en, nl, fr, de, es ou it ; toute autre valeur est ignorée.
debugLoggingnontrue affiche l’activité du widget dans la console du navigateur.
containernonUn 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 :

  1. Créez une balise Custom HTML
  2. Collez les deux balises script, la configuration en premier
  3. Déclenchez sur All Pages
  4. Laissez Support document.write décoché
  5. 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

Contactez-nous

Notre équipe d'assistance est prête à vous fournir une aide rapide et personnelle lorsque vous en avez besoin.