Exemple d’expérience de prise en charge d’Instagram par l’API Messenger - Original Coast Clothing
Original Coast Clothing (OC) est une marque de vêtements fictive créée pour présenter les principales fonctionnalités de la plateforme Instagram et offrir une expérience clientèle de qualité. En s’inspirant de cette démo, tout le monde peut créer une expérience agréable de prise en charge d’Instagram par l’API Messenger, qui exploite à la fois l’automatisation et le support clientèle en direct. Nous vous fournissons le code Open Source de l’application et un guide de déploiement de l’expérience sur votre environnement local ou sur votre serveur distant. Nous vous proposons également un exemple d’expérience Messenger associée. Pour l’essayer tout de suite, envoyez un message @originalcoastclothing ou commentez une publication. |  |
Fonctionnalités de la plateforme
Cette expérience exploite les fonctionnalités suivantes de la plateforme. Si vous décidez de déployer l’expérience sur votre Page, le code les utilisera toutes :
- Messagerie
- Texte, image et aperçus de liens
- Modèles génériques
Déployer cette expérience sur Instagram
À la fin de ce guide, vous aurez une app Instagram complète qui fonctionnera sur votre serveur et répondra aux messages de votre compte.
Le code qui alimente cette expérience est du code Open Source. C’est un excellent point de départ accessible à tous pour développer une expérience de messagerie de qualité.
Le code est publié sous licence BSD, ce qui vous permet de l’utiliser librement pour répondre à vos besoins. Il est hébergé sur GitHub pour plus d’informations.
Éléments requis pour déployer une application Instagram
- Un compte professionnel Instagram (compte créateur ou compte business).
- Une Page Facebook connectée à ce compte Instagram. Assurez-vous de disposer d’une Page Facebook qui représente l’identité de votre compte professionnel Instagram lorsque vous entrez en contact avec des utilisateurs. Pour créer une Page, consultez https://www.facebook.com/pages/create. Vous pouvez également configurer une Page test pour commencer.
- Un compte de développeur Facebook autorisé à exécuter des tâches sur votre Page. Ce compte vous permet de créer des applications qui sont au cœur de toute intégration Facebook. Vous pouvez créer un compte de développeur en accédant au site web Facebook for Developers et en cliquant sur le bouton « Démarrer ».
- Une application Facebook dont les paramètres de base sont configurés. Pour créer une application, consultez https://developers.facebook.com/ et cliquez sur Ajouter une nouvelle application.
Étapes de configuration
L’objectif de cette section est de rassembler tous les tokens d’accès et tous les identifiants nécessaires pour que l’app Instagram puisse envoyer et recevoir des messages. Avant de commencer, assurez-vous d’avoir rempli toutes les conditions requises répertoriées ci-dessus. À ce stade, vous devriez disposer d’une Page, d’une application enregistrée sur Facebook et d’un compte professionnel Instagram.
Si vous venez de créer une application Facebook, celle-ci est probablement en mode développement. Notez que les applications de ce mode sont uniquement autorisées à envoyer des messages aux personnes connectées à l’application (administrateur·trices, développeur·euses et testeur·euses). Vous pouvez continuer à utiliser ce guide dans ce mode, mais une fois que votre application est prête à être publiée, celle-ci doit passer le Contrôle app pour obtenir l’autorisation instagram_manage_messages. Pour plus d’informations, consultez Contrôle app.
- Configurez votre intégration Instagram en suivant les instructions de la documentation Démarrer.
- Ajoutez quelques comptes Instagram de test qui vous permettront de tester l’expérience.
Vous devriez maintenant disposer des éléments suivants :
- ID d’application
- Clé secrète
- ID de la Page
- Token d’accès de Page
- Compte Instagram connecté à la Page
- Compte(s) Instagram enregistré(s) comme comptes de test
Déployer en un clic avec Heroku ou Glitch
Vous pouvez déployer l’expérience automatiquement sur Heroku ou Glitch à l’aide des boutons suivants. Vous serez invité à saisir les variables d’environnement requises pour la configuration.
Déployer sur HerokuDéployer sur GlitchDéployer localement avec ngrok
Ce service crée un tunnel reliant votre serveur web local à une URL externe que les webhooks Facebook peuvent atteindre. Il existe de nombreux services de ce type. Dans cet exemple, nous utiliserons ngrok.
1. Cloner le dépôt
Clonez le dépôt sur votre machine locale :
git clone https://github.com/fbsamples/original-coast-clothing-ig.git cd original-coast-clothing-ig
2. Installer le service de tunnel
Si ce n’est pas déjà fait, installez ngrok en le téléchargeant ou à l’aide de la commande suivante :
$ npm install -g ngrok
Dans le répertoire de ce dépôt, demandez un tunnel d’accès à votre serveur local sur le port souhaité :
$ ngrok http 3000
L’écran doit afficher l’état du service ngrok :
Session Status online
Account Redacted (Plan:iuluufkccebegkhifrlgfhudrtbthgln Free)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://1c3b838deacb.ngrok.io -> http://localhost:3000
Forwarding https://1c3b838deacb.ngrok.io -> http://localhost:3000
Notez l’URL https du serveur externe qui est transféré vers votre machine locale. Dans l’exemple précédent, il s’agit de https://1c3b838deacb.ngrok.io.
3. Installer les dépendances
Ouvrez un nouvel onglet de terminal, toujours dans le répertoire du dépôt.
$ npm install
Si vous le souhaitez, vous pouvez plutôt utiliser Yarn :
$ yarn install
4. Configurer le fichier .env
Copiez le fichier .sample.env sous le nom .env
$ cp .sample.env .env
Modifiez le fichier .env pour y indiquer toutes les valeurs de votre app et de votre Page.
5. Exécuter votre app localement
$ node app.js
Vous pouvez maintenant accéder à la page par défaut de l’application dans votre navigateur à l’adresse http://localhost:3000.
Vérifiez que vous pouvez également accéder à l’application via l’URL externe obtenue à l’étape 2.
Déployer avec Heroku
1. Cloner le dépôt
Clonez le dépôt sur votre machine locale :
git clone https://github.com/fbsamples/original-coast-clothing-ig.git cd original-coast-clothing-ig
2. Installer l’interface de ligne de commande d’Heroku
Si le répertoire n’est pas encore un dépôt git, créez-en-un :
$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "My first commit"
3. Installer l’interface de ligne de commande d’Heroku
Si ce n’est pas déjà fait, téléchargez et installez l’interface de ligne de commande d’Heroku.
4. Créer une app à partir de la CLI
$ heroku apps:create
Creating app... done, ⬢ mystic-wind-83
Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git
Notez le nom donné à votre app. Dans cet exemple, il s’agissait de mystic-wind-83.
5. Définir vos variables d’environnement
Dans l’Espace App d’Heroku, localisez votre application et définissez les variables d’environnement en suivant les instructions données dans les commentaires du fichier .sample.env.
Vous pouvez aussi définir les variables d’environnement depuis la ligne de commande comme suit :
$ heroku config:set PAGE_ID=XXXX
6. Déployer le code
$ git push heroku master
7. Afficher la sortie du journal
$ heroku logs --tail
Connecter votre webhook
Maintenant que le serveur s’exécute, votre point de terminaison webhook est associé au chemin d’accès /webhook. Dans l’exemple Heroku ci-dessus, il s’agit de http://mystic-wind-83.herokuapp.com/webhook.
Configurez votre webhook en suivant le [guide sur les Webhooks de la plateforme Messenger](https://developers.facebook.com/docs/messenger-platform/webhooks)
Une fois l’abonnement au webhook validé, abonnez-vous aux évènements suivants :
- comments
- messages
- messaging_postbacks
Pour tester les webhooks, cliquez sur les boutons Tester associés aux évènements auxquels vous êtes abonné. Les évènements de test devraient apparaître dans la sortie du journal de votre serveur.
Tester la configuration de votre application
Connectez-vous à un compte possédant le rôle de testeur Instagram, puis tentez d’envoyer un message au compte Instagram connecté à votre Page ou de laisser un commentaire sur une publication.
Si vous voyez une réponse à votre message apparaître dans Instagram, cela signifie que votre application est bien configurée. Voilà !
Dépannage
L’app ne répond à personne d’autre que moi
L’app Facebook est probablement encore en mode développement. Vous pouvez ajouter une personne en tant que testeur·euse de l’application. Si elle accepte, l’application pourra lui envoyer un message. Dès que cela est fait, vous pouvez demander l’autorisation instagram_manage_messages afin de pouvoir répondre à tout le monde.
Autres problèmes
Ce guide comporte des erreurs ? Signalez-nous le problème rencontré.