Erstellen Sie eine Webanwendung zum Chatten mit den Nutzern Ihrer Facebook-Seite

Der Beitrag wurde aktualisiert und verwendet nun JavaScript Client SDK Version 8.3.0 das jetzt auch ausgehende Nachrichten verarbeiten kann.

Einführung

Die Messages API wird gerade in das Client SDK. Dies wird eine unkomplizierte Methode bieten, mit der Ihre Kunden über Facebook Messenger, WhatsApp, Viber und andere mit einer von Ihnen erstellten Anwendung kommunizieren können.

Am Ende dieses Blogbeitrags werden Sie eine Webanwendung haben, die in der Lage ist, Nachrichten von Ihrer Facebook-Seite und dem Messenger Ihrer Seite zu senden und zu empfangen. Es wird Beispielcode bereitgestellt und die relevanten Teile der Messages API-Integration werden erklärt.

Eine Facebook-Seite erstellen

Melden Sie sich bei Facebook an und erstellen Sie eine Test-Facebook-Seite. Sie können auch mit einer bereits bestehenden Seite testen.

Einrichten der Beispiel-Webanwendung

Erstellen Sie Ihre Kopie der Beispiel-Webanwendung, indem Sie diesen Glitch nachbauen. Um Ihre Anwendung einzurichten, folgen Sie den Schritten in der Readme-Datei. Die Beispielanwendung folgt dem Szenario eines Agenten, der sich in ein Dashboard einloggt, mit aktuellen Unterhaltungen zwischen Kunden der Facebook-Seite und dem Agenten. Auf der linken Seite finden alle Unterhaltungen statt, und der Agent kann einer davon beitreten.

Sample application's agent dashboard

Wenn der Agent auf eine Unterhaltung klickt, wird eine Chat-Anwendung mit dem Facebook-Nutzer in einem neuen Fenster geöffnet. Die Chat-Anwendung basiert auf der Anwendung, die im Anleitung zum Erstellen einer Chat-Anwendung.

Chat application demo

Verknüpfen Sie Ihre Facebook-Seite mit Ihrer Vonage-Anwendung

Alles, was von der Einrichtung übrig bleibt, ist, Ihre Facebook-Seite mit der Webanwendung zu verbinden, damit sie miteinander kommunizieren können. Hier sind die Schritte:

• Anmeldung beim Vonage Dashboard

• Klicken Sie unter "Nachrichten und Versand" auf "Soziale Kanäle".

Vonage Dashboard Messages and Dispatch menu

• Klicken Sie auf der Seite "Soziale Kanäle" auf Facebook Messenger

Vonage Dashboard Social channels section

• Folgen Sie den Schritten, um Ihre Facebook-Seite mit Ihrem Vonage Account zu verbinden

Connect Facebook Page

• Wählen Sie die Facebook-Seite(n), die Sie mit Vonage verbinden möchten

Select a Facebook Page

• Verify, dass du den richtigen Facebook Account verwendest

Continue as user

• Überprüfen Sie die Berechtigungen für Vonage

Ask for permissions

• Bestätigung, dass die Verbindung zu Vonage erfolgreich hergestellt werden konnte

Confirmation of Facebook Page being successfully linked

• Wählen Sie eine Facebook-Seite, die mit Vonage verknüpft wurde, und schließen Sie die Einrichtung ab

Select your Facebook Business Page

• Glückwunsch, Ihre Facebook-Seite wurde erfolgreich verbunden

Confirmation that Facebook Business page was successfully connected

• Jetzt, da Vonage über Ihre Facebook-Seite Bescheid weiß, können wir uns mit Ihrer Vonage-Applikation verbinden, die Sie beim Einrichten des Beispiels mit Glitch erstellt haben. Klicken Sie entweder auf "Link to an application" oder gehen Sie zum Abschnitt Applications im Dashboard.

Your applications

• Wählen Sie die Anwendung aus, die Sie beim Einrichten des Glitch-Beispiels erstellt haben, und klicken Sie dann auf "Link".

Application details

Application details with Facebook page linked

Probieren Sie es aus

