Intégration de WhatsApp dans Shopify

En tant que développeur·se Shopify pour des entreprises de taille moyenne ou grande, vous connaissez l’importance d’une communication transparente avec votre clientèle. Pour ce faire, vous pouvez tirer parti de la plateforme WhatsApp Business pour vous aider à envoyer des messages automatisés à des milliers de client·es et adapter le processus de manière efficace à mesure que votre base de clientèle augmente.

Ce tutoriel explique comment connecter WhatsApp à Shopify et envoyer des messages de notification WhatsApp aux client·es en fonction des évènements qu’ils ou elles déclenchent dans la boutique, comme l’ajout d’un produit à leur panier ou la validation d’une commande. Pour ce faire, nous utiliserons l’API Cloud, hébergée par Meta.

Conditions requises

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Installer Node.js et npm
• Une boutique sur Shopify avec des produits et un système de traitement des paiements opérationnel
• Ouvrir un compte de développeur sur Meta for Developer, configurer une application Business et sélectionner un compte WhatsApp Business.

La dernière étape permet d’obtenir un token d’accès temporaire. Notez-le bien, car vous en aurez besoin plus loin dans ce tutoriel.

Une fois ces conditions remplies, vous pouvez poursuivre le tutoriel.

Créer un modèle de message sur WhatsApp

Les modèles de messages WhatsApp vous permettent de créer plusieurs formats de messages que vous pouvez utiliser plusieurs fois pour envoyer des messages à vos client·es après qu’ils ou elles aient autorisé votre application à le faire.

Procédez comme suit pour créer un modèle de message de notification de commande :

• Connectez-vous à votre Business Manager et choisissez votre compte business.
• Cliquez sur l’icône à trois lignes en haut à gauche de la page, puis sur Gestionnaire WhatsApp.
• En utilisant la navigation latérale, survolez l’icône Outils du compte et cliquez sur Modèles de message.
• Cliquez sur Créer un modèle en haut à droite de la page.
• Sur la page suivante, choisissez l’option Services pour votre catégorie, puis donnez un nom à votre modèle (dans ce cas, “order_confirmation”) et sélectionnez la langue correspondante.

• Cliquez sur Continuer pour accéder à l’éditeur de modèles.

Une fois le modèle order_confirmation configuré, il est temps d’en définir les grandes lignes. Voici ce que doit voir votre clientèle :

• Nous avons bien reçu votre commande !

• Bonjour [nom du/de la client·e],

• Merci pour votre achat.

• Nous traitons votre commande (23190). Votre colis vous sera expédié dans un délai de 2-3 jours ouvrables (hors jours fériés et week-ends).

• Vous recevrez alors un nouvel e-mail de notre part.

Dans votre éditeur de modèle, choisissez Texto dans la section Titre. Le paragraphe “Nous avons bien reçu...” sera le titre et le reste du message sera copié dans la section Corps.

Ensuite, cliquez deux fois sur Ajouter une variable sous l’encadré Corps afin d’ajouter deux variables. Copiez-collez la première variable — {{1}} — à la place du nom du client ou de la cliente. Puis, copiez-collez la seconde — {{2}} — à la place du numéro de commande, entre parenthèses.

Lorsque vous aurez terminé, votre message devrait ressembler à ceci. Vous pouvez vérifier le rendu dans la zone d’aperçu sur la même page.

Cliquez sur Envoyer pour enregistrer le modèle de message.

Le modèle est prêt. Vous pouvez à présent utiliser la plateforme WhatsApp Business pour créer un webhook dans votre interface administrateur Shopify et créer une application qui envoie automatiquement le message à un·e client·e lorsqu’il ou elle passe une commande.

Utilisation de Webhooks pour envoyer des notifications à un serveur Express

Imaginons que vous souhaitiez envoyer un message automatique à vos client·es lorsqu’ils ou elles passent une commande dans votre boutique Shopify. Vous pourriez vérifier si la boutique a reçu de nouvelles commandes toutes les cinq minutes environ. Cependant, il est inefficace d’envoyer constamment des requêtes API à votre boutique, surtout si aucune nouvelle commande n’a été validée.

