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 gestión de las relaciones con los clientes (CRM) que permite a las organizaciones comercializar y vender sus productos o servicios, así como prestar asistencia, de forma más eficaz.

La Plataforma de WhatsApp Business permite a las empresas usar la API de nube alojada en Meta para comunicarse directamente con sus clientes desde su plataforma de CRM mediante las integraciones de WhatsApp. De esta forma, pueden acceder de forma sencilla a funciones de mensajes y llevar a cabo integraciones directas con la mayoría de las pilas de tecnología existentes.

En este artículo abordaremos la configuración de este tipo de integración con HubSpot y la creación de un proceso en la plataforma de CRM para responder automáticamente a los mensajes en función de los eventos y las 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 aplicaciones de HubSpot. Debes seleccionar “App Developer” (Desarrollador de aplicaciones) si vas a crear una nueva cuenta. Las cuentas de desarrollador de aplicaciones de HubSpot ofrecen funciones y servicios que se indican en sus términos y condiciones, tales como el acceso a sus API de CRM o la capacidad de crear aplicaciones.

  • Una URL que apunte a la instancia en ejecución de esta aplicación de ejemplo de Glitch para recibir mensajes de WhatsApp Business Messenger.

En este artículo se supone que la Plataforma de WhatsApp Business, Meta for Developers y HubSpot te resultan familiares.

Enviar mensajes

El primer paso consiste en configurar las cuentas. Para ello, haz lo siguiente:

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

  2. Completa el paso “Configurar los recursos para desarrolladores y el acceso a la plataforma” de la documentación oficial de introducción y envía un mensaje de prueba.

  3. Añade tu número de teléfono a la configuración de la aplicación de la API de nube.

Recibir mensajes con una aplicación de ejemplo

Tendremos que configurar un webhook y una URL de suscriptor a webhooks con un extremo para probar tus webhooks. Para ello, usaremos la aplicación de ejemplo mencionada anteriormente.

Haz clic en el botón “Remix to Edit” (Mezclar para editar) en la parte superior derecha para poder editar los detalles de la configuración.

Abre el archivo .env y pega el identificador de acceso de la API de nube en el campo WHATSAPP_TOKEN. En VERIFY_TOKEN, puedes introducir cualquier cadena, pero debes tenerla a mano porque la usaremos más adelante.

Configurar el webhook de la API de nube

A continuación, debes configurar el webhook de la API para permitir suscripciones a actualizaciones o respuestas a cambios de eventos; para ello, puedes empezar en el panel de tu aplicación de Meta for Developers. Haz clic en la barra de navegación de WhatsApp. En “Primeros pasos”, haz clic en “Configuración” y, a continuación, haz clic en “Editar”.

Completa los campos “URL de devolución de llamada” e “Identificador de verificación” en el cuadro de diálogo “Editar URL de devolución de llamada de webhook”. La URL de devolución de llamada será https://<<NOMBRE DEL PROYECTO>>.glitch.me. Sustituye “NOMBRE DEL PROYECTO” por el nombre de tu proyecto (p. ej., https://defiant-standing-mirror.glitch.me). A continuación, comprueba que la URL sea la misma que la anterior.

Haz clic en “Verificar y guardar”. Consulta la guía para desarrolladores si quieres obtener más información sobre la configuración del webhook de WhatsApp.

Pantalla “Editar URL de devolución de llamada de webhook”

Ahora puedes enviar notificaciones de prueba al extremo.

En la misma página, debajo del botón “Editar”, haz clic en “Campos de webhook” y, a continuación, haz clic en “Administrar” y suscríbete a los eventos que tengas previsto escuchar mediante el extremo. Después, haz clic en “Probar” para enviar un mensaje de notificación al número de teléfono del destinatario configurado previamente.

Pantalla “Campos de webhook”

Para comprobar si la aplicación se está ejecutando y está escuchando los eventos, accede a Glitch, haz clic en “Logs” (Registros) y consulta los registros del evento seleccionado.

Pantalla de visualización de registros de Glitch

