Cómo enviar entradas de formulario de WordPress a WhatsApp

Publicado: 2023-01-16

¿Te preguntas cómo enviar entradas de formulario de WordPress a WhatsApp?

Esta puede ser una excelente manera de estar al tanto de los envíos de formularios, especialmente si WhatsApp es una parte importante de sus operaciones diarias.

No podrá enviar formularios completos a WhatsApp, pero puede configurar su sitio para enviar una notificación a un número de WhatsApp cada vez que se envíe un formulario en su sitio.

Pero conectar un sitio de WordPress con WhatsApp de esta manera puede ser complejo y la mayoría de las soluciones existentes son limitadas.

La buena noticia es que la integración de WPForms y Uncanny Automator proporciona una manera fácil y poderosa de hacer esto.

¡Sigue leyendo para aprender cómo configurarlo todo!

WPForms es el mejor complemento de WordPress Form Builder. ¡Consíguelo gratis!

¿Cómo se puede integrar WhatsApp en WordPress?

La forma más poderosa de integrar WhatsApp en WordPress es usando Uncanny Automator. Uncanny Automator puede conectarse con la API en la nube de WhatsApp, lo que permite a los usuarios participar en conversaciones bidireccionales con los usuarios de WhatsApp.

Si bien hay algunos complementos de WordPress que le permiten hacer cosas como responder a los mensajes de WhatsApp enviados por sus clientes y prospectos, Uncanny Automator es el único que le permite iniciar conversaciones de WhatsApp.

¡Aquí le mostramos cómo usar esto en su sitio!

Cómo enviar notificaciones de envío de formularios de WordPress a WhatsApp

Usaremos WPForms, Uncanny Automator, Facebook para desarrolladores y Business Meta para configurar las cosas. Si aún no tiene una cuenta de Facebook, deberá crear una para seguir.

Una vez que lo tengas, sigue estos pasos:

En este articulo

  • Paso 1: Instale WPForms y Uncanny Automator
  • Paso 2: conecta tu sitio con Uncanny Automator
  • Paso 3: crea una aplicación comercial en Facebook para desarrolladores
  • Paso 4: Crear un nuevo formulario
  • Paso 5: cree una nueva receta para enviar entradas de formulario de WordPress a WhatsApp

Paso 1: Instale WPForms y Uncanny Automator

The WPForms home page

Primero, comenzaremos instalando WPForms Pro. WPForms es el complemento de formulario de WordPress número uno para enviar notificaciones de envío de formularios a WhatsApp, con más de 5 millones de instalaciones activas y más de 11k calificaciones de 5 estrellas en el directorio de complementos de WordPress para demostrar su popularidad.

Además, WPForms se integra a la perfección con Uncanny Automator. Si tiene la licencia Pro, también obtiene una gran colección de funciones que hacen que la creación de formularios sea muy sencilla.

The WPForms pricing page

Para obtener ayuda con la instalación de WPForms, consulte esta útil guía para instalar complementos de WordPress para principiantes. Una vez que haya instalado WPForms, el siguiente paso es instalar Uncanny Automator.

Uncanny Automator homepage

Uncanny Automator es el principal complemento de automatización de WordPress, y puede usarlo para conectar y automatizar funciones en sus complementos y aplicaciones de WordPress. Incluso puede conectar varios sitios web de WordPress.

Y como mencionamos anteriormente, Uncanny Automator se integra a la perfección tanto con WPForms como con WhatsApp, lo que lo hace perfecto para crear una conexión entre las dos aplicaciones.

Así que adelante e instale Uncanny Automator como instaló WPForms arriba.

Paso 2: conecta tu sitio con Uncanny Automator

Puede conectar su sitio con Uncanny Automator desde el panel de administración de WordPress. Para hacer esto, haga clic en Automator » Configuración desde la barra lateral en el tablero de WordPress.

How to get to the Uncanny Automator settings page in WordPress

