Utilisation des codes QR et des liens courts dans WhatsApp

12 décembre 2022DeRashed Talukder

Les codes QR sont un moyen facile d’intégrer des éléments riches en informations dans une petite image. Ils sont fréquemment utilisés à des fins très diverses, comme donner plus d’informations aux personnes qui regardent une affiche ou encore fournir le menu à la clientèle d’un restaurant.

Dans leur forme la plus simple, les codes QR et les liens courts, qui ne sont rien de moins qu’une version abrégée et plus lisible d’un lien complexe, constituent un moyen direct et accessible de communiquer avec votre clientèle. WhatsApp utilise des codes QR et des liens courts pour vous aider à mieux communiquer avec votre clientèle. Cette dernière peut ainsi vous contacter sans avoir à saisir de numéro de téléphone ou bien accéder rapidement à des informations sur les produits, promotions, etc. que vous proposez.

Dans cet article, vous apprendrez à générer et utiliser des codes QR et des liens courts sur la plateforme WhatsApp Business grâce à l’API Cloud, hébergée par Meta. Nous découvrirons comment créer, mettre à jour, obtenir et supprimer un nouveau code QR et un lien court et comment les envoyer dans un message WhatsApp. Vous pouvez consulter le code complet ici, à tout moment.

Conditions requises

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

Une application WhatsApp dans votre compte de développeur Meta, conformément au guide Premiers pas, et être capable d’envoyer un texto (la configuration du webhook n’est pas nécessaire).
Un token d’accès d’utilisateur système avec les autorisations requises (whatsapp_business_management, whatsapp_business_messaging et business_management).
Des connaissances de base de Node.js et Express.js.

En outre, ce tutoriel utilisera plusieurs bibliothèques Node.js, dont dotenv, pour stocker la configuration nécessaire aux requêtes HTTP avec l’API Cloud. Vous utiliserez également Postman pour tester les points de terminaison de cette application. Enfin, vous aurez besoin de ce code de texte standard comme base pour cet article.

Configuration de l’environnement

Créez et ouvrez un fichier .env à la racine du projet et remplissez toutes les variables manquantes avec les valeurs des étapes 1 et 2 de la section « Conditions requises ».

# Your WhatsApp Business app Id
APP_ID=

# Your WhatsApp Business app secret
APP_SECRET=

# Recipient phone number without "+" symbol
RECIPIENT_PHONE_NUMBER=

# Your WhatsApp phone number Id
PHONE_NUMBER_ID=

# Business Account Id
BUSINESS_ACCOUNT_ID=

# System User Access Token. Not temporary access token
ACCESS_TOKEN=

# Cloud API version number
VERSION=v15.0

# Override the default app listener port.
LISTENER_PORT=3000

Une fois les variables d’environnement ajoutées, démarrez l’application à l’aide du script de raccourci npm init, qui créera un squelette d’application.

Création d’un nouveau code QR et d’un lien court

Vous commencerez par créer un nouveau code QR ainsi qu’un lien court à l’aide de l’API Business Management, qui fait partie de la plateforme WhatsApp Business.

Conformément à la documentation, envoyez tout d’abord une requête POST au point de terminaison /{phone-number-ID}/message_qrdls accompagné de trois paramètres de requête : prefilled_message, generate_qr_image et votre access_token.

À présent, vous devez stocker le code QR scanné et le lien court dans prefilled_message. Cela permettra à un contact de vous envoyer un message prérédigé, ce qui peut être utile pour le service client, le commerce électronique, l’obtention d’un consentement pour des messages marketing, etc.

Ensuite, generate_qr_image vous permet de prendre en charge deux formats pour l’image de code QR générée : .svg ou .png. Vous pouvez sélectionner votre format préféré en utilisant la méthode suivante. Cet exemple a recours au format .png.

À l’aide du texte standard, naviguez jusqu’à controllers/qrCode.js et mettez à jour la méthode createQRCode avec le code suivant :

const qrdlObject =
  {
    "prefilled_message" : message,
    "generate_qr_image" : type
  }

  const config =
  {
    "method" : "post",
    "url" : `https://graph.facebook.com/${process.env.VERSION}/${process.env.BUSINESS_ACCOUNT_ID}/message_qrdls`,
    "headers" : {
      Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
      'Content-Type': 'application/json'
    },
    "data" : qrdlObject,
  };

  try
  {
    await axios( config );
  }
  catch( error )
  {
    console.log( "")
  }

    },
    function (err, resp, body) {
      if (err) {
        console.log("Error!");
      } else {
        res.json(JSON.parse(body));
      }
    }
  );
};

