WhatsAppとLaravelでシンプルなカスタマーサポートチャンネルを構築

カスタマ サポートの最近の傾向の一つは、専用のマルチチャネルライブサポートを持つことです。10年前、これはあなたのウェブサイトの右下にあるポップアップボックスであった可能性が高いですが、WhatsAppのようなプラットフォームやRCSのようなより近代的なSMSサービスを使用して対話することがますます一般的になってきています。この記事では、ヘルパーエージェントの電話番号リストを取得し、受信したWhatsAppメッセージを各エージェントの専用番号にマッチングするLaravelアプリケーションを起動します。

TLDR コードはこちら.

前提条件

• ギット

• 以下のようなLaravelの開発環境。 Herd

• PHP8.3以上

• 作曲家

• ノード22+

• ングロク

アプリの起動

まず、アプリのコードをGitHubから取得する必要がある。ターミナルに次のように入力する：

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

次に、アプリケーションの依存関係を取得する必要がある：

composer install
npm i

最後に、マイグレーションを実行し、フロントエンドのアセットサーバーをdevモードで実行します（これは、アプリがLivewireとBladeで得られる定型テンプレートから適応されているためです）：

php artisan migrate
npm run dev

定義されているルートは /エージェントで、そのアドレスにアクセスすると、セットアップ・ページが表示されるはずだ：

Styling courtesy of Laravel Livewire Flux UI

Vonageの設定

プライベートキーを取得し、Vonageダッシュボードでアプリケーションをセットアップするまでは、まだ何もできません。

秘密鍵をダウンロードしたら、その名前が private.keyという名前であることを確認し、アプリケーションディレクトリのルートに移動します。今回のアプリケーションはメッセージサンドボックスを使用します。その代わり、Vonageからアプリケーションテスト用の番号が発行されます。

メッセージの右側メニューにある「メッセージサンドボックス」セクションにアクセスしてください。WhatsAppの場合、指示が表示されます：

Scan the QR code and follow the instructionsこれらの指示に従うだけでなく、パスフレーズを使うのはアプリをテストする直前だけにしてください。短時間でアクセスがタイムアウトしてしまうからです。

最後の設定は .envファイルを設定することである。このファイルには3つの変数を定義する必要がある：

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

VONAGE_PRIVATE_KEY_PATHプロジェクト・ルートに private.keyをプロジェクトルートに置くことで、キーファイルのコードで正しいインポートをカバーできます。アプリケーションIDと、ダッシュボードのサンドボックスで指定されたサンドボックス番号を追加します。

ングロク

次に、顧客からのWebhookを読み込めるように、自分のマシンの外部にアプリケーションを公開する必要がある。これにはNgrokを使うことをお勧めする。

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

NgrokはパブリックIPアドレスを返す。このアドレスと /ウェブフックuri をサンドボックスのダッシュボードページに追加する必要があります。サンドボックスのページに戻って下にスクロールすると、webhooks のボックスが 2 つあるはずです：

Put your public webhooks route into the Inbound messages field.インバウンドのウェブフックにしか興味がないので、ステータスにはダミーの値を入れることができます。これで設定が完了したので、アプリのダッシュボードでエージェントに番号を追加します。

Yes, it’s a fake number!そこで、このアプリが今すべきことは、受信した顧客メッセージにエージェントを接続することです。これは、以下のコードを使用して、各入力テキストを読み込むことによって行います：

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

コード内のロジックは、受信テキストがエージェント（割り当てられた顧客に返信する）からのものなのか、それとも顧客からのメッセージなのかを判断しなければならないことがわかります。もしエージェントが割り当てられていなければ、エージェントへの接続を作成し、エージェントに転送します。エージェントが割り当てられている場合、テキストは割り当てられたエージェントに直接転送されます。ダッシュボードには、すべてのアクティブな接続が表示されます：

We have a connection!これでアクティブな接続ができました！エージェントと顧客はお互いに話すことができます。

Here’s your chat!

結論

これで完成だ！がエージェントと顧客の間でどのようにロジックを組み立てるか見たければ、コードをチェックしてみてください。 WebhookControllerがエージェントと顧客間のロジックをどのように処理しているか見てみましょう。LaravelでRCSメッセージを送信する方法など、他のチュートリアルもご覧ください。