Revenir aux actualités des développeurs

Intégration de la plateforme WhatsApp Business à HubSpot

HubSpot est une plateforme de gestion de la relation clientèle (CRM) qui permet aux organisations de commercialiser et vendre leurs produits ou services et de fournir l’assistance associée de manière plus efficace.

La plateforme WhatsApp Business permet aux entreprises d’utiliser l’API Cloud, hébergée par Meta, pour communiquer directement avec leurs client·es à partir de leur système CRM grâce à des intégrations WhatsApp. Cela facilite l’accès aux fonctionnalités de messagerie et permet une intégration directe à la plupart des piles technologiques existantes.

Nous allons voir ici comment mettre en place ce type d’intégration avec HubSpot et créer un workflow dans la plateforme CRM pour répondre automatiquement aux messages en fonction d’événements et de règles personnalisées sur la plateforme HubSpot à partir de WhatsApp.

Conditions requises

Pour suivre ce tutoriel, vous aurez besoin de ce qui suit :

  • Un compte WhatsApp Business.

  • Un compte Meta for Developers.

  • Un compte de développeur d’applications HubSpot (sélectionnez Développeur d’applications si vous créez un nouveau compte). Les comptes de développeur d’applications Hubspot fournissent des fonctionnalités et des services énumérés dans les conditions générales de Hubspot, y compris l’accès aux API CRM et la possibilité de créer des applications.

  • Une URL qui pointe vers l’instance en cours de cet exemple d’application Glitch pour recevoir les messages de WhatsApp Business Messenger.

Cet article suppose que vous connaissez la plateforme WhatsApp Business, Meta for Developers et HubSpot.

Envoi de messages

La première étape consiste à configurer vos comptes. Pour ce faire :

  1. Créez un compte de développeur Facebook ou connectez-vous si vous en possédez déjà un.

  2. Terminez l’étape Configuration des éléments de développement et de l’accès à la plateforme décrite dans la documentation officielle de démarrage et envoyez un message de test.

  3. Ajoutez votre numéro de téléphone dans les paramètres de l’API Cloud de votre application.

Réception de messages avec une app démo

Nous devrons configurer un webhook et une URL d’abonné·e webhook avec un point de terminaison pour tester vos webhooks. Pour ce faire, nous utiliserons l’app démo mentionnée ci-dessus.

Cliquez sur le bouton Remix to Edit en haut à droite de l’écran pour pouvoir modifier les détails de configuration.

Ouvrez le fichier .env, collez votre token d’accès à l’API Cloud dans le champ WHATSAPP_TOKEN. Pour le champ VERIFY_TOKEN, vous pouvez saisir n’importe quelle chaîne, mais gardez l’information à portée de main car nous l’utiliserons plus tard.

Configuration du webhook pour l’API Cloud

Ensuite, configurez le webhook pour l’API afin de permettre les abonnements aux mises à jour ou les réponses aux modifications d’événements depuis l’Espace App Meta for Developers pour votre application. Cliquez sur la barre de navigation pour WhatsApp. Ensuite, sous Démarrer, cliquez sur Configuration, puis sur Modifier.

Dans la boîte de dialogue Modifier l’URL de rappel du webhook, renseignez les champs URL de rappel et Vérifier le token. L’URL de rappel sera https://<<PROJECT NAME>>.glitch.me. Remplacez le nom du projet par le nom de votre projet (par exemple, https://defiant-standing-mirror.glitch.me). Puis vérifiez que l’URL est la même que ci-dessus.

Cliquez sur Vérifier et enregistrer. Consultez le guide développeur·se pour en savoir plus sur la configuration des webhooks WhatsApp.

écran Modifier l’URL de rappel du webhook

Vous pouvez à présent envoyer des notifications de test au point de terminaison.

Sur cette même page, sous le bouton Modifier, cliquez sur Champs Webhooks, puis sur Gérer et abonnez-vous aux événements que vous souhaitez écouter par l’intermédiaire du point de terminaison. Cliquez ensuite sur Test pour envoyer un message de notification au numéro de téléphone destinataire configuré précédemment.

écran Champs Webhooks

Pour vérifier que l’application est en cours d’exécution et écoute les événements, allez dans Glitch, cliquez sur Logs et affichez les journaux de l’événement que vous avez sélectionné.

écran Voir les journaux dans Glitch

Configuration de la plateforme HubSpot CRM

Nous allons à présent configurer la plateforme HubSpot CRM pour qu’elle envoie automatiquement des messages WhatsApp aux client·es dont les coordonnées comprennent un numéro de téléphone.

Allez sur la plateforme HubSpot et connectez-vous à votre compte de développeur ou créez-en un. Le compte de développeur offre un essai gratuit de 90 jours de toutes les fonctionnalités d’entreprise HubSpot, y compris le marketing, les ventes, les services et CMS, afin que vous puissiez tester l’API HubSpot et les outils.

Après avoir configuré votre compte de développeur, cliquez sur Gérer les comptes de test.

Connecté·e avec un compte de développeur sur HubSpot CRM

Sélectionnez ensuite Créer un compte de test d’applications, nommez-le demo_whatsapp_integration (ou ce que vous voulez) et cliquez sur Créer.

écran Créez un compte de test d’applications

Cliquez sur le compte de test d’applications que vous venez de créer et naviguez jusqu’au tableau de bord. Cliquez ensuite sur Contacts en haut à gauche de la barre de navigation. Vous verrez deux contacts démo. N’hésitez pas à les supprimer et à ajouter un nouveau contact avec un numéro de téléphone de test à utiliser pour tester WhatsApp.

Tableau de bord du nouveau compte de test d’applications

Connexion entre WhatsApp et HubSpot CRM

