Volver a las novedades para desarrolladores

Integrar la Plataforma de WhatsApp Business con HubSpot

13 de marzo de 2023DeRashed Talukder

HubSpot es una plataforma de administración de relaciones con los clientes (CRM) que permite a las organizaciones comercializar, vender y brindar soporte técnico de sus productos o servicios con mayor eficacia.

La Plataforma de WhatsApp Business permite a las empresas usar la API de la nube, alojada en Meta, para comunicarse directamente con sus clientes desde su sistema de CRM y mediante las integraciones de WhatsApp. De esta manera, se obtiene un acceso sencillo a las funciones de mensajería y se logra una integración directa con la mayoría de las pilas de tecnología preexistentes.

En esta guía, echaremos un vistazo a cómo configurar este tipo de integración con HubSpot y cómo crear un flujo de trabajo dentro de CRM, con el fin de responder automáticamente los mensajes en función de eventos y reglas personalizadas en la plataforma de HubSpot desde WhatsApp.

Requisitos previos

Para completar este tutorial, necesitarás lo siguiente:

  • Una cuenta de WhatsApp Business.

  • Una cuenta de Meta for Developers.

  • Una cuenta de desarrollador de apps de HubSpot (selecciona "App Developer" si vas a crear una cuenta nueva). Las cuentas de desarrollador de apps de HubSpot proporcionan funciones y servicios que se incluyen en las Condiciones, incluido el acceso a las API de CRM y a la posibilidad de crear apps.

  • Una URL que se oriente a la instancia en ejecución de esta app de muestra de Glitch para recibir mensajes de WhatsApp Business Messenger.

En este artículo, se asume que conoces cómo funcionan la Plataforma de WhatsApp Business, Meta for Developers y HubSpot.

Enviar mensajes

El primer paso consiste en configurar tus cuentas. Para hacerlo, sigue estos pasos:

  1. Crea una cuenta de desarrollador de Facebook o inicia sesión si ya tienes una.

  2. Completa el paso "Configurar activos de desarrollador y el acceso a la plataforma" en el documento oficial sobre primeros pasos y, luego, envía un mensaje de prueba.

  3. Agrega tu número de teléfono a la configuración de la app de la API de la nube.

Recibir mensajes con una app de muestra

Para probar tus webhooks, deberemos configurar un webhook y una URL de suscriptor de webhooks con un punto de conexión. Para hacerlo, usaremos la app de muestra que se menciona más arriba.

Haz clic en el botón "Remix to Edit", ubicado en la parte superior derecha, para editar los detalles de la configuración.

Abre el archivo .env y pega el token de acceso a la API de la nube en el campo WHATSAPP_TOKEN. En VERIFY_TOKEN, puedes ingresar cualquier cadena, pero mantenla a mano, ya que la utilizaremos más adelante.

Configurar el webhook de la API de la nube

A continuación, configura el webhook para que la API permita las suscripciones de actualizaciones o las respuestas a cambios de eventos. Comienza desde el panel de apps de Meta for Developers perteneciente a tu app. Haz clic en la barra de navegación para ver WhatsApp. Luego, en "Getting Started", haz clic en "Configuration" y, luego, en "Edit".

Completa los campos "Callback URL" y "Verify token" en el cuadro de diálogo "Edit webhook's callback URL". La URL de devolución de llamada será https://<<NOMBRE DEL PROYECTO>>.glitch.me. Reemplaza "NOMBRE DEL PROYECTO" con el nombre del proyecto (p. ej., https://defiant-standing-mirror.glitch.me). Luego, verifica la URL al igual que como se explicó anteriormente.

Haz clic en "Verify and save". Consulta la guía para desarrolladores si deseas obtener más detalles sobre la configuración de los webhooks de WhatsApp.

Pantalla "Edit webhook callback URL"

Ahora puedes enviar notificaciones de prueba al punto de conexión.

En la misma página, debajo del botón "Edit", haz clic en "Webhook fields", luego en "Manage" y suscríbete a los eventos que deseas capturar a través del punto de conexión. Luego, haz clic en "Test" para enviar un mensaje de notificación al número de teléfono del destinatario que configuraste antes.

Pantalla "Webhook fields"

Para verificar si la app está en ejecución y si responde a los eventos, ve a Glitch, haz clic en "Logs" y consulta los registros del evento que seleccionaste.

Pantalla "View logs" de Glitch

Configurar el CRM de HubSpot

Ahora, configurarás el CRM de HubSpot para que envíe automáticamente mensajes de WhatsApp a los clientes cuya información de contacto incluye un número de teléfono.

Ve a la plataforma de HubSpot e inicia sesión en tu cuenta de desarrollador o crea una. Con la cuenta de desarrollador, tienes una prueba gratuita de 90 días de todas las funciones empresariales de HubSpot, entre las que se incluyen marketing, ventas, servicio y CMS. De este modo, puedes probar la API y herramientas de HubSpot.

Después de configurar la cuenta de desarrollador, haz clic en "Manage test accounts".

Sesión iniciada con la cuenta de desarrollador en CRM de HubSpot

Luego, selecciona "Create a test account", ponle el nombre "demo_whatsapp_integration" (u otro nombre que te guste) y haz clic en "Create".

Pantalla "Create an app test account"

Haz clic en la cuenta de prueba de apps que acabas de crear y navega hasta el panel. Luego, haz clic en "Contacts", que se encuentra en la parte superior izquierda de la barra de navegación. Verás dos contactos de demostración. Si lo deseas, puedes eliminarlos y agregar un nuevo contacto que incluya un número de teléfono de prueba, que puedes usar en las pruebas de WhatsApp.