Vous devez ensuite transmettre deux variables depuis le corps de la requête : un message (qui sera utilisé plus tard en tant que prefilled_message) et le format de votre image. Testez ensuite le résultat avec Postman.

Voici à quoi ressemble le corps de la requête :

{
    "message":"Creating the example QR Code and Short Link",
    "type":"png"
}

Lorsque vous cliquez sur le bouton Envoyer dans le coin supérieur droit, l’API renvoie la réponse illustrée dans la capture d’écran ci-dessous. La réponse contient deep_link_url, qui sert de lien court, et qr_image_url, qui fait office d’image de code QR. Elle contient également les paramètres id et prefilled_message.

Envoi d’un message WhatsApp avec un code QR et un lien court

Vous pourrez ensuite envoyer le code QR et le lien court que vous venez de générer à un·e client·e. Pour cela, vous devrez utiliser l’API Cloud. Vous pouvez suivre les exemples de cette documentation comme point de référence. Avec l’API, vous pourrez envoyer un lien court sous forme de texto et une image URL sous forme de message multimédia.

Textos

curl -X  POST \
 'https://graph.facebook.com/v15.0/BUSINESS_ACCOUNT_ID/messages' \
 -H 'Authorization: Bearer ACCESS_TOKEN' \
 -d '{
  "messaging_product": "whatsapp",
  "recipient_type": "individual",
  "to": "RECIPIENT_PHONE_NUMBER",
  "type": "text",
  "text": { // the text object
    "preview_url": false,
  "body": "MESSAGE_CONTENT"
  }
}'

Messages multimédias

curl -X  POST \
 'https://graph.facebook.com/v15.0/BUSINESS_ACCOUNT_ID/messages' \
 -H 'Authorization: Bearer ACCESS_TOKEN' \
 -d '{
  "messaging_product": "whatsapp",
  "recipient_type": "individual",
  "to": "RECIPIENT_PHONE_NUMBER",
  "type": "image",
  "image": {
  "id" : "MEDIA_OBJECT_ID"
  }
}'

Vous allez créer une méthode permettant d’accepter un objet de requête similaire et d’exécuter la requête HTTP, qui appellera le point de terminaison /phone_number_id/messages et enverra un message. Dans controllers/qrCode.js, créez une méthode sendMessage à l’aide du code suivant. La méthode modèle sera déjà dans le texte standard.

exports.sendMessage = async (req, res) => {
  const { to, type } = req.body;
  if (!to || !type) {
    return res.status(400).json({
      error: "Required Fields: to and type",
    });
  }
  request.post(
    {
      url: `https://graph.facebook.com/${process.env.VERSION}/${process.env.BUSINESS_ACCOUNT_ID}/messages`,
      headers: {
        Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
        "content-type": "application/json",
      },
      body: JSON.stringify(req.body),
    },
    function (err, resp, body) {
      if (err) {
        console.log("Error!");
      } else {
        res.json(JSON.parse(body));
      }
    }
  );
};

Envoyez ensuite un message avec le nouveau code QR. Copiez l’adresse qr_image_url et ajoutez-la comme lien d’image dans le corps de la requête.

Voici à quoi ressemble l’objet de requête Postman. Dans ce cas, PHONE_NUMBER_TO_SEND peut être de n’importe quel format utilisable.

{
    "messaging_product": "whatsapp",
    "recipient_type": "individual",
    "to": "RECIPIENT_PHONE_NUMBER",
    "type": "image",
    "image": {
        "link": "https://scontent.fybz2-1.fna.fbcdn.net/m1/v/t6/An95lHumHOGcQ_Fl8cDwVrARmc9T9tmtMLyeTOeSFny-OoLLAqSFHEd8gQzAYVsVS6jNm9IBVU27fcb1H05ERwyb5i87Jtp4fjsNppvFnTu26k7ss_dN8S1ZtkSl6XRZtwB68GUabG8?ccb=10-5&oh=00_AT-LCjyu6J8kkeoW1Qj2rxMZikjrHw0fvwA2C6cn9DYkEA&oe=62C8EC07&_nc_sid=f36290"
    }
}

Si vous obtenez une réponse similaire à l’image ci-dessous, cela signifie que le message a bien été envoyé.

L’image ci-dessous illustre le message que reçoit le destinataire :

Désormais, lorsqu’une personne scannera ce code QR à l’aide d’un smartphone ou de tout autre appareil, le message sera prérempli sans que cette personne n’ait à intervenir et une nouvelle conversation sera lancée.

Récupération de la liste des codes QR et liens courts existants

Pour obtenir la liste des codes QR et liens courts existants, rien de plus simple : il suffit d’envoyer une requête GET au point de terminaison /{phone-number-ID}/message_qrdls . Celle-ci renvoie une série d’objets, dans laquelle les objets individuels comprennent code(id), prefilled_message et deep_link_url.