Nous devons ensuite installer une intégration de WhatsApp à HubSpot CRM. Tout d’abord, allez dans les Paramètres de HubSpot. Sous Configuration du compte, cliquez sur Intégrations, puis sur Applications connectées.

écran Applications connectées

Cliquez sur Découvrir le marketplace des applications. Utilisez le champ de recherche pour rechercher l’application WhatsApp. Cliquez sur WhatHub : WhatsApp Integration.

Marketplace des applications

Sélectionnez le compte demo_whatsapp_integration et cliquez sur Choisir compte. Vous pourrez alors voir une icône WhatsApp sur la page de contact à côté des autres options de contact. Cliquez dessus pour commencer à envoyer des messages depuis HubSpot CRM. Vous pouvez utiliser des messages personnalisés ou des modèles prédéfinis.

Message personnalisé WhatsApp

Vous pourrez également voir une liste de messages et leur statut dans l’onglet Activité.

Configuration d’un workflow automatisé

Nous allons ensuite l’intégrer dans un workflow déclenché par un événement dans la plateforme CRM. Pour ce faire, nous allons mettre en place un workflow personnalisé à partir du tableau de bord HubSpot. Cliquez sur Automatisation dans la barre de navigation, puis sur Workflows pour ouvrir le tableau de bord Workflows.

Cliquez sur Créer un workflow et sélectionnez l’option À partir de zéro. Cliquez ensuite sur Basé sur les contacts, puis sur Suivant.

écran Revenir aux workflows

Cliquez sur Configurer des critères d’inscription et sélectionnez l’option d’événement d’intégration Message WhatsApp envoyé depuis le portail HubSpot.

écran Configuration des critères d’inscription

Sélectionnez le type de filtre Message envoyé, définissez le critère d’inscription sur « est égal à n’importe lequel de » et spécifiez la valeur Acheter article. Enfin, cliquez sur le filtre Appliquer, puis sur Enregistrer.

Cliquez ensuite sur l’icône + et ajoutez une autre action. Dans la liste Sélectionner une action, cliquez sur Créer une tâche.

écran Sélectionner une action

Nommez-la « Tâche de test », affectez-la à votre compte de test, puis cliquez sur Enregistrer. Ensuite, cliquez sur Vérifier et publier, puis activez le workflow en cliquant sur Activer dans le coin supérieur droit de la fenêtre.

écran Activer le workflow

Sélectionnez ensuite Test et choisissez votre contact de test pour tester le workflow. Cela déclenche le workflow comme indiqué ci-dessous.

écran Sélectionner votre contact de test

Ensuite, nous allons créer une intégration qui écoute WhatsApp et met automatiquement à jour les données dans HubSpot CRM en cas de réception d’une notification. Avant de configurer le workflow, nous devons ajouter le contact de test à une liste. Cliquez sur Contacts, puis sur Listes pour créer une nouvelle liste.

Une fois votre liste créée, accédez à la page Workflows et créez un nouveau workflow que vous nommerez « Automatisation WhatsApp ».

Sélectionnez une liste basée sur l’objet Contact, ajoutez le nom de la liste, puis sélectionnez Liste statique. Cliquez sur Suivant, puis sur le bouton + Ajouter un filtre.

Choisissez Inscription à une liste dans la liste Ajouter un filtre pour l’ajouter en tant que filtre, puis cliquez sur Enregistrer la liste.

écran Ajouter un filtre

Vous pouvez à présent continuer à configurer le workflow. Pour ce faire, sélectionnez Basé sur l’objet Contact et ajoutez le critère d’inscription Contact à Inscription à une liste.

écran Critère d’inscription Contact

Configurez une tâche à déclencher lorsque ce workflow est activé. Vérifiez que cette tâche apparaît dans la chronologie des actions, puis cliquez sur Enregistrer.

Dans la liste Sélectionner une action, cliquez sur Envoyer un webhook.

Option Envoyer un webhook

Ensuite, créez une action permettant au workflow d’envoyer la charge utile au point de terminaison lorsque le workflow est déclenché.

écran Envoyer un webhook

Veillez à utiliser l’URL que vous avez définie précédemment durant le didacticiel. Cliquez sur Enregistrer. Enfin, testez le workflow comme vous l’avez fait précédemment : ouvrez la liste de test, sélectionnez votre contact de test dans la liste Aperçu pour et cliquez sur Tester. Le workflow est terminé.

Vérifions à présent vos journaux et la chronologie des actions. Retournez dans la chronologie des actions pour examiner la tâche créée.

Journaux et chronologie des actions

Pour vérifier vos journaux, retournez dans votre application Glitch en cours et affichez les journaux pour confirmer la réception des messages.

Affichage des journaux dans l’application Glitch

Conclusion

L’intégration de la plateforme WhatsApp Business dans HubSpot vous permet d’automatiser l’envoi et la réception de messages en fonction des règles que vous créez pour les événements et des actions de vos client·es.

Cet article vous explique, étape par étape, comment connecter ces deux services pour envoyer des messages WhatsApp à des contacts dont les coordonnées sont enregistrées dans Hubspot. Il vous permet de configurer des workflows personnalisés qui déclenchent des actions en fonction d’événements prédéfinis. En outre, il vous aide à configurer un workflow qui envoie une notification à un point de terminaison préalablement configuré et commence une nouvelle tâche.

Pour vous assurer que vos messages sont envoyés et fournissent à vos client·es des informations opportunes, pertinentes et attendues, vous devez faire attention à la quantité de messages envoyés. Évitez de les spammer pour garantir leur satisfaction et leur implication.

Pour en savoir plus sur les moyens d’intégrer WhatsApp dans vos applications et projets, voir nos autres tutoriels pour les développeur·ses.