Dépannage du widget de chat qui n’apparaît pas sur les pages de site web

Lorsque vous configurez un chat en direct ou un chatbot basé sur des règles, il se peut que le widget de chat n’apparaisse pas sur les pages de site web attendues ou pour les contacts prévus. Cet article décrit les causes fréquentes et fournit des étapes de dépannage pour vous aider à résoudre le problème. 

Assurez-vous que le code de suivi est installé

Si vous ajoutez un chatflow à un site web hébergé en dehors de HubSpot, vous devez installer le code de suivi HubSpot sur vos pages. Vous pouvez accéder à votre code de suivi dans vos paramètres :

Veuillez noter: si vous avez déjà le code de suivi HubSpot installé sur votre site web, ou si votre site web est hébergé sur HubSpot, vous ne devez pas installer ce bloc de code séparément.

1. Dans votre compte HubSpot, cliquez sur l'icône Paramètres dans la barre de navigation principale.
2. Dans le menu latéral de gauche, accédez à Code & de suivi des analytics > .
3. Pour copier le code et l'ajouter à votre site web, cliquez sur Copier. Ou cliquez sur E-mail au développeur et saisissez une adresse e-mail pour envoyer le code à votre développeur web ou à votre ressource informatique.

Si le code de suivi a été ajouté manuellement, assurez-vous que le bloc de texte prédéfini exact a été copié sans modification et installé dans l’en-tête de votre page à l’endroit prévu. Si vous utilisez un gestionnaire de balises, vérifiez que la balise HubSpot est publiée et se déclenche sur la page que vous testez.

Vérifier la présence de bloqueurs de scripts ou de restrictions en matière de consentement aux cookies

Si le widget de chat ne s’affiche toujours pas, vérifiez si une bannière de consentement aux cookies, un bloqueur de scripts ou un autre JavaScript tiers ou personnalisé empêche le chargement du script de suivi de HubSpot. Certaines plateformes de gestion du consentement bloquent les scripts HubSpot jusqu’à ce qu’un visiteur accepte les cookies, ce qui peut empêcher l’affichage du widget de chat.

Travaillez avec votre développeur pour vous assurer que les scripts HubSpot sont autorisés à s’exécuter le cas échéant et qu’aucunoutil tiers ou extension de navigateur n’empêche  le chargement des scripts HubSpot . 

Vérifiez que le code de suivi HubSpot et les scripts du widget de chat se chargent correctement 

Une fois le code de suivi installé, vérifiez qu’il se charge correctement sur votre page.

Le code de suivi doit apparaître dans la source de la page ou dans le DOM avec l’attribut id hs-script-loader.

HubSpot utilise des attributs de script id spécifiques pour éviter qu’un même script ne soit chargé plusieurs fois. N’utilisez pas les ID de script HubSpot ailleurs sur votre site web. Si un autre élément de page utilise déjà le même ID, HubSpot peut déterminer que le script est déjà présent et ne pas le recharger.

Pour confirmer le chargement des scripts du widget de chat :

1. Ouvrez votre site web dans un navigateur.
2. Ouvrez les outils de développeur, puis vérifiez l’onglet Network .
3. Recherchez . conversations-embed.js Ce fichier est chargé par le code de suivi HubSpot et doit provenir d’un domaine contenant . usemessages
4. Vérifiez que le script possède l’attribut id hubspot-messages-loader et inclut les attributs de données requis :
• data-hsjs-portal
• data-hsjs-hublet
• data-hsjs-env
5. Recherchez . visitor.js Ce script charge l’interface utilisateur du widget de chat et est inséré par conversations-embed.js.

Si conversations-embed.js le chargement échoue ou visitor.js non, recherchez dans la console du navigateur les erreurs JavaScript, les erreurs de politique de sécurité du contenu ou d’autres erreurs de page susceptibles d’empêcher l’exécution des scripts HubSpot.

Remarque : Si aucun chatflow n’est activé dans le compte, il se peut que le code de suivi n’inclue pas le code qui charge conversations-embed.js. Après l’activation d’un chatflow, il peut y avoir une mise en cache avant que le code de suivi mis à jour ne commence à charger le script du widget de chat.

Si votre site applique une politique de sécurité du contenu (CSP), assurez-vous que les domaines de script HubSpot sont autorisés. Les erreurs liées à la plateforme client s’affichent généralement dans la console du navigateur et indiquent quel script a été bloqué et pourquoi. Découvrez-en davantage sur les directives et les domaines requis dans les paramètres de la politique de sécurité du contenu de HubSpot.

