Aller au contenu

Fonctionnement du widget

Ce que fait le widget dans le navigateur après le collage du code d’intégration. À utiliser pour piloter le widget depuis votre propre code, diagnostiquer un problème de chargement ou répondre à un audit de sécurité.

L’objet de configuration

Le code définit window.MIKADO_CHATBOT_CONFIG avant l’exécution du loader.

  • domain (obligatoire) — l’URL de l’application Mikabot que le widget appelle. Déjà renseignée dans votre code.
  • store_id (obligatoire) — votre clé de chatbot, préfixée st_. Envoyée à chaque requête.
  • language (facultatif) — force une langue. Omettez-la pour la détection automatique.
  • container (facultatif) — un sélecteur CSS. Affiche le chat dans cet élément au lieu d’une bulle flottante.
  • debugLogging (facultatif) — à true, affiche les étapes internes du widget dans la console. Cela garde aussi le widget visible lorsque le bot se déclare hors ligne : désactivez-le avant la mise en ligne.

Séquence de chargement

  1. Votre page se charge et définit MIKADO_CHATBOT_CONFIG.
  2. mikabot-init.js attend l’événement load de la fenêtre, puis injecte le script principal du widget. Rien n’est récupéré avant que votre propre page ait fini de charger.
  3. Le loader vérifie d’abord si mikabot-script.js est déjà présent et ne fait rien si c’est le cas : un code collé deux fois ne charge donc pas le widget en double.
  4. Le script principal ajoute la feuille de style du widget depuis votre domaine Mikabot, et une feuille de style d’icônes depuis cdnjs.cloudflare.com.
  5. Les informations de la boutique et vos réponses rédigées sont récupérées pour la langue détectée. Si le chatbot est inactif, a dépassé sa limite mensuelle de messages, ou si Mikabot est temporairement indisponible, rien n’est affiché du tout.
  6. La bulle, ou votre conteneur, apparaît.

Le script principal est demandé avec un paramètre de version : une nouvelle version de Mikabot invalide donc la copie mise en cache. Le loader lui-même est servi sans paramètre.

Détection de la langue

La première correspondance l’emporte :

  1. language dans MIKADO_CHATBOT_CONFIG
  2. L’attribut lang sur <html>
  3. La langue du navigateur, via navigator.language
  4. L’anglais

Les valeurs acceptées sont en, nl, fr, de, es et it. Toute autre valeur — y compris un code régional comme en-US ou nl-BE — est ignorée, et la détection passe à l’étape suivante.

Ce que le widget expose

Une fois initialisé, ces variables globales sont disponibles :

  • window.chatbot — l’instance du widget, utile en console pour inspecter son état
  • window.trackProductClick(externalId, clickType, event) — enregistre un clic sur un produit que vous affichez vous-même
  • window.askAboutProduct(productId, productTitle, externalId) — ouvre le chat avec une question sur un produit précis

Appelez-les depuis une action utilisateur, par exemple un bouton dans votre propre fiche produit, et non depuis un script exécuté avant l’existence du widget.

Ce qui est conservé dans le navigateur

Le widget utilise localStorage et ne dépose aucun cookie :

  • mikabot_session_id — la session qui regroupe les messages d’un visiteur en une conversation
  • mikado_chat_messages — la conversation visible, conservée lors d’un rechargement. Effacée après 24 heures.
  • chatbot-language — la dernière langue utilisée par le visiteur
  • mikabot_popup_tracking — le nombre d’affichages de la popup d’attention, qui la plafonne à deux fois par 24 heures
  • chatbot-debug-logging — si la journalisation de débogage est activée pour ce navigateur

Démarrer une nouvelle conversation efface l’identifiant de session et les messages stockés. La langue, le compteur de popup et l’indicateur de débogage subsistent.

Exigences d’hébergement

  • Le widget doit pouvoir joindre votre domain Mikabot pour les scripts, les styles et les appels API.
  • Avec une Content-Security-Policy, autorisez cet hôte dans script-src, style-src et connect-src, et cdnjs.cloudflare.com dans style-src et font-src.
  • Le nom d’hôte de la page doit correspondre exactement au champ Domain du chatbot. La comparaison ne porte que sur le nom d’hôte et le port : www.votreboutique.com et votreboutique.com sont deux valeurs différentes. Un écart est la cause la plus fréquente d’un widget qui se charge mais ne répond jamais.

À voir aussi