Créez une application Web pour discuter avec les utilisateurs de votre page Facebook

Le poste a été mis à jour pour utiliser Client SDK JavaScript version 8.3.0 qui peut désormais gérer les messages sortants.

Introduction

L'API Messages API est en cours d'intégration dans le Client SDK. Cela fournira une méthode directe où vos clients, via Facebook Messenger, WhatsApp, Viber, et plus encore, peuvent communiquer avec une application que vous créez.

À la fin de ce billet de blog, vous aurez une application web capable d'envoyer et de recevoir des messages depuis votre page Facebook et le Messenger de votre page. Un exemple de code sera fourni et les parties pertinentes à l'intégration de l'API Messages seront expliquées.

Créer une page Facebook

Connectez-vous à Facebook et créer une page Facebook de test. Vous pouvez également tester une page qui existe déjà.

Mise en place de l'exemple d'application web

Faites votre copie de l'exemple d'application web en remixant ce Glitch. Pour configurer votre application, suivez les étapes du fichier readme. L'exemple d'application suit le scénario d'un agent se connectant à un tableau de bord, avec des conversations en cours entre les clients de la page Facebook et l'agent. Sur le côté gauche se trouvent toutes les conversations, et l'agent peut en rejoindre une.

Sample application's agent dashboard

Lorsque l'agent clique sur une conversation, une application de chat avec l'utilisateur Facebook s'ouvre dans une nouvelle fenêtre. L'application de chat est basée sur celle créée dans le tutoriel sur la création d'une application de chat. Tutoriel sur la création d'une application de chat.

Chat application demo

Liez votre page Facebook à votre application Vonage

Il ne reste plus qu'à connecter votre page Facebook à l'application web pour qu'elles puissent communiquer entre elles. Voici les étapes à suivre :

• Connectez-vous au tableau de bord Vonage

• Sous "Messages et envoi", cliquez sur "Canaux sociaux".

Vonage Dashboard Messages and Dispatch menu

• Sur la page "Canaux sociaux", cliquez sur Facebook Messenger

Vonage Dashboard Social channels section

• Suivez les étapes pour connecter votre page Facebook à votre Account Vonage

Connect Facebook Page

• Sélectionnez la(les) page(s) Facebook à connecter à Vonage

Select a Facebook Page

• Verify you are using the correct Facebook account (Vérifiez que vous utilisez le bon compte Facebook)

Continue as user

• Examiner les autorisations accordées à Vonage

Ask for permissions

• Confirmation que Vonage a pu être relié avec succès

Confirmation of Facebook Page being successfully linked

• Sélectionnez une page Facebook qui a été liée à Vonage et terminez la configuration.

Select your Facebook Business Page

• Félicitations, votre page Facebook a été connectée avec succès

Confirmation that Facebook Business page was successfully connected

• Maintenant que Vonage connaît votre page Facebook, connectons-nous à votre application Vonage qui a été créée lorsque vous avez configuré l'échantillon avec Glitch. Soit vous cliquez sur "Lier à une application", soit vous allez dans la section Applications du tableau de bord.

Your applications

• Sélectionnez l'application que vous avez créée lors de la mise en place de l'échantillon Glitch, puis cliquez sur "Link".

Application details

Application details with Facebook page linked

Essayez-le

Placez l'application web dans une fenêtre de navigateur et ouvrez Facebook Messenger dans une autre et connectez-vous si nécessaire. Si vous ne l'avez pas encore fait, saisissez un nom dans l'application web pour entrer dans le tableau de bord. Pensez à votre nom ou à celui d'un agent, il s'agit simplement d'un moyen de "se connecter". Maintenant, dans Messenger, trouvez la page Facebook que vous avez liée à l'application et envoyez un message. Dans la fenêtre avec votre application web, une petite carte devrait apparaître dans la section "Toutes les conversations". Cliquez sur rejoindre, une application de chat s'ouvrira, et vous devriez voir le message dans le chat. Envoyez un message depuis l'application de chat, et il devrait apparaître dans votre Facebook Messenger.

Ce qui se passe

