Crie um canal simples de atendimento ao cliente com o WhatsApp e o Laravel

Uma das tendências mais recentes no atendimento ao cliente é oferecer suporte ao vivo multicanal dedicado. Há dez anos, isso provavelmente seria uma janela pop-up no canto inferior direito do seu site, mas está se tornando cada vez mais comum interagir por meio de plataformas como o WhatsApp ou por meio de serviços de SMS mais modernos, como o RCS. Neste artigo, vamos configurar uma aplicação Laravel que recebe uma lista de números de telefone dos agentes de suporte e direciona as mensagens recebidas pelo WhatsApp para um número específico de cada agente.

Resumo: O código pode ser encontrado aqui.

Pré-requisitos

• Git

• Um ambiente de desenvolvimento para o Laravel, como Herd

• PHP 8.3 ou superior

• Compositor

• Nó 22+

• Ngrok

Inicializando o aplicativo

Primeiro, precisamos baixar o código do aplicativo do GitHub. Digite o seguinte no seu terminal:

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

Em seguida, precisamos baixar as dependências do aplicativo:

composer install
npm i

Por fim, executamos nossas migrações e iniciamos o servidor de recursos do front-end no modo de desenvolvimento (isso porque o aplicativo foi adaptado a partir dos modelos padrão fornecidos pelo Livewire e pelo Blade):

php artisan migrate
npm run dev

A rota definida é /agents; então, acesse esse endereço e você deverá ver a página de configuração:

Styling courtesy of Laravel Livewire Flux UI

Configurando o Vonage

Você não poderá fazer nada ainda até ter uma chave privada e ter configurado uma Application no painel do Vonage.

Após baixar uma chave privada, certifique-se de que ela tenha o nome private.key e mova-a para a raiz do diretório do seu aplicativo. Vamos usar o Messages Sandbox para este aplicativo, pois assim você não precisa configurar sua própria conta do WhatsApp Business. Em vez disso, a Vonage fornecerá um número designado para testar o aplicativo.

Acesse a seção “Sandbox de mensagens”, que você encontra no menu à direita da aba “Mensagens”. Para o WhatsApp, você receberá as seguintes instruções:

Scan the QR code and follow the instructionsSiga estas instruções, mas certifique-se também de usar a senha apenas imediatamente antes de testar o aplicativo. Isso porque o acesso expirará após um curto período de tempo.

A última configuração a ser feita é definir o arquivo arquivo .env inserindo seus dados. O arquivo precisa ter três variáveis definidas:

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

VONAGE_PRIVATE_KEY_PATH pode permanecer igual à importação private.key na raiz do projeto já tenha garantido a importação correta no código do seu arquivo de chave. Adicione seu ID de aplicativo e o número da sandbox fornecido no painel de controle da sua sandbox.

Ngrok

Em seguida, precisamos tornar nosso aplicativo acessível de fora do seu computador, para que os Webhooks dos clientes possam ser recebidos. Recomendo usar o Ngrok para isso.

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

O Ngrok retornará um endereço IP público. Esse endereço, juntamente com o /webhook , precisa ser adicionado à página do painel do ambiente de teste. Voltando à página do ambiente de teste e rolando a tela para baixo, você deverá ver dois campos para webhooks:

Put your public webhooks route into the Inbound messages field.Estamos interessados apenas nos webhooks de entrada; você pode inserir um valor fictício para o status. Agora que a configuração está pronta, adicione um número ao agente no painel do aplicativo.

Yes, it’s a fake number!Então, o que o aplicativo precisa fazer agora é associar um agente a uma mensagem recebida do cliente. Para isso, ele lê cada mensagem recebida usando o código a seguir:

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

É possível observar que a lógica do código precisa determinar se o texto recebido é de um agente (que responderá a um cliente designado) ou se trata de uma mensagem recebida de um cliente. A mensagem recebida do cliente é verificada para ver se um agente foi designado — caso contrário, é criada uma conexão com o agente e a mensagem é encaminhada a ele. Se houver um agente designado, a mensagem é encaminhada diretamente para ele. O painel indicará todas as conexões ativas, por exemplo:

We have a connection!Agora você tem uma conexão ativa! O atendente e o cliente podem conversar entre si.

Here’s your chat!

Conclusão

E pronto! Dê uma olhada no código se quiser ver como WebhookController funciona a lógica entre o agente e o cliente. Você também pode dar uma olhada em outros tutoriais, como, por exemplo, como enviar mensagens RCS com o Laravel.