Construye un sencillo canal de atención al cliente con WhatsApp y Laravel

Una de las tendencias más recientes en atención al cliente es contar con un servicio de atención en directo multicanal. Hace diez años, lo más probable es que esto hubiera sido un cuadro emergente en la esquina inferior derecha de su sitio web, pero cada vez es más popular tener interacciones utilizando plataformas como WhatsApp o a través de servicios de SMS más modernos como RCS. En este artículo, vamos a poner en marcha una aplicación Laravel que toma una lista de números de teléfono de los agentes de ayuda y empareja los mensajes entrantes de WhatsApp a un número dedicado para cada agente.

TLDR: El código se puede encontrar aquí.

Requisitos previos

• Git

• Un entorno de desarrollo para Laravel, como Manada

• PHP8.3+

• Compositor

• Nodo 22+

• Ngrok

Arrancar la aplicación

En primer lugar, tenemos que obtener el código de la aplicación de GitHub. Escribe lo siguiente en tu terminal:

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

A continuación, tenemos que buscar las dependencias de la aplicación:

composer install
npm i

Por último, ejecutamos nuestras migraciones y ejecutamos el servidor de activos front-end en modo de desarrollo (esto se debe a que la aplicación se ha adaptado a partir de las plantillas que se obtienen con Livewire y Blade):

php artisan migrate
npm run dev

La ruta que se ha definido es /agentesasí que dirígete a esa dirección y deberías ver la página de configuración:

Styling courtesy of Laravel Livewire Flux UI

Configuración de Vonage

Aún no podrás hacer nada hasta que tengas una clave privada y hayas configurado una aplicación en el panel de Vonage.

Después de descargar una clave privada, asegúrese de que se llama private.key y muévela a la raíz de tu directorio de aplicaciones. Vamos a utilizar el Sandbox de mensajes para esta aplicación, ya que significa que no tienes que configurar tu propia WhatsApp Business Account. En su lugar, Vonage te dará un número asignado para probar la aplicación.

Dirígete a la sección Mensajes Sandbox, que encontrarás en el menú Mensajes de la derecha. Para WhatsApp, se le dará instrucciones:

Scan the QR code and follow the instructionsSiga estas instrucciones, pero asegúrese también de utilizar la frase de contraseña sólo justo antes de probar la aplicación. Esto se debe a que el acceso se desactivará tras un breve periodo de tiempo.

La última configuración que hay que hacer es configurar el archivo .env introduciendo tus datos. El archivo necesita tres variables definidas:

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

VONAGE_PRIVATE_KEY_PATH puede seguir siendo el mismo que poner private.key en la raíz del proyecto ha cubierto la importación correcta en el código de su archivo de claves. Añadir el ID de su aplicación y el número de caja de arena dado en su caja de arena tablero de instrumentos.

Ngrok

A continuación, tenemos que exponer nuestra aplicación fuera de su máquina, de modo que Webhooks de los clientes se pueden leer en. Recomiendo el uso de Ngrok para esto.

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

Ngrok devolverá una dirección IP pública. Esta dirección, más la dirección /webhook debe añadirse a la página de la caja de arena. Volviendo a la página de la caja de arena y desplazándose hacia abajo, debería ver dos cajas para webhooks:

Put your public webhooks route into the Inbound messages field.Sólo estamos interesados en los webhooks entrantes; puedes poner un valor ficticio para el estado. Ahora que estamos configurados, añade un número al agente en el panel de control de la aplicación.

Yes, it’s a fake number!Por lo tanto, lo que la aplicación necesita hacer ahora es conectar un agente a un mensaje entrante del cliente. Para ello, lee cada texto entrante utilizando el siguiente código:

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

Puede ver que la lógica en el código tiene que determinar si el texto entrante es de un agente (que responderá a un cliente asignado) o un mensaje entrante de cliente. El mensaje entrante del cliente se comprueba para ver si se ha asignado un agente - si no lo ha hecho, crea una conexión con el agente y lo reenvía al agente. Si hay uno asignado, reenvía el texto directamente al agente asignado. El panel de control indicará todas las conexiones activas, por ejemplo:

We have a connection!Ya tiene una conexión activa. El agente y el cliente pueden hablar entre sí.

Here’s your chat!

Conclusión

Y ya está. Echa un vistazo al código si quieres ver cómo el WebhookController funciona la lógica entre el agente y el cliente. También puedes echar un vistazo a otros tutoriales, como cómo enviar mensajes RCS con Laravel.