La página se abrirá en la pestaña General . Desplácese hasta la sección Licencia y haga clic en el botón etiquetado Conectar su sitio .

Click this button to connect your site to Uncanny Automator

Verá una ventana emergente donde ahora puede iniciar el asistente de configuración haciendo clic en Conectar su cuenta gratuita .

Button to trigger the Uncanny Automator setup wizard

En este punto, deberá ingresar su nombre y correo electrónico y configurar su cuenta de Uncanny Automator. Este paso toma solo un minuto o menos, y luego será redirigido a WordPress.

Ahora, está listo para crear una receta. Las recetas son reglas de Uncanny Automator que determinan cómo se ejecutará su automatización.

Completed Uncanny Automator setup

Pero para crear una receta que envíe notificaciones de envío de formularios de WordPress a WhatsApp, primero debemos configurar una aplicación comercial en Facebook para desarrolladores.

Saldremos de WordPress por un tiempo, pero mantendremos la pestaña abierta, ya que regresaremos.

Paso 3: crea una aplicación comercial en Facebook para desarrolladores

Para enviar formularios de WordPress a WhatsApp, primero debemos crear una aplicación Meta (Facebook) Business.

Para este paso, deberá tener una cuenta normal de Facebook. Si tiene una, es fácil crear una aplicación empresarial. Simplemente navegue a developer.facebook.com y haga clic en Mis aplicaciones para comenzar.

Facebook for Developers homepage

En el tablero, haga clic en Crear aplicación.

Create new app button

En esta pantalla, tendrá una variedad de tipos de aplicaciones para elegir. Seleccione Empresa, luego desplácese hacia abajo y haga clic en Siguiente .

Business app type

Después de esto, se le pedirá que proporcione cierta información básica, como el nombre de su nueva aplicación, la dirección de correo electrónico y su cuenta de Business Manager.

Suponemos que está comenzando desde cero, por lo que aún no tiene una cuenta de Business Manager. En este caso, déjelo en Sin cuenta de administrador comercial seleccionada . Pero si tiene uno, selecciónelo del menú desplegable. Haga clic en Crear aplicación para pasar a la siguiente etapa.

Button to create app

En la página siguiente, verá una serie de productos que puede agregar a su aplicación comercial. Desplácese hacia abajo para agregar WhatsApp a su nueva aplicación Business haciendo clic en Configurar .

Add WhatsApp

Esto lo redirigirá a una ventana de la API de WhatsApp Business Platform. Se le pedirá que cree o seleccione una cuenta Meta Business de un menú desplegable. Este campo se establecerá en Crear una cuenta comercial de forma predeterminada, por lo que si no tiene una, simplemente haga clic en Continuar para continuar.

WhatsApp Business Platform API setup

Una vez que haya hecho eso, haga clic en Comenzar a usar la API .

Click this button to start using the Whatsapp Business API

En la página siguiente, verá 5 pasos. Para esta guía, solo necesitaremos seguir los pasos 1, 3 y 5.

Desde el Paso 1, tome los siguientes detalles:

  • Token de acceso temporal
  • Identificación del número de teléfono
  • ID de cuenta comercial de WhatsApp

WhatsApp business app quick start page

Necesitaremos estos detalles cuando regresemos a WordPress en breve. Por ahora, notará que lo que tiene es un token de acceso temporal que vencerá en 23 horas.

Puede usarlo con fines de prueba, pero necesitará un token de acceso permanente para que la conexión funcione completamente. Le mostraremos cómo obtener un token permanente en breve.

En este punto, iremos a nuestro sitio web y regresaremos a la página de configuración de Uncanny Automator. Aquí, agregaremos nuestro token de acceso, ID de número de teléfono e ID de cuenta comercial de WhatsApp a Uncanny Automator.

Para hacer esto, diríjase al panel de administración de WordPress y haga clic en Automator » Configuración » Integraciones premium » WhatsApp. Luego pegue los detalles y haga clic en Conectar cuenta de WhatsApp .