Jetons un coup d'œil au code nécessaire pour réaliser ce qui précède. Lorsqu'un utilisateur envoie un message à votre page Facebook, celui-ci est envoyé par Vonage au webhook entrant de votre application web. Le webhook renvoie un objet qui permet à Vonage de savoir comment traiter le message. Dans ce cas, nous renvoyons les informations dont le Client SDK Messages API Integration a besoin pour connecter l'utilisateur Facebook à votre application Web afin d'établir une conversation. Ces informations comprennent l'identifiant de l'utilisateur Facebook et le nom de la conversation (que nous définissons comme l'identifiant de l'utilisateur Facebook afin qu'il soit unique).

// server.js
app.post("/webhooks/inbound", (request, response) => {
  // By responding to the inbound message callback with this action you add -
  // the message to a conversation so the agent client side will be notified about it
  response.status(200).send([
    {
      action: "message",
      // Creating a new conversation for every NEW incoming user.
      // Messages from the same user will be tagged to the same conversation
      conversation_name: request.body.from,
      user: request.body.from,
      geo: "region-code",
    },
  ]);  
});

Si c'est la première fois que l'utilisateur de Facebook envoie un message, une nouvelle conversation est créée. Cela émet un événement conversation:created que nous écoutons sur le webhook des événements. Le backend de l'application web prend cet événement et le reconditionne en tant qu'événement personnalisé, custom:new_convqui peut être utilisé pour notifier le tableau de bord de l'agent d'afficher la nouvelle conversation.

// server.js
app.post("/webhooks/rtcevent", (request, response) => {
   ...
  // If Facebook user is new, a new conversation should be created, so listen for it here 
  // and then send the custom event to the Agents Conversation
  if (request.body.type === "conversation:created"){
    vonage.conversations.events.create(process.env.AGENTS_CONV_ID, {
      "type": "custom:new_conv",
      "from": "system",
      "body": request.body
    },
    (error, result) => {
      if (error) {
        console.error(error);
      } else {
        console.log(result);
      }
    });
  }
  response.status(200).send({code:200, status: 'got rtcevent request'});
});

Dans le code de l'application de chat, il y a un message qui se déclenche lorsqu'un message est reçu de l'utilisateur Facebook. Il prend ensuite le message et l'ajoute à l'affichage de la discussion.

// public/chat.js
// Adding conversation.id here in the on. means that we're filtering events to only the ones regarding this conversation. (it's called grouping)
conversation.on('message', conversation.id, (from, event) => {
  console.log('message-received sender: ', from);
  console.log('message-reveived event: ', event);
  const formattedMessage = formatMessage(from, event, conversation.me);
  // Update UI
  messageFeed.innerHTML = messageFeed.innerHTML + formattedMessage;
  messagesCountSpan.textContent = messagesCount;
});

Lorsque l'agent répond à l'utilisateur de Facebook, il s'agit d'un message sortant. Le Client SDK dispose d'une méthode sendMessage avec une méthode "message_type": "text" pour envoyer le message de l'agent. Vonage s'occupe alors de tout ce qui est nécessaire pour envoyer le message à l'utilisateur de Facebook.

// public/chat.js
// Listen for clicks on the submit button and send the existing text value
sendButton.addEventListener('click', async () => {
  conversation.sendMessage({
    "message_type": "text",
    "text": messageTextarea.value
  }).then((event) => {
    console.log("message was sent", event);
  }).catch((error)=>{
    console.error("error sending the message ", error);
  });
  messageTextarea.value = '';
});

Pour ajouter un peu plus de personnalisation, nous affichons le nom de la page Facebook en haut du chat. Pour ce faire, une demande est faite au point d'extrémité getChatAppAccounts du serveur qui fait un appel à l'API chatapp-accounts de Vonage avec un JWT d'administrateur. Le nom de la page Facebook se trouve dans la réponse, que nous renvoyons au client.

Petite erreur

Si vos messages sortants cessent soudainement de fonctionner, vérifiez si le journal de votre serveur contient des erreurs. Si vous rencontrez une erreur contenant ce message :

status: 'rejected',
error: { reason: 'Expired access Token', code: 1370 }

Cela signifie que le jeton de votre page Facebook a expiré et qu'il doit être actualisé. Connectez-vous au tableau de bord de Vonage et allez à Messages et répartition, puis Chaînes sociales. Un bouton devrait se trouver à côté de votre page Facebook pour rafraîchir votre jeton.

Conclusion

Et voilà ! Grâce à l'API Messages intégrée au Client SDK, il est beaucoup plus facile de communiquer avec un utilisateur de Facebook à partir de votre propre application web.

Prochaines étapes

Veuillez consulter notre Client SDK documentation. Vous y trouverez de plus amples informations sur les méthodes utilisées pour créer le tableau de bord de l'agent, ainsi que des tutoriels, des guides et bien d'autres choses encore. Vous avez rencontré des problèmes avec l'application de démonstration ? Vous souhaitez ajouter de nouvelles fonctionnalités ? Si vous avez des questions, des commentaires ou un retour d'expérience, n'hésitez pas à nous en faire part dans notre canal Slack de la communauté.