Configurar la plataforma de CRM de HubSpot

Ahora vas a configurar la plataforma de CRM de HubSpot para enviar automáticamente mensajes de WhatsApp a los clientes cuya información de contacto incluya un número de teléfono.

Accede a la plataforma de HubSpot e inicia sesión en tu cuenta de desarrollador o crea una. La cuenta de desarrollador proporciona una prueba gratuita de 90 días de todas las funciones empresariales de HubSpot (incluidas las soluciones de marketing, ventas, servicios y CMS) para que puedas probar la API y las herramientas de HubSpot.

Una vez configurada la cuenta de desarrollador, haz clic en “Manage test accounts” (Administrar cuentas de prueba).

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

A continuación, selecciona “Create app test account” (Crear cuenta de prueba de la aplicación), ponle el nombre demo_whatsapp_integration (o el que quieras) y haz clic en “Create” (Crear).

Pantalla “Create an app test account” (Crear una cuenta de prueba de la aplicación)

Haz clic en la cuenta de prueba de la aplicación que acabas de crear y accede al panel correspondiente. Después, haz clic en “Contacts” (Contactos) en la parte superior izquierda de la barra de navegación. Verás dos contactos de demostración. No dudes en eliminarlos y añadir un contacto nuevo que incluya un número de teléfono de prueba para usarlo en las pruebas de WhatsApp.

Panel de la nueva cuenta de prueba de la aplicación

Conectar WhatsApp con la plataforma de CRM de HubSpot

A continuación, tendremos que instalar una integración de WhatsApp con la plataforma de CRM de HubSpot. En primer lugar, accede a “Settings” (Configuración) en HubSpot. En “Account Setup” (Configuración de la cuenta), haz clic en “Integrations” (Integraciones) y, después, en “Connected Apps” (Aplicaciones conectadas).

Pantalla “Connected apps” (Aplicaciones conectadas)

Selecciona “Visit App Marketplace” (Visitar mercado de aplicaciones). Usa el campo de búsqueda para buscar la aplicación de WhatsApp. Haz clic en “WhatHub: WhatsApp Integration” (WhatHub: Integración de WhatsApp).

“App Marketplace” (Mercado de aplicaciones)

Selecciona la cuenta demo_whatsapp_integration y haz clic en “Choose Account” (Elegir cuenta). A continuación, podrás ver un icono de WhatsApp en la página de contactos situado junto a las demás opciones de contacto. Haz clic en este icono para empezar a enviar mensajes desde la plataforma de CRM de HubSpot. Puedes usar mensajes personalizados o las plantillas predefinidas.

Mensaje personalizado de WhatsApp

También podrás ver una lista de mensajes y los estados correspondientes en la pestaña “Activity” (Actividad).

Configurar un proceso automatizado

A continuación, incorporaremos esta integración a un proceso que se active mediante un evento en la plataforma de CRM. Para ello, configuraremos un proceso personalizado desde el panel de HubSpot. Haz clic en “Automation” (Automatización) en la barra de navegación y, después, haz clic en “Workflows” (Procesos) para abrir el panel “Workflow” (Proceso).

Haz clic en “Create workflow” (Crear proceso) y selecciona la opción “From scratch” (Desde cero). Ahora haz clic en “Contact-based” (Basado en contactos) y “Next” (Siguiente).

Pantalla “Back to workflows” (Volver a los procesos)

Haz clic en “Set up triggers” (Configurar activadores) y selecciona la opción de evento de integración “WhatsApp message sent from HubSpot portal” (Mensaje de WhatsApp enviado desde el portal de HubSpot).

Pantalla “Set up triggers” (Configurar activadores)

Selecciona el tipo de filtro “Message sent” (Mensaje enviado), establece el activador del proceso en “is equal to any of” (es igual que cualquier valor de) y especifica el valor como “Buy item” (Comprar artículo). Por último, haz clic en “Apply filter” (Aplicar filtro) y, a continuación, en “Save” (Guardar).

Después, haz clic en el icono “+” y añade otra acción. En la lista “Choose an action” (Elegir una acción), haz clic en “Create task” (Crear tarea).