Platzieren Sie die Webanwendung in einem Browserfenster und öffnen Sie Facebook Messenger in einem anderen und melden Sie sich gegebenenfalls an. Wenn Sie es noch nicht getan haben, geben Sie in der Webanwendung einen Namen ein, um das Dashboard zu betreten. Stellen Sie sich das als Ihren Namen oder den Namen eines Agenten vor, es ist nur eine einfache Möglichkeit, sich "einzuloggen". Suchen Sie nun im Messenger die Facebook-Seite, die Sie mit der Anwendung verknüpft haben, und senden Sie eine Nachricht. In dem Fenster mit Ihrer Webanwendung sollte im Abschnitt "Alle Gespräche" eine kleine Karte erscheinen. Klicken Sie auf "Beitreten", es öffnet sich eine Chat-Anwendung, und Sie sollten die Nachricht im Chat sehen. Senden Sie eine Nachricht von der Chat-Anwendung aus, und sie sollte in Ihrem Facebook Messenger erscheinen.

Was ist passiert?

Werfen wir einen Blick auf den Code, mit dem dies möglich ist. Wenn ein Nutzer eine Nachricht an Ihre Facebook-Seite sendet, wird diese von Vonage an den Inbound-Webhook Ihrer Webanwendung gesendet. Der Webhook gibt ein Objekt zurück, das Vonage mitteilt, wie die Nachricht zu behandeln ist. In diesem Fall senden wir Informationen zurück, die die Client SDK Messages API Integration benötigt, um den Facebook-Nutzer mit Ihrer Webanwendung zu verbinden und eine Unterhaltung zu führen. Dazu gehören die Kennung des Facebook-Benutzers und der Name der Unterhaltung (den wir als Kennung des Facebook-Benutzers festlegen, damit er eindeutig ist).

// 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",
    },
  ]);  
});

Wenn dies das erste Mal ist, dass der Facebook-Nutzer eine Nachricht sendet, wird eine neue Unterhaltung erstellt. Diese sendet ein conversation:created Ereignis, auf das wir mit dem Ereignis-Webhook warten. Das Backend der Webanwendung nimmt dieses Ereignis und verpackt es in ein benutzerdefiniertes Ereignis, custom:new_convdas verwendet werden kann, um dem Dashboard des Agenten mitzuteilen, dass die neue Konversation angezeigt wird.

// 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'});
});

Im Code für die Chat-Anwendung gibt es einen message Ereignis-Listener, der ausgelöst wird, wenn eine Nachricht von einem Facebook-Benutzer eingeht. Er nimmt dann die Nachricht auf und fügt sie der Chat-Anzeige hinzu.

// 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;
});

Wenn der Agent dem Facebook-Nutzer antwortet, handelt es sich um eine ausgehende Nachricht. Das Client SDK hat eine sendMessage Methode mit einer "message_type": "text" um die Nachricht des Agenten zu senden. Damit kümmert sich Vonage um alles, was erforderlich ist, um die Nachricht an den Facebook-Benutzer zu senden.

// 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 = '';
});

Um den Chat noch ein wenig persönlicher zu gestalten, wird der Name der Facebook-Seite oben im Chat angezeigt. Um dies zu erhalten, wird eine Anfrage an den Endpunkt des Servers getChatAppAccounts Endpunkt des Servers gestellt, der einen Aufruf an die Vonage chatapp-accounts API mit einem Admin-JWT aufruft. Der Name der Facebook-Seite ist in der Antwort enthalten, die wir an den Client zurücksenden.

Kleiner Irrtum

Wenn Ihre ausgehenden Nachrichten plötzlich nicht mehr funktionieren, überprüfen Sie Ihr Serverprotokoll auf Fehler. Wenn Sie auf einen Fehler stoßen, der dies enthält:

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

Das bedeutet, dass Ihr Facebook-Seiten-Token abgelaufen ist und erneuert werden muss. Loggen Sie sich in das Vonage Dashboard ein und gehen Sie zu Nachrichten und Versand, dann Social Channels. Neben Ihrer Facebook-Seite sollte eine Schaltfläche zur Aktualisierung Ihres Tokens angezeigt werden.

Schlussfolgerung

Das war's! Mit der in das Client SDK integrierten Messages API ist es viel einfacher, von Ihrer eigenen Webanwendung aus mit einem Facebook-Nutzer zu kommunizieren.

Nächste Schritte

Bitte werfen Sie einen Blick auf unsere Client SDK-Dokumentation. Dort finden Sie weitere Informationen zu den Methoden, die zur Erstellung des Agent Dashboard verwendet werden, sowie Tutorials, Anleitungen und vieles mehr. Sind Sie auf Probleme mit der Demo-Anwendung gestoßen? Möchten Sie neue Funktionen hinzufügen? Wenn Sie Fragen, Kommentare und/oder Feedback haben, lassen Sie es uns bitte in unserem Slack-Kanal der Gemeinschaft.