Erstellen Sie einen einfachen Kundensupport-Kanal mit WhatsApp und Laravel

Einer der jüngsten Trends im Bereich des Kundensupports ist die Einrichtung eines speziellen Multikanal-Live-Supports. Vor zehn Jahren wäre dies höchstwahrscheinlich eine Pop-up-Box in der unteren rechten Ecke Ihrer Website gewesen, aber es wird immer beliebter, Interaktionen über Plattformen wie WhatsApp oder über modernere SMS-Dienste wie RCS zu führen. In diesem Artikel werden wir eine Laravel-Anwendung hochfahren, die eine Liste von Telefonnummern von Helfern aufnimmt und eingehende WhatsApp-Nachrichten an eine spezielle Nummer für jeden Agenten weiterleitet.

TLDR: Der Code ist hier zu finden.

Voraussetzungen

• Git

• Eine Entwicklungsumgebung für Laravel, wie z.B. Herde

• PHP8.3+

• Komponist

• Knotenpunkt 22+

• Ngrok

Hochfahren der App

Als Erstes müssen wir den Code der App von GitHub abrufen. Geben Sie das Folgende in Ihr Terminal ein:

git clone git@github.com:Vonage-Community/blog-messages-laravel_whatsapp_callcenter.git

Als nächstes müssen wir die Abhängigkeiten der Anwendung abrufen:

composer install
npm i

Abschließend führen wir unsere Migrationen durch und lassen den Front-End-Assets-Server im Dev-Modus laufen (da die App an die Boilerplate-Vorlagen angepasst wurde, die Sie mit Livewire und Blade erhalten):

php artisan migrate
npm run dev

Die definierte Route lautet /Agentenalso gehen Sie zu dieser Adresse und Sie sollten die Einrichtungsseite sehen:

Styling courtesy of Laravel Livewire Flux UI

Vonage einrichten

Sie können noch nichts tun, bis Sie einen privaten Schlüssel haben und eine Anwendung im Vonage Dashboard eingerichtet haben.

Nachdem Sie einen privaten Schlüssel heruntergeladen haben, stellen Sie sicher, dass er den Namen privat.schlüssel und verschieben Sie ihn in das Stammverzeichnis Ihrer Anwendung. Wir werden für diese Anwendung die Messages Sandbox verwenden, da dies bedeutet, dass Sie keinen eigenen WhatsApp Business Account einrichten müssen. Stattdessen erhalten Sie von Vonage eine Nummer, die Ihnen zum Testen der Anwendung zugewiesen wird.

Gehen Sie zum Abschnitt "Nachrichten-Sandbox", den Sie unter dem rechten Menüpunkt "Nachrichten" finden können. Für WhatsApp werden Sie Anweisungen erhalten:

Scan the QR code and follow the instructionsBefolgen Sie diese Anweisungen, aber stellen Sie sicher, dass Sie die Passphrase nur kurz vor dem Testen der App verwenden. Der Grund dafür ist, dass der Zugang nach einer kurzen Zeitspanne gesperrt wird.

Die letzte Konfiguration, die vorgenommen werden muss, ist die Einrichtung der .env Datei einzurichten, indem Sie Ihre Angaben eingeben. In der Datei müssen drei Variablen definiert werden:

VONAGE_PRIVATE_KEY_PATH=./private.key
VONAGE_APPLICATION_ID=your_application_id
VONAGE_FROM_NUMBER=your_sandbox_number

VONAGE_PRIVATE_KEY_PATH kann gleich bleiben, da das Setzen von private.key im Projektstamm den richtigen Import im Code Ihrer Schlüsseldatei abgedeckt hat. Fügen Sie Ihre Anwendung ID und die Sandbox-Nummer in Ihrem Dashboard Sandbox gegeben.

Ngrok

Als Nächstes müssen wir unsere Anwendung außerhalb Ihres Rechners exponieren, so dass Webhooks von Kunden eingelesen werden können. Ich empfehle die Verwendung von Ngrok für diesen Zweck.

ngrok http 8080 // <- your port to forward here

Ngrok wird eine öffentliche IP-Adresse zurückgeben. Diese Adresse, plus die /webhook uri muss auf der Sandbox-Dashboard-Seite hinzugefügt werden. Wenn Sie zur Sandbox-Seite zurückkehren und nach unten scrollen, sollten Sie zwei Felder für Webhooks sehen:

Put your public webhooks route into the Inbound messages field.Wir sind nur an den eingehenden Webhooks interessiert; Sie können einen Dummy-Wert für den Status eingeben. Jetzt sind wir konfiguriert. Fügen Sie dem Agenten im App-Dashboard eine Nummer hinzu.

Yes, it’s a fake number!Die Anwendung muss nun also einen Agenten mit einer eingehenden Kundennachricht verbinden. Dies geschieht, indem jeder eingehende Text mit dem folgenden Code eingelesen wird:

 public function handle(Request $request): JsonResponse
   {
       Log::info('Webhook received', [
           'headers' => $request->headers->all(),
           'body' => $request->all(),
       ]);

       $data = $request->all();
       $number = $data['from'];

       if (Agent::where('phone_number', $number)->exists()) {
           $this->incomingAgentWebhook($data);

           return response()->json(['status' => 'success', 'message' => 'Webhook processed']);
       }

       $this->incomingCustomerWebhook($data);

       return response()->json(['status' => 'success', 'message' => 'Webhook processed']);
   }

Sie können sehen, dass die Logik im Code feststellen muss, ob der eingehende Text von einem Agenten (der einem zugewiesenen Kunden antwortet) oder einer eingehenden Kundennachricht stammt. Die eingehende Kundennachricht wird daraufhin überprüft, ob ein Bearbeiter zugewiesen wurde - wenn nicht, wird eine Verbindung zum Bearbeiter hergestellt und die Nachricht an diesen weitergeleitet. Wenn ein Agent zugewiesen ist, wird der Text direkt an den zugewiesenen Agenten weitergeleitet. Auf dem Dashboard werden alle aktiven Verbindungen angezeigt, zum Beispiel:

We have a connection!Jetzt haben Sie eine aktive Verbindung! Der Agent und der Kunde können miteinander sprechen.

Here’s your chat!

Schlussfolgerung

Und da haben Sie es! Schauen Sie sich den Code an, wenn Sie sehen wollen, wie die WebhookController die Logik zwischen dem Agenten und dem Kunden ausarbeitet. Sie können auch einen Blick auf andere Tutorials werfen, wie z.B. wie man RCS-Nachrichten mit Laravel sendet.