Pantalla “Choose an action” (Elegir una acción)

Ponle el nombre “Tarea de prueba”, asígnala a tu cuenta de prueba y haz clic en “Save” (Guardar). A continuación, haz clic en “Review” (Revisar) y, en la esquina superior derecha de la ventana, haz clic en “Turn on” (Activar) para publicar y activar el proceso.

Pantalla “Turn on workflow” (Activar proceso)

Ahora selecciona “Test” (Probar) y elige tu contacto de prueba para probar el proceso. De esta forma se activa el proceso, como se muestra a continuación.

Pantalla “Choose your test contact” (Elegir el contacto de prueba)

A continuación, crearemos una integración que escuche a WhatsApp y actualice automáticamente los datos de la plataforma de CRM de HubSpot cuando se reciba una notificación. Antes de configurar el proceso, tenemos que añadir el contacto de prueba a una lista. Haz clic en “Contacts” (Contactos) y, después, en “Lists” (Listas) para crear una nueva lista.

Una vez hecho esto, ve a la página “Workflow” (Proceso), crea un nuevo proceso y ponle el nombre “Automatización de WhatsApp”.

Selecciona las listas basadas en contactos, añade el nombre de la lista y selecciona la lista estática. Haz clic en “Next” (Siguiente) y, a continuación, haz clic en el botón “+ Add filter” (+ Añadir filtro).

Ahora elige la opción “List membership” (Pertenencia a la lista) de la lista “Add filter” (Añadir filtro) para añadirla como filtro y, después, haz clic en “Save list” (Guardar lista).

Pantalla “Add filter” (Añadir filtro)

Ya puedes seguir configurando el proceso. Para ello, selecciona “Contact-based” (Basado en contactos) y añade el activador de inscripción de contactos a “List membership” (Pertenencia a la lista).

Pantalla “Contact enrollment trigger” (Activador de inscripción de contactos)

Configura una tarea para que se active cuando este proceso esté activado. Comprueba que la tarea aparezca en la línea de tiempo “Actions” (Acciones) y haz clic en “Save” (Guardar).

En la lista “Choose an action” (Elegir una acción), haz clic en “Send a webhook” (Enviar un webhook).

Opción “Send a webhook” (Enviar un webhook)

A continuación, crea una acción para el proceso a fin de enviar la carga útil al extremo cuando se active el proceso.

Pantalla “Send a webhook” (Enviar un webhook)

Asegúrate de usar la URL que has configurado previamente en el tutorial. Haz clic en “Save” (Guardar). Por último, prueba el proceso como antes: abre la lista “Test” (Probar), selecciona el contacto de prueba de la lista “Preview for” (Vista previa para) y haz clic en “Test” (Probar). El proceso se ha completado.

Ahora debes comprobar los registros y la línea de tiempo “Actions” (Acciones). Vuelve a la línea de tiempo “Actions” (Acciones) para revisar la tarea creada.

Registros y línea de tiempo “Actions” (Acciones)

Para comprobar los registros, vuelve a la aplicación de Glitch en ejecución y consulta los registros para confirmar la entrega de mensajes.

Visualización de los registros en la aplicación de Glitch

Conclusión

La integración de 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 crees para los eventos y las acciones que realicen los clientes.

En este artículo se ha abordado la conexión de estos dos servicios en un tutorial paso a paso para enviar mensajes de WhatsApp a contactos con detalles registrados en HubSpot. Has configurado procesos personalizados que activan acciones en función de eventos predefinidos. Además, has configurado un proceso que envía una notificación a un extremo configurado previamente e inicia una nueva tarea.

Para asegurarte de que el mensaje circule y entregue actualizaciones oportunas, pertinente y previstas a los clientes, debes prestar atención a la cantidad de mensajes. Evita enviar spam a los usuarios para mantener contentos e interesados a los clientes.

Para obtener más información sobre las formas de integrar WhatsApp en tus aplicaciones y proyectos, consulta nuestros otros tutoriales para desarrolladores.