Il est bien plus efficace qu’un webhook soit à l’écoute de l’évènement « création de commande » dans votre boutique et vous informe chaque fois qu’une personne passe une commande.

Voici les étapes de base pour créer un webhook « création de commande » et l’associer à un serveur Express.

Configurer un projet Node.js

Commencez par créer un dossier nommé « whatsapp-demo » pour votre projet.

Ensuite, lancez le terminal de commande cd dans « whatsapp-demo » et exécutez la commande suivante pour initialiser un projet Node.js :

npm init -y

Installez Express, la bibliothèque utilisée pour créer un serveur web sur Node.js, en exécutant la commande suivante :

npm i express

Votre environnement de développement est prêt. Vous pouvez à présent créer le serveur Express.

Créer un serveur Express

Créez un fichier nommé test.js dans le dossier whatsapp-demo. Ouvrez-le avec votre éditeur de code source préféré et copiez-collez-y le code suivant :

const express = require('express')
const app = express()

app.post('/webhooks/orders/create', (req, res) => {
 console.log('Yes, We got an order!')
 res.sendStatus(200)
})

app.listen(3000, () => console.log('Now running on port 3000!'))

En utilisant le code ci-dessus, vous avez configuré un serveur Express de base qui affiche un message sur le terminal du serveur lorsque le webhook envoie une notification « création de commande ».

Avant de l’associer au webhook Shopify, vous devez tout d’abord configurer un tunnel.

Configurer un tunnel de trafic HTTPS

Lors de la mise en place d’un webhook, Shopify vous demande de fournir une URL publique à laquelle il enverra la notification.

Si vous suivez ce tutoriel sur un serveur public, utilisez son URL. Si vous suivez ce tutoriel sur votre machine locale, vous devrez créer un tunnel avec une URL HTTPS accessible au public.

Tout d’abord, installez ngrok en exécutant la commande suivante :

npm install -g ngrok

Puis, lancez une autre fenêtre de terminal et exécutez la commande suivante pour obtenir l’URL tunnelée de votre serveur local :

ngrok http 3000
Forwarding                    https://xxxx-xxx-xxx-xxx-xxx.ngrok.io

Notez l’URL car vous en aurez besoin à l’étape suivante. Sachez que si vous redémarrez ce client, vous obtiendrez une nouvelle URL et devrez mettre à jour toutes les références associées.

Créer un webhook dans Shopify

Rendez-vous dans l’interface administrateur de votre boutique Shopify et naviguez jusqu’à Paramètres > Notifications. Ensuite, faites défiler la page jusqu’à Webhooks et cliquez sur Créer un webhook.

Ajoutez un webhook pour « order_creation » et indiquez l’URL tunnel ou publique que vous avez créée dans la section précédente.

Lancez votre serveur local sur un autre terminal avec le nœud index.js, puis cliquez sur Envoyer une notification test.

Si tout se passe bien, vous recevrez ce message sur le terminal de votre serveur : « Oui, nous avons reçu une commande ».

Vous disposez à présent d’une connexion fonctionnelle entre votre boutique Shopify et le serveur Express. Vous enverrez ensuite le modèle de message WhatsApp au client ou à la cliente lorsqu’il ou elle aura passé une commande.

Envoyer un message personnalisé avec le modèle « order_notification »

Commencez par installer Axios en exécutant la commande suivante dans votre terminal :

npm i axios

Vous utiliserez Axios pour que la requête POST se charge de l’envoi du message WhatsApp à votre clientèle.

Une fois Axios installé, créez un autre fichier dans le dossier de votre projet nommé customMessage.js, puis importez Axios et Express dans le fichier avec le code suivant :

const axios = require('axios').default
const express = require('express')
const app = express()

