Esta integración permite que, cada vez que un visitante complete un formulario dentro de tu tienda Shopify, la información enviada sea capturada automáticamente por n8n y posteriormente enviada como mensaje hacia Whaticket, agilizando la atención comercial y automatizando el flujo de captación de leads.

🔵 ¿Qué lograrás con esta integración?

▪️ Recibir automáticamente los datos enviados desde formularios de Shopify
▪️ Automatizar el envío de mensajes hacia Whaticket
▪️ Mejorar el tiempo de respuesta de tu equipo comercial
▪️ Centralizar la captación de leads dentro de tu plataforma de atención

🔵 Requisitos previos

Antes de comenzar, asegúrate de contar con lo siguiente:

▪️ Una tienda activa en Shopify
▪️ Acceso administrativo al editor de temas de Shopify
▪️ Una cuenta activa en n8n
▪️ Un flujo creado dentro de n8n con nodo Webhook
▪️ Token de API activo en Whaticket
▪️ ID de conexión configurado en Whaticket

🔵 Paso 1: Acceder al código de tu tema en Shopify

Dentro de Shopify deberás ingresar en la configuración del tema para editar el código fuente de tu tienda.

Ruta de navegación:

▪️ Ir a Canales de ventas
▪️ Seleccionar Loja virtual
▪️ Ingresar en Temas
▪️ Presionar en los tres puntos del tema deseado
▪️ Seleccionar Editar código

🔵 Paso 2: Localizar el archivo del formulario de contacto

Una vez dentro del editor de código, deberás encontrar el archivo correspondiente al formulario que será utilizado para capturar la información enviada por el cliente.

Normalmente este archivo se encuentra dentro de la carpeta:

▪️ Blocks

Y el archivo utilizado generalmente es:

▪️ contact-form.liquid

Leyenda: Archivo del formulario de contacto donde se insertará el script de integración.

🔵 Paso 3: Insertar el script de Webhook de n8n dentro del formulario

Dentro del archivo del formulario deberás agregar el código JavaScript encargado de capturar los datos ingresados y enviarlos automáticamente al Webhook generado por n8n.

Este script será responsable de:

▪️ Capturar nombre
▪️ Capturar correo electrónico
▪️ Capturar teléfono
▪️ Capturar mensaje del formulario
▪️ Enviar toda la información al Webhook mediante método POST

Importante:

▪️ Debes reemplazar la URL del Webhook por la URL generada en tu propio flujo de n8n

<script>

(function() {

  var N8N_WEBHOOK_URL = 'WEBHOOK_URL';




  document.addEventListener('DOMContentLoaded', function() {

    var forms = document.querySelectorAll('.contact-form__form');




    forms.forEach(function(form) {

      form.addEventListener('submit', function() {

        var nome     = (form.querySelector('[name="contact[name]"]') || {}).value || '';

        var email    = (form.querySelector('[name="contact[email]"]') || {}).value || '';

        var telefone = (form.querySelector('[name="contact[phone]"]') || {}).value || '';

        var mensagem = (form.querySelector('[name="contact[body]"]') || {}).value || '';




        fetch(N8N_WEBHOOK_URL, {

          method: 'POST',

          headers: { 'Content-Type': 'application/json' },

          body: JSON.stringify({

            nome: nome,

            email: email,

            telefone: telefone,

            mensagem: mensagem

          })

        })

        .then(function(res) { console.log('[n8n] Webhook enviado, status:', res.status); })

        .catch(function(err) { console.error('[n8n] Erro:', err); });

      });

    });

  });

})();

</script>

🔵 Paso 4: Configurar el nodo Webhook dentro de n8n

Ahora será necesario crear un nodo Webhook dentro de n8n para recibir la información enviada desde Shopify.

Configura el Webhook de la siguiente manera:

▪️ Método HTTP: POST
▪️ Authentication: None
▪️ Respond: Immediately

Una vez configurado:

▪️ Copia la URL de prueba o producción del Webhook
▪️ Utilízala dentro del script insertado en Shopify

🔵 Paso 5: Validar recepción de datos en n8n

Después de configurar el Webhook, deberás activar la opción Listen for test event y enviar un formulario de prueba desde Shopify.

Si todo está correcto:

▪️ El Webhook capturará automáticamente la solicitud
▪️ Mostrará headers, parámetros y body recibido

🔵 Paso 6: Crear el nodo HTTP Request para enviar información a Whaticket

Después del Webhook, deberás agregar un nodo HTTP Request para enviar la información capturada hacia la API de Whaticket.

Configuración recomendada:

▪️ Método: POST
▪️ URL: https://api.whaticket.com/api/v1/messages
▪️ Body Content Type: JSON

🔵 Paso 7: Configurar autenticación de la API de Whaticket

Dentro del nodo HTTP Request deberás agregar el token de autorización de tu API.

En Headers:

▪️ accept: /
▪️ Authorization: Bearer TU_TOKEN_DE_API

Importante:

▪️ Sustituye el token de ejemplo por tu token real generado dentro de Whaticket

🔵 Paso 8: Estructurar el JSON de envío para Whaticket

Ahora deberás montar el cuerpo JSON con la estructura que será enviada a Whaticket.

Este JSON debe contener:

▪️ ID de conexión
▪️ Número del cliente
▪️ Mensaje personalizado
▪️ Variables dinámicas capturadas desde Shopify

Ejemplo de información enviada:

▪️ Nombre del cliente
▪️ Teléfono del cliente
▪️ Correo electrónico
▪️ Mensaje enviado desde formulario

{
  "connectionId": "TU_CONNECTIONID",
  "messages": [
    {
      "number": "{{$json.body.telefone}}",
      "name": "Whaticket",
      "body": "{{ $json.body.mensagem }}"
    }
  ]
}

🔵 Paso 9: Validar el envío exitoso hacia Whaticket

Una vez ejecutado el nodo HTTP Request correctamente, n8n mostrará la confirmación del envío.

Respuesta esperada:

▪️ messages scheduled

Esto significa que el mensaje fue programado correctamente para ser enviado a Whaticket.

🔵 Información importante

▪️ Recomendamos probar primero utilizando la URL de prueba del Webhook antes de pasar a producción
▪️ Verifica siempre que el número recibido desde Shopify tenga formato internacional correcto
▪️ Asegúrate de que la conexión de Whaticket esté activa antes de probar el flujo
▪️ El token API utilizado debe contar con permisos de envío de mensajes

🔵 Resumen final

Con esta integración habrás conectado exitosamente:

▪️ Shopify como captador de formularios
▪️ n8n como automatizador del flujo
▪️ Whaticket como plataforma de recepción y gestión de mensajes

Gracias a este proceso, cada vez que un cliente complete un formulario en Shopify, la información será enviada automáticamente a Whaticket sin necesidad de intervención manual, permitiendo una atención más rápida, organizada y profesional.

¿Tienes dudas adicionales? No te preocupes, estamos aquí para ayudarte. Entra en contacto con nuestro equipo presionando el botón de "Soporte" ubicado en el menú izquierdo de nuestra plataforma.