Dans le fichier controllers/qrCode.js, mettez à jour la méthode à l’aide du code suivant :

exports.fetchQRCodes = async (req, res) => {
  request.get(
    {
      url: `https://graph.facebook.com/${process.env.VERSION}/${process.env.BUSINESS_ACCOUNT_ID}/message_qrdls`,
      headers: {
        Authorization: `Bearer ${process.env.ACCESS_TOKEN}`
      }
    },
    function (err, resp, body) {
      if (err) {
        console.log("Error!");
      } else {
        res.json(JSON.parse(body));
      }
    }
  );
};

Une fois le code ajouté, testez l’API avec Postman. L’image ci-dessous montre à quoi ressemble la requête dans Postman :

La réponse fructueuse donne une série de codes QR et de liens courts.

Mise à jour des messages de code QR

La mise à jour d’un code QR est vraiment utile, car elle permet de mettre à jour le message sans modifier l’image du code QR. Cela vous évite de réimprimer ou de repartager de nouveaux codes QR. Cette fonctionnalité est particulièrement utile pour stocker des informations telles que des coordonnées et des détails promotionnels dans les codes QR.

Pour mettre à jour le message d’un code QR, vous devez connaître le code(id) du code QR créé, que vous pouvez transmettre comme paramètre de requête au point de terminaison /{BUSINESS_ACCOUNT_ID}/message_qrdls/{qr-code-id} .

Dans le fichier controllers/qrCode.js, mettez à jour la méthode updateQRCode à l’aide du code suivant :

exports.updateQRCode = async (req, res) => {
  const { message, qr-code-id } = req.body;
  if (!message || !qr-code-id) {
    return res.status(400).json({
      error: "Required Fields: message and id",
    });
  }
  request.post(
    {
      url: `https://graph.facebook.com/v14.0/${process.env.META_PHONE_ID}/message_qrdls/${qr-code-id}?prefilled_message=${message}`,
      headers: {
        Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
        "content-type": "application/json",
      }
    },
    function (err, resp, body) {
      if (err) {
        console.log("Error!");
      } else {
        res.json(JSON.parse(body));
      }
    }
  );
};

Lorsque vous testez le résultat dans Postman, cet objet de requête apparaît :

{
    "message":"This is my first Updated QR code",
    "id":"4WW67TGNCGPXB1"
}

La requête fructueuse renvoie le code mis à jour.

Suppression des codes QR

Comme les codes QR n’expirent pas, vous pouvez les supprimer lorsque les informations qu’ils contiennent sont obsolètes ou ne sont plus valables.

Vous devez tout d’abord envoyer une requête DELETE au point de terminaison /{BUSINESS_ACCOUNT_ID}/message_qrdls/{qr-code-id} .

Naviguez jusqu’à controllers/qrCode.js, puis mettez à jour la méthode deleteQRCode à partir de la méthode modèle en utilisant le code suivant :

exports.deleteQRCode = async (req, res) => {
  const { qr_code_id } = req.query;
  request.delete(
    {
      url: `https://graph.facebook.com/${process.env.VERSION}/${process.env.BUSINESS_ACCOUNT_ID}/message_qrdls/${qr_code_id}`,
      headers: {
        Authorization: `Bearer ${process.env.ACCESS_TOKEN}`
      }


    },
    function (err, resp, body) {
      if (err) {
        console.log("Error!");
      } else {
        res.json(JSON.parse(body));
      }
    }
  );
};

Dans ce cas, l’identifiant du code QR que vous voulez supprimer devient un paramètre de requête. La réponse fructueuse produit un objet JSON pour lequel la valeur « success » est définie sur « true ».

Il convient de noter qu’une fois le code QR supprimé, vous ne pouvez plus l’utiliser pour lancer une conversation et taper un message sans l’intervention de l’utilisateur·ice.

Conclusion

Dans ce tutoriel pratique, vous avez appris à créer, mettre à jour, récupérer et supprimer des codes QR et des liens courts avec la plateforme WhatsApp Business en utilisant l’API Cloud, hébergée par Meta. Nous vous avons également présenté plusieurs cas d’utilisation.

Les codes QR WhatsApp sont faciles à gérer et peuvent contribuer de différentes manières à accroître sensiblement les interactions avec votre clientèle. Grâce aux fonctionnalités de codes QR et liens courts de WhatsApp, rester en contact avec votre base d’utilisateur·ices n’a jamais été aussi facile.

Tags :

Outils professionnels Outils pour les développeur·ses Plateformes 2022 WhatsApp

ACTUALITÉS CONNEXES