Click this button to connect WhatsApp Account

Tendremos una conexión de Uncanny Automator y WhatsApp en funcionamiento en este momento, pero hemos usado un token de acceso temporal, que caducará en unas pocas horas.

Tendremos que crear uno permanente en unos pocos pasos cuando configuremos los webhooks. Pero primero, agreguemos un número de teléfono a su aplicación comercial.

Agregue un número de teléfono a su aplicación

Configurar un número de teléfono es un paso importante que le permitirá enviar mensajes a los números de WhatsApp.

Para agregar uno a su aplicación comercial, desplácese hacia abajo hasta el Paso 5 y haga clic en Agregar número de teléfono . Si eligió Crear una cuenta comercial cuando ingresó por primera vez a la plataforma de WhatsApp Business, ahora aparecerá un modal que le pedirá que cree un perfil de WhatsApp Business .

Aquí, deberá ingresar algunos detalles:

  • Nombre para mostrar del perfil de WhatsApp Business
  • Zona horaria
  • Categoría
  • Descripción de la empresa (opcional)

Create a WhatsApp business profile

En la página siguiente, habrá algunos campos más que deberá completar:

  • nombre legal de la empresa
  • Email de negocios
  • País
  • Sitio web comercial/URL o un perfil de redes sociales

Haga clic en Siguiente una vez que haya terminado.

Fill in your business information

Ahora, puede continuar para ingresar el número de teléfono que le gustaría usar con WhatsApp.

Deberá usar un número que no se pueda usar en ningún otro lugar de WhatsApp. Por lo tanto, debe usar un número que nunca se haya conectado a una cuenta de WhatsApp o eliminar la cuenta si su número ya está conectado a WhatsApp.

Add a phone number for WhatsApp messaging

A continuación, necesitaremos configurar webhooks.

Configurar webhooks

Los webhooks son una parte importante de cómo Uncanny Automator se comunicará con WhatsApp. Para configurar esto, desplácese hacia abajo hasta el Paso 3 y haga clic en Configurar webhooks .

Button to configure webhooks

En la página de configuración de Webhooks, haga clic en el botón Editar en la sección denominada Configuración .

Press this button to edit webhook

Ahora, volveremos rápidamente a la configuración de WhatsApp en Automator. Copie la URL de los webhooks junto con el valor en el campo etiquetado Verificar token.

Configure webhook details in Uncanny Automator

Regrese a la pestaña de WhatsApp Business, ingrese estos detalles y luego haga clic en Verificar y guardar.

Press this button to verify token

Hay un paso más que dar aquí. Desplácese hacia abajo y haga clic en Administrar .

Press this button to manage webhook settings

Luego, desplácese hacia abajo nuevamente hasta Mensajes y haga clic en Suscribirse. Guarde esta configuración y su webhook estará completamente configurado.

Click this button to subscribe for messages

Finalmente, necesitaremos configurar un token de acceso permanente y estaremos listos para comenzar a enviar notificaciones de envío de formularios a WhatsApp.

Configurar un token de acceso permanente

Primero, tendremos que agregar un nuevo usuario del sistema a su aplicación comercial. Para hacer esto, deberá iniciar sesión en Meta Business Suite y hacer clic en Configuración comercial .

Press this button to open the business settings tab

Luego, busque el vínculo Usuarios del sistema en Usuarios.

Add new system users

Haga clic en Agregar para comenzar.

Add new system user

Ingrese un nombre para el nuevo usuario del sistema y asígnele la función de administrador desde el menú desplegable Rol de usuario del sistema , luego haga clic en Crear usuario del sistema .

Fill in the details and click create system user

Ahora, deberá asignar activos al nuevo usuario. En particular, queremos que este usuario tenga acceso total a la aplicación comercial de WhatsApp que hemos creado.

Así que nos desplazaremos hacia abajo hasta la sección Activos asignados y haremos clic en Agregar activos .

Add assets to system user