Activer le chatflow

Pour confirmer que le chatflow est activé :

1. Depuis votre compte HubSpot, accédez à Service client > Chatflows.
2. À côté du chatflow inactif, dans la colonne Statut , cliquez pour activer le bouton de statut.

Vider le cache de votre navigateur

Si le chatflow n’apparaît pas sur votre site web après son activation, vérifiez que vous testez sur le bon domaine ou environnement en ligne. Si vous avez récemment apporté des modifications à votre site, patientez quelques minutes ou actualisez la page.

Ensuite, essayez de charger votre site web dans une fenêtre de navigation privée. Si le chatflow apparaît en navigation privée, videz le cache de votre navigateur et les cookies pour afficher le chatflow dans une fenêtre de navigation non privée.

Passez en revue vos règles de ciblage et d’exclusion

Lors de la création d'un chatflow, vous pouvez spécifier les pages sur lesquelles le widget de chat doit apparaître dans les paramètres de ciblage. Vous pouvez également cibler en fonction des informations connues sur le visiteur. Vérifiez vos règles de ciblage dans l’onglet Cible du chatflow pour vous assurer que les critères correspondent à ce que vous vous attendez à voir sur les pages de votre site web.

Indiquer les bons domaine et sous-domaine

Commencez par vérifier que la page où vous souhaitez voir le chatflow est incluse dans les règles de ciblage. Si vous souhaitez que le chatflow apparaisse sur les pages d'un domaine spécifique, veillez à saisir le domaine approprié. Par exemple, si votre règle de ciblage est Website | contains | www.coffeeshop.com, le flux de discussion apparaîtra sur toute page hébergée sur le sous-domaine www , y compris www.coffeeshop.com , www.coffeshop.com/contact, et www.coffeeshop.com/pricing.

Cependant, le chatflow n' apparaîtra pas sur blog.coffeeshop.com à moins que vous n'ajoutiez le sous-domaine blog à vos règles de ciblage.

Vous pouvez également spécifier le domaine racine dans vos règles de ciblage. Dans cet exemple, si vous utilisez la règle de ciblage Site web | contient | coffeeshop.com, le chatflow apparaîtra sur n'importe quelle page avec ce domaine racine.

Confirmer l’URL de page utilisée pour le ciblage

Lorsque le widget de chat se charge, il envoie l’URL de la page à HubSpot pour déterminer si un chatflow doit apparaître en fonction de vos règles de ciblage.

Pour vérifier quelle URL est utilisée :

1. Ouvrez votre site web dans un navigateur.
2. Faites un clic droit n’importe où sur la page et sélectionnez Inspecter, ou appuyez sur Ctrl + Maj + I (Windows) ou Cmd + Option + I (Mac) pour ouvrir les outils de développeur.
3. Cliquez sur l’onglet Réseau .
4. Actualisez la page.
5. Recherchez une demande liée au widget de chat (par exemple, une demande qui comprend conversations ou messages).
6. Cliquez sur la demande, puis consultez l’onglet En-têtes .
7. Trouvez l’en-tête X-Hubspot-Messages-Uri et examinez sa valeur.

Confirmez que l’URL de cet en-tête correspond aux règles de ciblage de votre chatflow. Par exemple, une règle de ciblage qui contient https://hubspot.com ne correspondra pas à une URL commençant par si https://www.hubspot.com la règle n’inclut pas le www sous-domaine.

Si votre site utilise le proxy inverse, assurez-vous que le proxy préserve l’en-tête X-Hubspot-Messages-Uri lors du transfert de requêtes à HubSpot. Sans cet en-tête, il se peut que le widget de chat ne se charge pas comme prévu.

Vérifier les règles d’exclusion

Si le chatflow ne s'affiche pas comme prévu, assurez-vous que l'URL de la page n'est pas incluse dans vos règles d'exclusion. Accédez à votre chatflow, puis sur l'onglet Cible, vérifiez et supprimez les règles d'exclusion si nécessaire.

Vérifier les informations et le comportement des visiteurs

Si vous ciblez vos chatflows en fonction des informations et du comportement des visiteurs, assurez-vous que le contact répond aux critères de ciblage. Par exemple, si votre chatflow n'apparaît qu'à un contact qui a cliqué sur un CTA spécifique sur votre site web, naviguez jusqu'à l'enregistrement de contact et filtrez pour l'activité CTA du contact. Si le contact n'a pas cliqué sur le CTA sélectionné, le chatflow ne s'affichera pas.

