Assurez-vous d\u2019avoir trois \u00e9l\u00e9ments \u00e0 port\u00e9e de main\u00a0:<\/p>\n\n
- \n
- Un ID WhatsApp\u00a0Business<\/li>\n\n\n\n
- Un ID de num\u00e9ro de t\u00e9l\u00e9phone ou un ID de t\u00e9l\u00e9phone de test.<\/li>\n\n\n\n
- Votre token d\u2019utilisateur syst\u00e8me avec les autorisations requises ci-dessous\u00a0:<\/li>\n<\/ul>\n\n
(whatsapp_business_management, whatsapp_business_messaging et business_management).<\/p>\n\n
Si vous \u00eates impatient\u00b7e de voir l\u2019application finale, vous pouvez consulter le code du projet final<\/a>.<\/p>\n\n
Cr\u00e9ation d\u2019une application de base<\/h4>\n\n
Pour cette d\u00e9monstration, vous utiliserez ce squelette de base Node.js et ce serveur Express.js avec les d\u00e9pendances et les fonctions squelette n\u00e9cessaires d\u00e9j\u00e0 cr\u00e9\u00e9es.<\/p>\n\n
Le tutoriel comprend \u00e9galement un package de requ\u00eates<\/u><\/a> pour effectuer des requ\u00eates HTTP pendant la communication entre votre application et une API. Le fichier .env de l\u2019application comporte deux\u00a0variables\u00a0:<\/p>\n\n
META_AUTH_TOKEN et MESSAGING_PRODUCT.<\/p>\n\n
![\"Explorer](\"https:\/\/whatsappbusiness.com\/wp-content\/uploads\/2026\/03\/image1.png\")
<\/figure>\n\nApr\u00e8s avoir configur\u00e9 le serveur, vous pouvez passer directement \u00e0 la cr\u00e9ation de l\u2019API.<\/p>\n\n
Importer une image pour un message multim\u00e9dia<\/h4>\n\n
Avant de pouvoir envoyer des messages multim\u00e9dias via WhatsApp, vous devez importer des fichiers multim\u00e9dias auxquels WhatsApp pourra acc\u00e9der ult\u00e9rieurement. Les fichiers m\u00e9dia import\u00e9s sur WhatsApp sont conserv\u00e9s pendant 30\u00a0jours, \u00e0 moins que vous ne les supprimiez.<\/p>\n\n
Vous devez cr\u00e9er une nouvelle route POST dans le fichier routes\/media.js que vous pouvez utiliser pour g\u00e9rer votre contenu multim\u00e9dia. Selon la documentation <\/u><\/a>, quatre\u00a0\u00e9l\u00e9ments doivent \u00eatre transmis\u00a0:<\/p>\n\n
- \n
- L\u2019ID du num\u00e9ro de t\u00e9l\u00e9phone, que vous transmettez en tant que param\u00e8tre.<\/li>\n\n\n\n
- Fichier que vous souhaitez importer et que vous transmettez en tant que donn\u00e9es de formulaire.<\/li>\n\n\n\n
- Type d\u2019importation de fichier, que vous g\u00e9n\u00e9rez \u00e0 l\u2019aide de la fonction d\u2019assistance.<\/li>\n\n\n\n
- Le produit de messagerie, que vous obtenez \u00e0 partir du fichier .env.<\/li>\n<\/ul>\n\n
Cependant, pour cr\u00e9er un appel d\u2019API, vous avez uniquement besoin d\u2019un ID et d\u2019un fichier de num\u00e9ro de t\u00e9l\u00e9phone. Les champs restants sont g\u00e9n\u00e9r\u00e9s \u00e0 l\u2019aide des fonctions d\u2019assistance.<\/p>\n\n
Vous utilisez le package npm formidable<\/u><\/a> pour traiter les donn\u00e9es du formulaire. Notez que l\u2019API WhatsApp\u00a0Business comporte certaines limitations concernant certains types et certaines tailles. Vous pouvez consulter la section Types de contenu multim\u00e9dia pris en charge en bas de la documentation sur le contenu multim\u00e9dia<\/u><\/a>. Le fichier helper\/validations.js du projet de squelette contient deux\u00a0fonctions d\u2019assistance con\u00e7ues \u00e0 cet effet.<\/p>\n\n
Pour importer une image, vous devez initialiser un nouveau formulaire. \u00c0 l\u2019aide de l\u2019objet form, analysez le fichier et effectuez quelques validations \u00e0 l\u2019aide des fonctions d\u2019assistance. Ensuite, effectuez une requ\u00eate POST avec les donn\u00e9es du formulaire et un token d\u2019authentification valide \u00e0 l\u2019aide de la requ\u00eate.<\/p>\n\n
exports.uploadMedia = async (req, res) => { let form = new formidable.IncomingForm(); form.keepExtensions = true; form.parse(req, async (err, fields, files) => { if (err) { return res.status(400).json({ error: \"Media could not be uploaded\", }); } if (!files.file) { return res.status(400).json({ error: \"Media File is required\", }); } let isFileValidSize = validateMediaSize(files.file.size, files.file.type); if (!isFileValidSize) { return res.status(400).json({ error: `Media File size should be less than ${mediaLimits( files.file.type )}`, }); } request.post( { url: `https:\/\/graph.facebook.com\/v13.0\/${req.params.id}\/media`, formData: { file: { value: fs.createReadStream(files.file.path), options: { filename: files.file.name, contentType: files.file.type, }, }, type: files.file.type, messaging_product: process.env.MESSAGING_PRODUCT, }, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, \"content-type\": \"multipart\/form-data\", }, }, function (err, resp, body) { if (err) { console.log(\"Error!\"); } else { res.json(JSON.parse(body)); } } ); }); };<\/code><\/pre>\n\nApr\u00e8s avoir ajout\u00e9 cette fonction, vous pouvez tester cette route \u00e0 l\u2019aide de Postman. Voici \u00e0 quoi devrait ressembler l\u2019objet final dans l\u2019interface de Postman\u00a0:<\/p>\n\n
![\"Image](\"https:\/\/whatsappbusiness.com\/wp-content\/uploads\/2026\/03\/image3.png\")
<\/figure>\n\nUne fois que vous avez cliqu\u00e9 sur Envoyer<\/b>, l\u2019API vous renvoie l\u2019identifiant de contenu multim\u00e9dia import\u00e9.<\/p>\n\n
![\"Image](\"https:\/\/whatsappbusiness.com\/wp-content\/uploads\/2026\/03\/image5.png\")
<\/figure>\n\nNotez l\u2019ID de contenu multim\u00e9dia import\u00e9, car nous l\u2019utiliserons ult\u00e9rieurement dans ce tutoriel. Si vous cr\u00e9ez une application avec une couche de donn\u00e9es, vous pouvez stocker cet ID dans votre base de donn\u00e9es pour une utilisation ult\u00e9rieure. Votre application front-end peut aussi stocker l\u2019ID temporairement dans les variables ou l\u2019\u00e9tat.<\/p>\n\n
Envoi d\u2019un message multim\u00e9dia<\/h4>\n\n
Utilisez maintenant l\u2019ID de contenu multim\u00e9dia que vous avez r\u00e9cup\u00e9r\u00e9 \u00e0 l\u2019\u00e9tape pr\u00e9c\u00e9dente pour envoyer un message multim\u00e9dia \u00e0 la cliente ou au client. Selon la r\u00e9f\u00e9rence de l\u2019API<\/u><\/a>, vous devez envoyer cinq\u00a0\u00e9l\u00e9ments \u00e0 l\u2019API pour que l\u2019envoi du message multim\u00e9dia \u00e0 la client\u00e8le soit une r\u00e9ussite\u00a0:<\/p>\n\n
- \n
- ID du num\u00e9ro de t\u00e9l\u00e9phone transmis en tant que param\u00e8tre<\/li>\n\n\n\n
- Num\u00e9ro de t\u00e9l\u00e9phone du client ou de la cliente envoy\u00e9 dans le corps de la requ\u00eate<\/li>\n\n\n\n
- Type de contenu multim\u00e9dia envoy\u00e9 dans le corps de la requ\u00eate<\/li>\n\n\n\n
- ID du contenu multim\u00e9dia envoy\u00e9 dans le corps de la requ\u00eate<\/li>\n\n\n\n
- Type de destinataire, dans notre cas, une personne<\/li>\n<\/ul>\n\n
La fonction se pr\u00e9sente comme suit\u00a0:<\/p>\n\n
exports.sendMediaMessage = async (req, res) => { const { id, to, type } = req.body; if (!id || !to || !type) { return res.status(400).json({ error: \"Required Fields: to, type and id\", }); } request.post( { url: `https:\/\/graph.facebook.com\/v13.0\/${req.params.id}\/messages`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, \"content-type\": \"application\/json\", }, body: `{ \"messaging_product\": \"whatsapp\", \"recipient_type\": \"individual\", \"to\": \"${to}\", \"type\": \"${type}\", \"${type}\": { \"id\": \"${id}\", }, }`, }, function (err, resp, body) { if (err) { console.log(\"Error!\"); } else { res.json(JSON.parse(body)); } } ); };<\/code><\/pre>\n\nSi vous ex\u00e9cutez ce point de terminaison dans Postman, avec les d\u00e9tails et les arguments requis, voici \u00e0 quoi ressemble la requ\u00eate.<\/p>\n\n
![\"Image](\"https:\/\/whatsappbusiness.com\/wp-content\/uploads\/2026\/03\/image6.png\")
<\/figure>\n\nApr\u00e8s l\u2019envoi, le r\u00e9sultat suivant appara\u00eet dans Postman, avec l\u2019ID du message.<\/p>\n\n
![\"Image](\"https:\/\/whatsappbusiness.com\/wp-content\/uploads\/2026\/03\/image7.png\")
<\/figure>\n\nAfficher les \u00e9l\u00e9ments multim\u00e9dias<\/h4>\n\n
La r\u00e9cup\u00e9ration de l\u2019URL du contenu multim\u00e9dia est facile \u00e0 effectuer avec l\u2019op\u00e9ration GET et l\u2019ID du contenu multim\u00e9dia r\u00e9cup\u00e9r\u00e9 ou stock\u00e9.<\/p>\n\n
exports.getMediaUrl = async (req, res) => { request.get( { url: `https:\/\/graph.facebook.com\/v13.0\/${req.params.id}`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, }, }, function (err, resp, body) { if (err) { console.log(\"Error!\"); } else { res.json(JSON.parse(body)); } } ); };<\/code><\/pre>\n\nVoici \u00e0 quoi ressemblent la requ\u00eate et la r\u00e9ponse Postman apr\u00e8s la r\u00e9cup\u00e9ration de l\u2019\u00e9l\u00e9ment multim\u00e9dia.<\/p>\n\n
![\"Image](\"https:\/\/whatsappbusiness.com\/wp-content\/uploads\/2026\/03\/image4.png\")
<\/figure>\n\nSupprimer du contenu multim\u00e9dia<\/h4>\n\n
Pour supprimer un m\u00e9dia, vous utiliserez le m\u00eame point de terminaison de l\u2019API\u00a0WhatsApp pour les requ\u00eates li\u00e9es aux m\u00e9dias avec l\u2019op\u00e9ration DELETE.<\/p>\n\n
exports.deleteMedia = async (req, res) => { request.delete( { url: `https:\/\/graph.facebook.com\/v13.0\/${req.params.id}`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, }, }, function (err, resp, body) { if (err) { console.log(\"Error!\"); } else { res.json(JSON.parse(body)); } } ); };<\/code><\/pre>\n\nUne fois la suppression effectu\u00e9e, l\u2019API renvoie la r\u00e9ponse suivante\u00a0:<\/p>\n\n
![\"Image](\"https:\/\/whatsappbusiness.com\/wp-content\/uploads\/2026\/03\/image2.png\")
<\/figure>\n\nEn savoir plus sur la plateforme WhatsApp\u00a0Business<\/h4>\n\n
Ce tutoriel n\u2019est qu\u2019un exemple de ce que vous pouvez faire avec la plateforme WhatsApp\u00a0Business. Lors de la planification de votre prochain projet, consultez la documentation de la plateforme WhatsApp\u00a0Business<\/u><\/a> pour comprendre toutes ses fonctionnalit\u00e9s et limites en mati\u00e8re de contenu multim\u00e9dia.<\/p>\n\n
Gardez \u00e0 l\u2019esprit les informations suivantes\u00a0:<\/p>\n\n
- \n
- Le contenu multim\u00e9dia import\u00e9 n\u2019est conserv\u00e9 que pendant 30\u00a0jours<\/li>\n\n\n\n
- Les URL de t\u00e9l\u00e9chargement g\u00e9n\u00e9r\u00e9es ne sont valides que pendant cinq\u00a0minutes.<\/li>\n\n\n\n
- Enregistrez toujours l\u2019ID du contenu multim\u00e9dia lorsque vous importez un fichier.<\/li>\n<\/ul>\n\n
Voici une liste des types de contenu multim\u00e9dia actuellement pris en charge. Consultez la page Types de contenu multim\u00e9dia pris en charge<\/u><\/a> pour plus d\u2019informations.<\/p>\n\n
- \n
- Audio (<\u00a016\u00a0Mo)\u00a0: formats\u00a0ACC, MP4, MPEG, AMR et OGG<\/li>\n\n\n\n
- Documents (<\u00a0100\u00a0Mo)\u00a0: textes, PDF, Office et Open\u00a0Office<\/li>\n\n\n\n
- Images (<\u00a05\u00a0Mo)\u00a0: formats JPEG et PNG<\/li>\n\n\n\n
- Vid\u00e9o (<\u00a016\u00a0Mo)\u00a0: formats MP4 et 3GP<\/li>\n\n\n\n
- Stickers (<100\u00a0Ko)\u00a0: format WebP<\/li>\n<\/ul>\n\n
Conclusion<\/h4>\n\n