Luego, en la sección Aplicaciones , haga clic en la aplicación que desea agregar; debe tener solo una en esta etapa, desplácese hacia abajo y cambie el botón junto al botón Administrar aplicación . Haga clic en Guardar para pasar a la siguiente etapa.

Toggle the manage app button

Ahora podemos seguir adelante para crear nuestro nuevo token. Simplemente haga clic en Generar nuevo token en la sección denominada Generación de tokens de acceso .

Generating access tokens

De los permisos disponibles, elija whatsapp_business_management y whatsapp_business_messaging y, nuevamente, haga clic en Generar token .

Tick WhatsApp business management

Copie el token y haga clic en Aceptar .

Copy and save token

Ahora, regresaremos a la configuración de Automator, donde previamente ingresamos el token de acceso temporal y otros detalles. Para volver aquí, haga clic en Automator » Configuración » Integraciones Premium » WhatsApp . Una vez allí, haz clic en Desconectar .

Copy webhooks URL from Uncanny Automator settings

Cambie el token de acceso temporal que ingresó anteriormente por el permanente que acabamos de crear y guarde esta configuración.

Y ahora, tendremos una conexión entre su sitio, Uncanny Automator y WhatsApp, pero aún no será completamente funcional.

Paso 4: Crear un nuevo formulario

En este punto, habrá terminado de trabajar con la plataforma de Facebook para desarrolladores.

Para enviar formularios de WordPress a WhatsApp, ahora tendremos que configurar una receta de Uncanny Automator y habilitar esta receta en los formularios que nos gustaría enviar a WhatsApp.

Primero, necesitaremos habilitar Uncanny Automator en un formulario de WPForms. Ya sea que esté conectando un formulario existente o uno nuevo, esto es bastante fácil. Para esta guía, asumiremos que desea crear un nuevo formulario, pero los pasos son los mismos.

Desde el área de administración de WordPress, vaya a WPForms » Plantillas de formulario . Esto lo llevará a la galería de plantillas, donde puede elegir entre más de 500 plantillas de formulario personalizables y prediseñadas.

Click WPForms first then click Form Templates

Para esta guía, elegiremos la Plantilla de formulario de contacto simple . Pero si desea crear uno desde cero, simplemente elija Formulario en blanco .

Al hacer clic en Plantilla de formulario de contacto simple, se abrirá el formulario en el generador de formularios. Podemos personalizar el formulario agregando campos de formulario desde el panel de la izquierda, pero el formulario de contacto simple es lo suficientemente bueno para este ejemplo, así que lo dejaremos como está.

WPForms Form Builder interface

Lo que queremos hacer es configurar este formulario en particular para enviar envíos a WordPress. Por lo tanto, navegue hasta la barra lateral izquierda y haga clic en Marketing » Uncanny Automator.

Click on marketing then click Uncanny Automator

Haga clic en Crear automatización.

Click the create automation button

Ahora se le pedirá que conecte su cuenta de WhatsApp con Uncanny Automator. Continúe y haga clic en Conectar cuenta para continuar.

Click this button to connect WhatsApp with Uncanny Automator

Ahora serás redirigido a una página de recetas de Uncanny Automator.

Paso 5: cree una nueva receta para enviar entradas de formulario de WordPress a WhatsApp

Las recetas de Uncanny Automator tienen dos partes: un disparador y un evento. El disparador es la acción o evento inicial que desencadena una acción de seguimiento llamada evento.

En este caso, el envío de un formulario será el desencadenante y la acción será recibir una notificación en un número de WhatsApp.

Entonces, primero, navegue a la sección Activadores y haga clic en el logotipo de WPForms , luego elija Se envía un formulario como su activador.

Select form submission as a trigger

Luego, desplácese hacia abajo hasta la sección Acciones y haga clic en Agregar acción .

Click this button to add an action

Busque el logotipo de WhatsApp y haga clic en él cuando lo encuentre.

