Cómo integrar Shopify con Whaticket usando n8n

Con esta integración, cada vez que un visitante completa el formulario de contacto de tu tienda Shopify, n8n captura los datos y envía un mensaje de WhatsApp por Whaticket. Así tu equipo comercial atiende al lead mucho más rápido.

Qué cambia en tu operación

Los datos del formulario de Shopify llegan solos a Whaticket.
El lead recibe un mensaje en WhatsApp justo después de enviar el formulario.
La captación de leads queda centralizada en tu plataforma de atención.

Antes de empezar

Ten una tienda activa en Shopify y acceso de administrador al editor de temas.
Ten una cuenta en n8n.
En Whaticket, tu perfil necesita el permiso Crear del grupo Tokens de API para generar el token.
El perfil elegido para el token necesita los permisos Crear e Iniciar del grupo Campañas, que la API Send usa para enviar mensajes.
La conexión de WhatsApp que usarás para el envío debe estar conectada.
Cada mensaje enviado por la API Send consume créditos de mensaje.

Paso a paso:

Abre el código del tema en Shopify

En Shopify, entra en Canales de ventas y selecciona Tienda online.
Abre Temas.
En el tema que usas, haz clic en los tres puntos y selecciona Editar código.

Ubica el archivo del formulario de contacto

En el editor de código, abre la carpeta Blocks.
Abre el archivo del formulario de contacto, normalmente contact-form.liquid.

Inserta el script del Webhook en el formulario

En el archivo del formulario, agrega el siguiente script. Captura nombre, correo, teléfono y mensaje del formulario y envía todo al Webhook de n8n con el método POST.

<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>

Reemplaza WEBHOOK_URL por la URL del Webhook de tu flujo en n8n, que copias en el siguiente paso.
Guarda el archivo.

Configura el nodo Webhook en n8n

En n8n, crea un workflow y agrega un nodo Webhook.
En HTTP Method, selecciona POST.
En Authentication, deja None.
En Respond, selecciona Immediately.
Copia la URL de prueba o de producción del Webhook y pégala en el script de Shopify.

Prueba la recepción de los datos

En el nodo Webhook, haz clic en Listen for test event.
Envía un formulario de prueba desde tu tienda Shopify.
Revisa que el Webhook muestre los encabezados, los parámetros y el cuerpo recibido.

Genera el token en Whaticket

En el menú de la izquierda de Whaticket, haz clic en Integraciones y abre la pestaña Tokens.
Haz clic en Nuevo token, escribe un Nombre y, en Perfil, elige un perfil con los permisos Crear e Iniciar del grupo Campañas.
Haz clic en Guardar.
En la ventana Copia la clave del token, copia la clave. No vuelve a aparecer después de cerrar la ventana.

Copia el ID de la conexión

En Whaticket, haz clic en Conexiones.
En la tarjeta de la conexión que enviará los mensajes, abre el menú de acciones y haz clic en Editar.
En la ventana Edita Conexión, haz clic en el ícono de copiar junto al título.

Crea el nodo HTTP Request para Whaticket

Después del Webhook, agrega un nodo HTTP Request.
En Method, selecciona POST.
En URL, escribe https://api.whaticket.com/api/v1/messages.
Activa Send Headers y agrega dos parámetros: accept con el valor */* y Authorization con el valor Bearer, un espacio y la clave del token.

Arma el JSON del mensaje

Activa Send Body, selecciona JSON en Body Content Type y Using JSON en Specify Body.
Pega el siguiente modelo y cambia ID_DE_TU_CONEXION por el ID que copiaste.

{
  "connectionId": "ID_DE_TU_CONEXION",
  "messages": [
    {
      "number": "TELEFONO_DEL_FORMULARIO",
      "name": "NOMBRE_DEL_FORMULARIO",
      "body": "MENSAJE_DEL_FORMULARIO"
    }
  ]
}

En los datos del Webhook, arrastra el campo telefone al lugar de TELEFONO_DEL_FORMULARIO, el campo nome a NOMBRE_DEL_FORMULARIO y el campo mensagem a MENSAJE_DEL_FORMULARIO. n8n crea la referencia al dato automáticamente.
Si quieres, escribe un texto fijo en body junto con los datos, como un saludo.

El campo name se usa para crear el contacto en Whaticket cuando el número todavía no existe. Sin él, el contacto queda con el número como nombre.

Confirma el envío

Haz clic en Execute Step en el nodo HTTP Request.
Revisa que la respuesta sea messages scheduled. Indica que Whaticket recibió y programó el envío.
Prueba con la URL de prueba del Webhook antes de activar el workflow con la URL de producción.

Preguntas frecuentes

¿En qué formato debe llegar el teléfono?
En formato internacional, con código de país y de área, solo con dígitos (por ejemplo, 5491112345678). Revisa que el campo de teléfono de tu formulario recoja el número así.

¿Puedo usar una conexión de la API de WhatsApp (Cloud API)?
Sí, pero en las conexiones de la API de WhatsApp la API Send solo envía plantillas de mensaje aprobadas. Incluye el campo templateId con el ID de la plantilla en el JSON.

La respuesta empezó con You have ... credits. ¿Qué significa?
La empresa no tiene créditos para todos los mensajes. Los que no vayan a chats con conversación abierta dejan de enviarse cuando se acaban los créditos.

El script no envía nada. ¿Qué reviso?
Revisa que el formulario de tu tema use la clase contact-form__form y los campos contact[name], contact[email], contact[phone] y contact[body]. Otros temas pueden usar nombres distintos; en ese caso, ajusta el script o pide ayuda a una persona desarrolladora.