Déclencher le chat depuis votre UI

Dispatchez un custom event humind-open-chat sur window pour ouvrir l'overlay de chat depuis n'importe quel élément de votre page : un bouton « Besoin d'aide ? » dans le checkout, un CTA sur une carte produit, une tuile du help center, partout où un visiteur peut vouloir démarrer une conversation sans passer par le point d'entrée flottant.

Cette page s'applique à tous les modes d'intégration :

• Marchands Shopify qui utilisent l'app Humind — le chat est auto-injecté par la theme extension, donc le listener humind-open-chat est déjà sur window à l'échelle du site. Il suffit de dispatcher l'event.
• Marchands non-Shopify qui ont embarqué <humind-widget> manuellement — même event, même listener.
• Setups Shopify hybrides (backend Shopify, storefront custom) où <humind-widget> est embarqué à la main — même contrat.

Quand l'utiliser

Le point d'entrée flottant par défaut (bouton en bas à droite + messages proactifs) est ce qui est livré avec <humind-widget> d'origine, et c'est suffisant pour la plupart des storefronts. Utilisez humind-open-chat quand vous voulez :

• Câbler votre propre CTA quelque part sur la page (un bouton « Parler à un expert », un lien d'aide à la taille, une tuile question-livraison).
• Ouvrir le chat pré-rempli avec une question spécifique.
• Ouvrir le chat avec un produit en contexte pour que l'IA ancre ses réponses sur ce produit.
• Router des visiteurs qui cliquent sur quelque chose d'orienté intention (ex. une tuile « Cadeau pour papa ») vers une conversation ciblée.

Prérequis

<humind-widget> doit déjà être monté sur la page. Si l'overlay n'est pas dans le DOM, l'event part dans le vide (aucun listener n'est enregistré). Voir Installer le chat.

Contrat de l'event

window.dispatchEvent(new CustomEvent('humind-open-chat', {
  detail: {
    message: 'J\'ai besoin d\'aide pour choisir une taille.'
  }
}))

Champs de detail

Champ	Type	Rôle
message	string	Optionnel. Le message à envoyer comme si le visiteur l'avait tapé. Le chat s'ouvre et démarre immédiatement une réponse. Omettez pour juste ouvrir l'overlay au repos.
productId	string	Optionnel. Un GID Shopify (gid://shopify/Product/12345) ou votre ID produit interne Humind. Charge une barre de contexte produit en haut du chat et permet à l'IA d'ancrer ses réponses sur ce produit spécifique.

Exemples

Ouvrir avec un message pré-rempli

<button id="size-help">Besoin d'aide pour la taille ?</button>

<script>
  document.getElementById('size-help').addEventListener('click', () => {
    window.dispatchEvent(new CustomEvent('humind-open-chat', {
      detail: { message: 'Tu peux m\'aider à choisir une taille ?' }
    }))
  })
</script>

Ouvrir avec un contexte produit

Sur une carte produit ou un listing, passez l'ID produit pour que la conversation soit ancrée sur ce produit.

<article data-product-id="gid://shopify/Product/12345">
  <button class="ask-about-this">Une question sur ce produit</button>
</article>

<script>
  document.querySelectorAll('.ask-about-this').forEach(btn => {
    btn.addEventListener('click', e => {
      const card = e.target.closest('[data-product-id]')
      window.dispatchEvent(new CustomEvent('humind-open-chat', {
        detail: {
          message: 'Parle-moi de ce produit.',
          productId: card.dataset.productId
        }
      }))
    })
  })
</script>

Ouvrir au repos (sans message pré-rempli)

window.dispatchEvent(new CustomEvent('humind-open-chat'))

Fermer le chat

Dispatchez un event humind-close-chat pour fermer l'overlay par programmation. Pratique si vous avez câblé votre propre bouton « fermer » quelque part sur la page, ou si vous voulez que le chat se ferme tout seul après qu'un visiteur a terminé une action ailleurs sur le site.

window.dispatchEvent(new CustomEvent('humind-close-chat'))

Aucun payload detail n'est lu — l'event est un signal fire-and-forget. Si l'overlay est déjà fermé, l'event est un no-op.

Pièges

• Utilisez window.dispatchEvent, pas document.dispatchEvent. Le listener est enregistré sur window. Dispatcher sur document ne fait rien. Voir Dépannage → humind-open-chat se déclenche mais l'overlay l'ignore.
• Ne dupliquez pas <humind-widget> sur la page. Un seul overlay doit exister. Les autres widgets (<humind-gift-finder>, <humind-product-questions>, <humind-quiz>) dispatchent déjà humind-open-chat quand un visiteur interagit avec eux, et ils attendent une seule instance de <humind-widget> pour attraper l'event.
• Le service de chat doit être joignable. Si le backend ou le CDN embed.thehumind.com est down, l'overlay montre un état fallback « indisponible ». Votre CTA part quand même proprement ; rien ne casse côté site.

Tracker les ouvertures de chat dans vos analytics

window est la source de vérité pour les events d'ouverture de chat. Si vous voulez les faire remonter dans GA4, Segment, Mixpanel ou tout autre pipeline analytics, ajoutez votre propre listener :

window.addEventListener('humind-open-chat', e => {
  analytics.track('chat_opened', {
    productId: e.detail?.productId,
    hasPrefilledMessage: Boolean(e.detail?.message)
  })
})

Ça capte aussi bien vos propres CTA que le point d'entrée flottant — tous les chemins qui ouvrent le chat passent par cet event.

Autres events que le chat écoute

L'overlay écoute aussi deux events émis par d'autres widgets Humind. Vous n'avez pas besoin de les dispatcher vous-même — ils sont documentés ici au cas où vous les verriez dans les devtools ou si vous voulez les écouter dans vos propres analytics.

• humind-quiz-completed — dispatché par <humind-quiz> quand un visiteur termine un quiz. L'overlay de chat l'écoute et peut s'en servir pour affiner le contexte. Vous n'avez pas besoin de l'écouter ni de le dispatcher.
• humind-continue-thread — dispatché par <humind-quiz> quand un visiteur clique sur « Continuer dans le chat » à la fin d'un quiz. Passe le contexte du quiz au chat.

Les deux sont émis par le widget quiz, pas dispatchés par les marchands. Si vous avez besoin d'ouvrir le chat depuis votre propre code, utilisez humind-open-chat.