S'il a cliqué sur le CTA, consultez les étapes de dépannage supplémentaires dans ce guide ou découvrez-en davantage sur les conséquences des cookies de suivi sur l'affichage du chatflow.

Vérifier les applications monopage (SPA)

Si votre site web est une application d’une seule page, vos règles de ciblage peuvent ne pas fonctionner comme prévu, car le contenu du site web d’une page unique est mis à jour dynamiquement lorsque vous accédez à d’autres pages, au lieu de recharger. HubSpot ne peut pas détecter la nouvelle URL de page, ce qui peut faire apparaître un mauvais chatflow sur une page ou l’empêcher d’apparaître du tout. Si vous utilisez un chat en direct ou un bot sur votre application à page unique, il est recommandé de travailler avec un développeur pour utiliser le SDK du widget de chat pour cibler vos pages. Utilisez la méthode .widget-refresh pour spécifier différents flux de discussion sur différentes pages. Consultez la documentation pour les développeurs de HubSpot.

Vérifier les paramètres de disponibilité du chat

Si votre chatflow n'apparaît toujours pas sur vos pages, vérifiez les paramètres de disponibilité du canal de chat. Vous pouvez contrôler le moment où le widget de chat est masqué, y compris lorsqu'aucun membre de l'équipe n'est en ligne ou en dehors des heures de bureau, en modifiant les paramètres de disponibilité de :

1. Dans votre compte HubSpot, cliquez sur l'icône Paramètres dans la barre de navigation principale.
2. Dans le menu latéral de gauche, accédez au centre de support de la boîte de réception & :
   • Pour modifier un canal de chat connecté à la boîte de réception des conversations, sélectionnez Boîte de réception.
   • Pour modifier un canal de chat connecté au centre de support, sélectionnez Service d’assistance. Ensuite, sous Sources et transfert des tickets, cliquez sur Canaux.
   • Placez le curseur sur le canal de chat et cliquez sur Modifier.
3. Navigate vers l’onglet Disponibilité . Sélectionnez une option :

• • En fonction de la disponibilité de l’utilisateur : les visiteurs peuvent discuter avec votre équipe si au moins un membre de l’équipe est disponible à partir des règles d’affectation .
  • Basé sur les heures d’ouverture du chat : déterminez à quel moment votre équipe doit être disponible sur le chat et donnez aux visiteurs une idée du moment auquel ils peuvent s’attendre à recevoir une réponse.
    
    • Utilisez les menus déroulants pour définir les heures d'ouverture de votre équipe. Cliquez sur + Ajouter des heures pour ajouter des plages de jours et d'heures supplémentaires.
    • Le chat est disponible 24 h/24 et 7 jours sur 7 : sélectionnez cette case à cocher si votre équipe apparaît toujours disponible dans le chat.

4. Dans la section Comportement de disponibilité , configurez l’expérience de chat en fonction de la disponibilité de votre équipe et indiquez aux visiteurs quand ils peuvent s’attendre à recevoir une réponse. Sélectionnez une option :

• • Pour configurer l'expérience du visiteur lorsque votre équipe est disponible, cliquez sur l'onglet Disponible. Cliquez sur le menu déroulant Afficher le temps de réponse typique pour informer les visiteurs du délai de réponse moyen de votre équipe.
  • Pour configurer l'expérience du visiteur lorsque votre équipe n'est pas disponible, cliquez sur l'onglet Absent. Cliquez sur le menu déroulant Afficher un message d’absence et sélectionnez un comportement de widget Mode absent.
    
    

  Abonnement requis Un abonnement Service Hub Entreprise est requis pour définir l’expérience d’un visiteur lorsque votre équipe a atteint sa capacité maximale.

  • Pour configurer l’expérience du visiteur lorsque votre équipe est à sa capacité maximale, cliquez sur le menu déroulant Si tous les membres de l’équipe sont à la capacité maximale, alors et choisissez d’afficher un message d’attente, de masquer la fenêtre de chat ou de ne rien faire. Découvrez-en davantage sur la configuration des limites de capacité de chat pour les utilisateurs.

• • Pour configurer l’expérience du visiteur en dehors des heures de travail de votre équipe, cliquez sur l’onglet En dehors des heures de travail et cliquez sur le menu déroulant Définir le comportement hors ligne et choisissez d’afficher l’heure de retour, d’afficher un message d’absence ou de masquer la fenêtre de chat lorsqu’un visiteur se rend sur votre site en dehors de vos heures d’ouverture.