Panel de nueva cuenta de prueba de apps

Conectar WhatsApp con el CRM de HubSpot

A continuación, debemos instalar una integración de WhatsApp con el CRM de HubSpot. Primero, ve a "Settings" en HubSpot. En "Account Setup", haz clic en "Integrations" y, luego, en "Connected Apps".

Pantalla "Connected Apps"

Selecciona "Visit App Marketplace". En el campo de búsqueda, busca la aplicación de WhatsApp. Haz clic en "WhatHub: WhatsApp Integration".

App Marketplace

Selecciona la cuenta demo_whatsapp_integration y haz clic en "Choose Account". Luego, podrás ver un icono de WhatsApp en la página de contactos, junto a las otras opciones de contacto. Haz clic en ese icono para comenzar a enviar mensajes desde el CRM de HubSpot. Puedes usar mensajes personalizados o las plantillas predefinidas.

Mensaje personalizado de WhatsApp

También verás una lista de mensajes y sus estados en la pestaña "Activity".

Configurar un flujo de trabajo automatizado

A continuación, incorporaremos todo esto en un flujo de trabajo que activa un evento en el CRM. Para hacerlo, configuraremos un flujo de trabajo personalizado desde el panel de HubSpot. En la barra de navegación, haz clic en "Automation" y, luego, en "Workflows" para abrir el panel de flujos de trabajo.

Haz clic en "Create workflow" y selecciona la opción "From scratch". Ahora, haz clic en "Contact-based" y, luego, en "Next".

Pantalla "Back to workflows"

Haz clic en "Set up triggers" y selecciona la opción de evento de integración "WhatsApp message sent from HubSpot portal integration".

Pantalla "Set up triggers"

Selecciona el tipo de filtro "Message sent", configura el activador de flujo de trabajo, como "is equal to any of" y especifica el valor como "Buy item". Por último, haz clic en "Apply filter" y, luego, en "Save".

A continuación, haz clic en el icono + y agrega otra acción. En la lista "Choose an action", haz clic en "Create task".

Pantalla "Choose an action"

Ponle el nombre "Test Task" y asígnala a tu cuenta de prueba. Luego, haz clic en "Save". Posteriormente, haz clic en "Review", publícala y activa el flujo de trabajo haciendo clic en "Turn on" en la esquina superior derecha de la ventana.

Pantalla "Turn on workflow"

Ahora, selecciona "Test" y elige el contacto para probar el flujo de trabajo. Se activa el flujo de trabajo, como se muestra a continuación.

Pantalla "Choose your test contact"

A continuación, crearemos una integración que responda a WhatsApp y actualice automáticamente los datos en el CRM de HubSpot cuando se reciba una notificación. Antes de configurar el flujo de trabajo, debemos agregar el contacto de prueba a una lista. Haz clic en "Contacts" y, luego, en "Lists" para crear una lista nueva.

Cuando termines, ve a la página "Workflow", crea un nuevo flujo de trabajo y ponle el nombre "WhatsApp Automation".

Selecciona "Contact-based lists", agrega el nombre de la lista y, luego, selecciona "Static list". Haz clic en "Next" y, después, en el botón "+ Add filter".

Ahora selecciona "List membership" en la lista "Add filter" para agregarlo como filtro y, luego, haz clic en "Save list".

Pantalla "Add filter"

Ahora puedes continuar configurando el flujo de trabajo. Selecciona "Contact-based" y agrega "Contact enrollment trigger" a "List membership".

Pantalla "Contact enrollment trigger"

Configura una tarea que se activará cuando se active este flujo de trabajo. Verifica que esta tarea aparezca en la línea de tiempo "Actions" y, luego, haz clic en "Save".

En la lista "Choose an action", haz clic en "Send a webhook".

Opción "Send a webhook"

Luego, crea una acción para que, cuando el flujo de trabajo se active, envíe la carga al punto de conexión.

Pantalla "Send a webhook"

Asegúrate de usar la URL que configuraste anteriormente en el tutorial. Haz clic en "Save". Por último, prueba el flujo de trabajo como lo hiciste antes: abre la lista "Test", selecciona el contacto de prueba en la lista "Preview for" y, luego, haz clic en "Test". Se completó el flujo de trabajo.

Ahora revisemos los registros y la línea de tiempo "Actions". Vuelve a la línea de tiempo "Actions" para revisar la tarea que creaste.

Línea de tiempo "Logs and Actions"

Para revisar los registros, vuelve a la app de Glitch en ejecución y consulta los registros. De esta manera, puedes confirmar si se entregó el mensaje.

Consulta los registros en la app de Glitch

Conclusión

Integrar la Plataforma de WhatsApp Business con HubSpot te permite automatizar el envío y la recepción de mensajes en función de las reglas que creas para los eventos y las acciones que realizan tus clientes.

En este artículo, vimos cómo conectar estos dos servicios en un tutorial paso a paso, donde se explica cómo enviar mensajes de WhatsApp a contactos con detalles registrados en HubSpot. Debes configurar flujos de trabajo personalizados que activen acciones en función de eventos predefinidos. Además, debes configurar un flujo de trabajo que envíe una notificación a un punto de conexión previamente configurado y que comience una tarea nueva.

Para garantizar que tu mensaje procese y entregue a tus clientes actualizaciones oportunas, relevantes y esperadas, debes tener en cuenta la cantidad de mensajes. Evita llenar de spam el correo de los clientes. De esta manera, estarán satisfechos y continuarán interactuando.

Para obtener más información sobre cómo puedes integrar WhatsApp en tus apps y proyectos, consulta el resto de nuestros tutoriales para desarrolladores.