Utilisez cet article pour configurer un Workflow qui s'ouvre dans le Messenger lorsqu'un client clique sur un bouton ou un élément spécifique de votre site web. Ceci est disponible pour les coéquipiers qui ont le Messenger installé sur leur site et accès aux Workflows dans leur plan.

Par exemple, vous pourriez :

Allez à Fin AI Agent > Workflows et cliquez sur New workflow.

Choisissez Create from scratch et utilisez le déclencheur « When customer clicks a website element ».

Vous devez maintenant configurer les paramètres pour sélectionner un bouton sur votre site qui déclenchera le Workflow. Choisissez simplement Select element on your site to launch from.

Ensuite, choisissez le site web où vous souhaitez ajouter ce Workflow et cliquez sur Open website.

Vous serez dirigé vers votre site web dans une nouvelle fenêtre. Dans le menu en bas de la page, choisissez « Navigate » pour aller à la page contenant le bouton sur lequel vous voulez déclencher votre Workflow :

Une fois sur la bonne page, cliquez sur Select dans le menu, puis cliquez sur l’élément du site web que vous souhaitez.

Une fois que vous avez sélectionné le bon élément, cliquez sur Save and close. Vous reviendrez au constructeur de Workflow, où l’élément sélectionné apparaîtra comme déclencheur confirmé. Pour vérifier qu’il a été enregistré correctement, vérifiez que la configuration du déclencheur affiche maintenant un sélecteur CSS — c’est l’adresse unique de l’élément sur votre page, par exemple .contact-button ou #chat-trigger. S’il affiche un sélecteur générique plutôt qu’un spécifique à votre bouton, répétez la sélection.

Si vous avez plusieurs boutons sur votre site et que vous souhaitez qu’ils déclenchent tous le même Workflow, vous pouvez définir manuellement une classe CSS partagée. Une classe CSS est une étiquette que vous ajoutez aux éléments HTML dans le code de votre site — tout élément avec cette classe peut alors agir comme déclencheur. Un sélecteur CSS est la règle de correspondance qu’Intercom utilise pour trouver cet élément sur la page, par exemple .bot_launcher_button.
​

Avant de configurer cela, notez la contrainte d’un bouton par page ci-dessous :

D’abord, utilisez le sélecteur visuel (ouvrez votre Workflow, cliquez sur Select element on your site to launch from, puis cliquez sur Select dans le menu du bas) et sélectionnez un des boutons que vous souhaitez pour déclencher le Workflow. Vous verrez alors le sélecteur CSS capturé — vous pouvez le modifier manuellement dans le champ affiché :

Assurez-vous que tous les boutons partagent une classe comme .bot_launcher_button et ajoutez-la ici (si elle n’est pas déjà sélectionnée), puis enregistrez et fermez :

Tout élément sur votre site qui partage cette classe CSS déclenchera maintenant le Workflow lorsqu’il est cliqué.

Une fois que vous avez confirmé que le déclencheur est configuré, vous pouvez commencer à construire votre Workflow — ajoutez des étapes telles qu’un message de bienvenue, des branches selon que le visiteur est un client connu ou un nouveau lead, et des actions comme assigner la conversation à une équipe. Voir building your Workflow pour un guide complet des types d’étapes disponibles.

Par exemple, si vous utilisez un Workflow sur un bouton « Chat to us », vous pourriez créer des chemins séparés pour les nouveaux leads et les clients actuels :

Parfois, lorsque vous ouvrez votre site web avec le sélecteur d’éléments, le menu du sélecteur en bas n’apparaît pas. Cela est généralement causé par l’un des problèmes suivants. Les deux premiers peuvent être résolus par n’importe qui ; le troisième et le quatrième impliquent une configuration technique qui peut nécessiter un développeur dans votre équipe.

Pour sélectionner un élément de votre site web, le Messenger doit être installé sur le site où vous souhaitez le construire. S’il n’est pas installé, le menu du sélecteur ne se chargera pas. Par exemple, si vous voulez déclencher un workflow dans votre produit, mais que vous n’avez installé le Messenger que pour les visiteurs non connectés, le menu du sélecteur n’apparaîtra pas dans votre produit.

Si vous n’avez pas le Messenger installé, lisez ces guides pour commencer :

Le menu du sélecteur ne fonctionnera pas sur une page où votre site est intégré dans un iframe tiers.

Le Messenger Intercom est toujours rendu dans son propre iframe (un cadre en ligne — une façon d’intégrer une page web dans une autre). C’est un comportement attendu et qui ne peut pas être modifié. Cependant, si votre site ou produit est lui-même chargé dans un iframe tiers (par exemple, dans une application Shopify ou un plugin Figma), le Messenger ne peut pas accéder aux informations de la page parente contenant l’iframe.

Dans ces cas, la sélection d’un élément pour déclencher un Workflow n’est pas prise en charge.

Le menu du sélecteur utilise la propriété window.opener — une API navigateur qui permet au sélecteur de communiquer avec l’application Intercom dans l’onglet qui a ouvert votre site web. Si le JavaScript de votre site (ou une bibliothèque tierce) écrase window.opener en null, le menu du sélecteur ne pourra pas renvoyer de données et ne se chargera pas.

Vérifiez votre en-tête Cross-Origin-Opener-Policy
L’en-tête Cross-Origin-Opener-Policy (COOP) de votre serveur contrôle si une page peut communiquer avec la fenêtre qui l’a ouverte. Si votre en-tête COOP est réglé sur same-origin ou same-origin-allow-popups, les navigateurs définissent window.opener à null, ce qui empêche le menu du sélecteur de se charger. (Same-origin-allow-popups semble correct ici — mais ce réglage ne conserve la connexion qu’avec les popups que votre page ouvre. Il ne conserve pas la connexion avec l’onglet Intercom qui a ouvert votre page, ce dont dépend le sélecteur. Cela casse donc le sélecteur de la même manière que same-origin.) Pour corriger cela, demandez à votre développeur de changer la valeur de l’en-tête en unsafe-none ou de supprimer complètement l’en-tête.

Si vous avez le bon workspace installé sur votre site, et que le menu du sélecteur ne se charge toujours pas, discutez avec nous dans le Messenger, nous serons heureux de vous aider.