Aller au contenu
Mikabot

Fonctionnement du widget

Cette page décrit ce que fait le widget dans le navigateur, une fois le code d’intégration collé. Utilisez-la pour piloter le widget depuis votre propre code, diagnostiquer un problème de chargement ou répondre à un audit de sécurité.

Objet de configuration

Le code d’intégration définit window.MIKADO_CHATBOT_CONFIG avant l’exécution du chargeur.

  • domain (obligatoire) — l’URL de l’application Mikabot depuis laquelle le widget se charge et qu’il appelle. Déjà remplie dans votre code.
  • store_id (obligatoire) — la clé de votre chatbot, préfixée par st_. Envoyée à chaque requête.
  • language (facultatif) — force une langue. Omettez-la pour la détection automatique.
  • container (facultatif) — affiche le chat dans un élément de votre page au lieu d’une bulle flottante.
  • debugLogging (facultatif) — mettez true pour afficher les étapes internes du widget dans la console pendant un diagnostic.

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 depuis le domain configuré. Rien n’est téléchargé avant la fin du chargement de votre page.
  3. Le script principal ajoute la feuille de style du widget depuis ce même domaine, et une feuille de style d’icônes depuis cdnjs.cloudflare.com.
  4. Les informations de la boutique et vos réponses rédigées sont récupérées dans la langue détectée.
  5. La bulle, ou votre conteneur, s’affiche.

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 prises en charge sont en, nl, fr, de, es et it. Toute autre valeur 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, pratique dans la console pour vérifier 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 sur une question à propos d’un produit précis

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

Ce qui est stocké dans le navigateur

Le widget utilise localStorage, pas de cookies :

  • 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 de page. Elle est effacée après 24 heures.
  • chatbot-language — la dernière langue utilisée par le visiteur

Démarrer une nouvelle conversation efface ces valeurs.

Prérequis 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 autorisez cdnjs.cloudflare.com dans style-src et font-src.
  • Le nom d’hôte de la page doit correspondre au champ Domain configuré sur le chatbot. Une incohérence est la cause la plus fréquente d’un widget qui s’affiche mais ne répond jamais.

À lire ensuite