5. Cliquez sur Enregistrer.

Si vous utilisez un chatflow contenant un bot, ce chatflow peut toujours s'afficher si vous n'avez pas personnalisé les préférences de disponibilité du bot. Découvrez comment modifier le moment où le chatflow doit s'afficher en fonction de la disponibilité de votre équipe.

Vérifier la priorisation des chatflows

Lorsque vous avez plus d'un chatflow qui apparaît sur une page, vous pouvez décider lequel HubSpot doit prioriser lorsqu'un visiteur arrive sur votre site. Si le flux de conversation attendu n'apparaît pas, vérifiez la priorité du flux de conversation par rapport aux autres flux de conversation de votre page.

Comprendre pourquoi un autre chatflow apparaît

Si un visiteur a commencé un fil de discussion sur l'une de vos pages, puis accède à une autre page sur laquelle un chatflow différent est censé apparaître, la conversation se poursuivra dans le fil d'origine. Par conséquent, l'autre chatflow n'apparaîtra pas. Par exemple :

• Le chatflow A est censé apparaître sur www.coffeeshop.com.
• Le chatflow B est censé apparaître sur blog.coffeeshop.com.
• Un visiteur a commencé un chat avec le chatflow A, puis accède à blog.coffeshop.com.
• Le chatflow B n'apparaîtra pas et le visiteur pourra poursuivre le fil de discussion qu'il a commencé avec le chatflow A.

Comprendre les cookies de suivi

Si, après avoir suivi les étapes ci-dessus, votre widget de chat n'apparaît toujours pas pour les contacts qui répondent à vos critères cibles, cela est probablement dû à tracking cookies. Pour que le widget de chat apparaisse pour un visiteur, un cookie de suivi doit être associé à la fiche d'informations du visiteur dans votre base de contacts. Si la fiche d'informations d'un contact ne dispose pas d'un cookie de suivi, le widget de chat ne s'affichera pas pour le visiteur associé à la fiche d'informations du contact.

Comment un visiteur reçoit-il un cookie de suivi ?

Avant de devenir des contacts, les visiteurs sont suivis de manière anonyme avec un cookie de suivi. HubSpot peut ensuite associer leur activité de site web sur le cookie de suivi à leur fiche d'informations de contact de deux manières :

• Le visiteur remplit un formulaire HubSpot.
• Le visiteur clique sur un e-mail de HubSpot Marketing qui l'amène à une page HubSpot ou à une page non-HubSpot avec le code de suivi HubSpot installé.

En outre, vous pouvez utiliser l’API du code de suivi pour suivre les visiteurs de votre site.

Tant que le visiteur n'effectue pas l'une des conversions ci-dessus, HubSpot ne connaît pas l'identité du visiteur ni les listes dont la fiche d'informations du visiteur fait partie. Par conséquent, si un contact n'a pas encore été converti, il ne verra pas le widget de chat même s'il constitue un contact dans votre base de données ou un membre de la liste que vous ciblez.

Remarque : Même si le visiteur a effectué l'une des deux actions ci-dessus pour obtenir un cookie de suivi, s'il a supprimé les cookies de navigateur ou visité votre site dans un autre navigateur depuis, dans une fenêtre de navigation privée ou sur son appareil mobile, le cookie de suivi ne peut pas être détecté et le widget de chat ne s'affiche pas.

Pourquoi des contacts n'ont-ils pas de cookie de suivi ?

Voici quelques-unes des méthodes courantes pour que vos contacts puissent exister dans votre base de données sans remplir de formulaire ni cliquer sur un lien d'e-mail marketing :

• Le contact était importé.
• Le contact a été ajouté manuellement.
• Le contact a été créé à partir d'un e-mail de vente enregistré sur .

Dès qu'un contact dans votre base de données est suivi avec un cookie de suivi, HubSpot le considère comme un contact connu. S'il répond aux critères de votre audience, le widget de chat s'affichera lorsqu'il visitera votre site.

Remarque : Dans certains cas, certaines extensions de navigateur (telles que les fenêtres contextuelles, les bloqueurs de publicités ou de script) peuvent empêcher le chargement du widget de chat. Si le widget apparaît après avoir désactivé ces extensions, il est probable que l’une d’entre elles les bloque.