Créer un canal d'assistance client simple avec WhatsApp et Laravel

L'une des tendances les plus récentes en matière d'assistance à la clientèle est de disposer d'une assistance en direct multicanal dédiée. Il y a dix ans, cela aurait très probablement été une boîte pop-up dans le coin inférieur droit de votre site Web, mais il est de plus en plus populaire d'avoir des interactions en utilisant des plates-formes comme WhatsApp ou via des services SMS plus modernes comme RCS. Dans cet article, nous allons démarrer une application Laravel qui prend une liste de numéros de téléphone d'agents d'assistance et fait correspondre les messages WhatsApp entrants à un numéro dédié pour chaque agent.

TLDR : Le code est disponible ici.

Conditions préalables

• Git

• Un environnement de développement pour Laravel, tel que Herd

• PHP8.3+

• Compositeur

• Nœud 22+

• Ngrok

Démarrer l'application

Tout d'abord, nous devons récupérer le code de l'application depuis GitHub. Tapez ce qui suit dans votre terminal :

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

Ensuite, nous devons récupérer les dépendances de l'application :

composer install
npm i

Enfin, nous exécutons nos migrations et le serveur d'actifs frontal en mode développement (car l'application a été adaptée à partir des modèles standard que vous obtenez avec Livewire et Blade) :

php artisan migrate
npm run dev

La route qui a été définie est la suivante /agentsVous devez donc vous rendre à cette adresse et vous devriez voir la page d'installation :

Styling courtesy of Laravel Livewire Flux UI

Configuration de Vonage

Vous ne pourrez encore rien faire tant que vous ne disposerez pas d'une clé privée et que vous n'aurez pas configuré une application dans le tableau de bord de Vonage.

Après avoir téléchargé une clé privée, assurez-vous qu'elle est nommée private.key et placez-la à la racine du répertoire de votre application. Nous allons utiliser l'Environnement de test de Messages pour cette application, car cela signifie que vous n'avez pas besoin de créer votre propre WhatsApp Business Account. Au lieu de cela, Vonage vous donnera un numéro attribué pour tester l'application.

Rendez-vous dans la section Messages Sandbox, qui se trouve dans le menu de droite de Messages. Pour WhatsApp, vous recevrez des instructions :

Scan the QR code and follow the instructionsSuivez ces instructions, mais veillez également à n'utiliser la phrase de passe que juste avant de tester l'application. En effet, l'accès à l'application sera interrompu au bout d'un court laps de temps.

La dernière configuration à faire est de mettre en place le fichier .env en entrant vos coordonnées. Ce fichier doit contenir trois variables :

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

VONAGE_PRIVATE_KEY_PATH peut rester le même, car le fait de mettre private.key dans la racine du projet a couvert l'importation correcte dans le code de votre fichier clé. Ajoutez l'identifiant de votre application et le numéro de sandbox donné dans votre sandbox dashboard.

Ngrok

Ensuite, nous devons exposer notre application en dehors de votre machine, afin que les Webhooks des clients puissent être lus. Je recommande d'utiliser Ngrok pour cela.

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

Ngrok renvoie une adresse IP publique. Cette adresse, ainsi que l'option /webhook doivent être ajoutées à la page du tableau de bord du bac à sable. En retournant sur la page du bac à sable et en défilant vers le bas, vous devriez voir deux cases pour les webhooks :

Put your public webhooks route into the Inbound messages field.Nous ne nous intéressons qu'aux webhooks entrants ; vous pouvez mettre une valeur fictive pour le statut. Maintenant que nous sommes configurés, ajoutez un numéro à l'agent dans le tableau de bord de l'application.

Yes, it’s a fake number!Ce que l'application doit maintenant faire, c'est connecter un agent à un message client entrant. Pour ce faire, elle lit chaque texte entrant à l'aide du code suivant :

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

Vous pouvez voir que la logique du code doit déterminer si le texte entrant provient d'un agent (qui répondra à un client assigné) ou d'un message client entrant. Le message client entrant est vérifié pour voir si un agent a été assigné - si ce n'est pas le cas, il crée une connexion avec l'agent et le transmet à ce dernier. Si un agent a été désigné, le texte est transmis directement à l'agent désigné. Le tableau de bord indique toutes les connexions actives, par exemple :

We have a connection!Vous disposez à présent d'une connexion active ! L'agent et le client peuvent se parler.

Here’s your chat!

Conclusion

Et voilà ! Allez voir le code si vous voulez voir comment la fonction WebhookController élabore la logique entre l'agent et le client. Vous pouvez également consulter d'autres tutoriels, tels que comment envoyer des messages RCS avec Laravel.