Ensuite, créez une route pour gérer la notification de création de commande de Shopify en exécutant les commandes suivantes :

app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);

const order = JSON.parse(body.toString());

console.log("Yes, We got an order!", order.customer.phone);
  
// Remaining code will go here

})

Lorsque Shopify appelle /webhooks/orders/create avec une commande, les détails de cette dernière sont envoyés à la route indiquée dans res, au deuxième argument de votre fonction de rappel asynchrone et à un objet JavaScript.

Ensuite, récupérez le numéro de téléphone, le prénom et l’identifiant de la commande du client ou de la cliente dans les détails de commande, et utilisez-les pour définir les paramètres de la requête d’API :

        const data = {
        "messaging_product": "whatsapp", 
         "to": `${order.customer.phone}`, 
        "type": "template", 
         "template": { 
        "name": "order_confirmation", 
        "language": { "code": "en_GB" },
        "components": [
        {
          "type": "body",
          "parameters": [
          {
            "type": "text",
            "text": `${order.customer.first_name}`
          },
          {
            "type": "text",
            "text": `${order.id}`
          }
        ]
      }
    ] 
  } 
} 

L’objet ci-dessus contient tous les paramètres nécessaires à la requête. Assurez-vous que le nom du modèle spécifié dans l’objet correspond à celui créé précédemment dans votre Business Manager WhatsApp.

Ensuite, créez un objet config avec un objet d’en-tête imbriqué. Dans les en-têtes, définissez votre token d’accès WhatsApp comme valeur d’autorisation (remplacez ACCESS_TOKEN par le token) et application/json comme Content-Type :

 const config = {
 headers: { Authorization: `Bearer <ACCESS_TOKEN>`, 'Content-Type':   'application/json'}
};

Créez ensuite une requête POST avec Axios et passez l’objet config et l’objet data en tant qu’arguments. Imbriquez les méthodes then et catch pour afficher le résultat (ou le message d’erreur en cas d’échec de la promesse) :

  if (order.customer.phone) {
   return res.sendStatus(403);
  } else {
  axios
  .post(
    "https://graph.facebook.com/<API_VERSION>/<YOUR_WABA_ID>/messages",
  data,
  config
  )
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

  return res.sendStatus(200);
}

Remplacez YOUR_WABA_ID par votre ID WhatsApp Business à partir de votre Espace App WhatsApp et API_VERSION par une version compatible de l’API Cloud (par défaut v15.0).

L’application est prête !

Pour effectuer un test, le tunnel ngrok doit toujours être en cours d’exécution et vous devez démarrer le serveur Express dans un autre terminal :

node customMessages.js

Autres évènements Shopify

Outre l’enregistrement des commandes, Shopify propose plus de 50 webhooks pour différents évènements. Vous pouvez vous abonner à la création et aux mises à jour de panier, à la création et aux mises à jour de collections de produits, aux tentatives de facturation réussies et échouées, et à bien d’autres évènements.

Pour utiliser l’un de ces webhooks, suivez la même séquence que celle décrite ci-dessus, en créant un nouveau webhook dans votre interface administrateur Shopify et en enregistrant le sujet en tant que route dans votre serveur Express.

Comme vous avez pu le constater, la plateforme WhatsApp Business vous permet de communiquer de manière transparente avec votre clientèle, que ce soit de manière manuelle ou programmée, en fonction des évènements survenant dans votre boutique Shopify.

L’intégration de WhatsApp dans Shopify permet l’envoi de messages en masse à votre clientèle en temps réel. Les messages peuvent être envoyés automatiquement (par exemple, en fonction d’un évènement) ou manuellement. Non seulement cette intégration est facile à mettre en place, mais elle est également très évolutive. L’association de WhatsApp et Shopify rend la communication avec la clientèle cohérente, efficace et percutante.

Pour en savoir plus sur la façon dont vous pouvez intégrer WhatsApp dans vos applications et projets, voir nos autres tutoriels destinés aux équipes de développement.