Click the WhatsApp icon to choose an action in WhatsApp

Luego haga clic en Elegir acción. Verá las opciones para Enviar una plantilla de WhatsApp a un número de WhatsApp y Enviar un mensaje de WhatsApp a un número.

De forma predeterminada, su primer mensaje a un número de WhatsApp utilizando la API de WhatsApp Cloud tiene que ser una plantilla de mensaje de WhatsApp. Una vez que el destinatario de la plantilla de mensaje responda a su mensaje inicial, podrá enviarle un mensaje normal.

Ninguna de las plantillas de mensajes de WhatsApp disponibles está diseñada para usarse para notificaciones de envío de formularios. Sin embargo, dado que configurará esta notificación para uso interno, es posible que no le importe usar una de las plantillas de mensajes de WhatsApp complementarias. Así que adelante, haz clic en Enviar una plantilla de mensaje de WhatsApp a un número .

Select send WhatsApp message template to a number

Puede realizar personalizaciones limitadas en estas plantillas predeterminadas extrayendo datos usando variables preestablecidas. Esto es lo que debe hacer:

Haga clic en Obtener variables para agregar variables como el nombre y el correo electrónico de un usuario a la plantilla.

Click the get variables button

Lo que estamos buscando son variables para agregar contenido al cuerpo de la plantilla. Entonces, en el campo Variables del cuerpo , haga clic en el asterisco para ver las variables disponibles.

Click on the asterisk to see the available tokens

Simplemente seleccione el tipo de variable que desea y luego seleccione los tokens que le gustaría incluir en la plantilla.

The variable types dropdown menu

En este caso, elegiremos de la sección Activadores, ya que el activador es una acción en WPForms y queremos tokens específicos de WPForms.

Cuando se desplaza por debajo de la etiqueta Activadores, verá el activador de nuestra receta, que es el envío de un formulario. Haga clic en el icono desplegable junto a él.

Click the dropdown below the Triggers label

Ahora verá un montón de tokens específicos de WPForms para elegir.

WPForms-specific tokens

Seleccionaremos Nombre , Correo electrónico y el campo de mensaje para nuestro formulario, que tiene la etiqueta En qué podemos ayudarlo. El tuyo podría ser algo diferente.

También puede agregar un poco de texto a la plantilla para ayudar a organizar las cosas. Agregaremos algunas etiquetas a las nuestras, junto con algunos signos de puntuación. Recuerde agregar algunos espacios entre el contenido. Si no lo hace, el texto aparecerá sin espacios cuando reciba notificaciones.

WhatsApp message template with WPForms tokens added

Recuerde alternar el botón Estado a la derecha de la página para hacer la conexión en vivo, ¡y eso es todo!

Toggle the draft button to make the automation live

Ahora tendrá una conexión completamente activa que envía un mensaje a un número de WhatsApp cada vez que se envía un formulario en su sitio web.

WhatsApp message created when user submits a form

Verás el nombre del usuario, que es Sullie Eloso, en este caso, y su dirección de correo electrónico, [email protected] También verás que la plantilla agrega un poco de texto que no es útil. No podemos cambiar esto desde su sitio, pero puede crear una plantilla totalmente personalizada, si lo prefiere, en la plataforma Meta Business Manager.

¡Y eso concluye nuestra guía para enviar notificaciones de envío de formularios a WhatsApp!

A continuación, obtenga notificaciones de Slack cuando se envíe un formulario

Acabamos de mostrarle cómo configurar su sitio web para enviar notificaciones de envío de formularios a un número de WhatsApp. ¿Sabías que puedes hacer lo mismo con Slack? Aprende todo sobre esto en nuestra guía para recibir notificaciones de Slack desde los formularios de WordPress.

¿Listo para construir tu formulario? Comience hoy con el complemento de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Crea tu formulario de WordPress ahora

Y si este artículo le resultó útil, asegúrese de seguirnos en Facebook y Twitter para obtener más información del blog.