Cómo conectar n8n con Workflow Webhooks

Resumen de los casos de uso

Esta configuración conecta su flujo de trabajo de correos electrónicos posteriores a la compra en n8n con Workflow Webhooks, de modo que pueda recopilar los datos de los clientes para una auditoría mensual de SEO y enviarlos a Shopify Flow.

En este ejemplo, el cliente recibe un correo electrónico con un formulario de encuesta (utilizamos Google Forms, que añade una entrada en la hoja de cálculo de Google) en el que se le solicita lo siguiente:

• ¿Cuál es la URL de su tienda Shopify?
• ¿Cuál es su mayor reto en materia de SEO en este momento? Con las siguientes opciones: slow traffic growth, poor product rankings, thin content, technical errors
• ¿Desde cuándo lleva su tienda en funcionamiento? Con estas opciones: less than 6 months, 6–12 months, 1–3 years, 3+ years
• ¿Es este el correo electrónico que utilizó para realizar el pedido en la tienda?

Cuando el cliente envía el formulario, n8n envía las respuestas a su punto final Workflow Webhooks. A continuación, Shopify Flow puede etiquetar al cliente y añadir una nota para que su equipo de SEO pueda ver el contexto de inmediato en el panel de administración de Shopify.

En qué consiste este flujo de trabajo

Una vez que el cliente envía el formulario en su flujo de correo electrónico, los datos se añaden a la hoja de cálculo y, desde allí, n8n envía los datos al webhook Workflow Webhooks, y este webhook envía dicha payload a Shopify Flow:

{
  "name": "Saad",
  "email": "customer@example.com",
  "store_url": "mystore.myshopify.com",
  "seo_challenge": "poor product rankings",
  "store_age": "1-3 years"
}

Su flujo de trabajo de Shopify Flow sería, por tanto:

• añade la etiqueta de cliente seo-audit-pending
• añade una nota del cliente con la URL de la tienda y el reto de SEO

Esto facilita que su equipo abra el expediente del cliente en el panel de administracion de Shopify y compruebe qué aspectos requieren atención antes de que comience la auditoría.

Guía en vídeo

Aquí puede ver el vídeo de toda la configuración; el vídeo no tiene sonido. Puede aumentar o reducir la velocidad del vídeo según sus necesidades.

Antes de empezar

• Instale y active «Workflow Webhooks» en su tienda de Shopify.
• Tenga preparado un flujo de trabajo de Shopify Flow o cree uno nuevo en Shopify Flow.
• Cree su formulario de registro en la herramienta que alimenta su flujo de trabajo de n8n. Yo utilizo Google Forms; una vez enviado el formulario, se crea una entrada en las hojas de cálculo de Google. datos recibidos del formulario de Google en una hoja de cálculo
• Asegúrese de recopilar la dirección de correo electrónico del cliente tal y como figura en Shopify, para que Shopify Flow pueda identificar al cliente correcto.

Configure la conexión

En Workflow Webhooks, cree el webhook.

Introduzca el nombre y genere un token estático (puede crear el token estático al instante pulsando el botón mágico que aparece en el número 3 de la siguiente imagen) y guarde los datos.

En la sección «Configuración avanzada», asigne un nombre a las variables que desee recibir:

• name
• email
• store_url
• seo_challenge
• store_age

En la configuración disponemos de cuatro variables, que hemos asignado a «name», «email», «store_url» y «seo_challenge»; además, hemos marcado la opción «Permitir cuerpo de solicitud personalizado» para recibir otra información, como «store_age».

En el activador de Google Sheets, seleccione la hoja correcta que desee supervisar y cree una entrada de prueba en el formulario para ver los datos.

A continuación, seleccione la acción «Solicitud HTTP» para enviar los datos del formulario al webhook que haya creado mediante la aplicación Workflow Webhooks.

Puede seguir los pasos que se indican al final de la página Workflow Webhooks, indicando los campos asignados, el token de API y la URL del webhook.

He añadido la URL, he seleccionado el método POST y he añadido los encabezados de esta manera en la acción «Solicitud HTTP» de n8n.

A continuación, he asignado las variables creadas en el webhook a las preguntas propiamente dichas. En el vídeo de demostración podrá ver cómo arrastro y suelto la respuesta en los campos. También he añadido la variable «store_age», que se encontraba debajo de la página desplazable y no cabía en la captura de pantalla.

A continuación, ejecute el paso y compruebe los datos enviados desde n8n a su webhook en la aplicación Workflow Webhooks. En las invocaciones, podrá ver que el sistema externo ha invocado este webhook y consultar también el payload. Puede utilizar este payload en su Shopify Flow para realizar cualquier acción.

Dado que su webhook ha recibido correctamente los datos de n8n, guarde y publique el flujo de trabajo.

En Shopify Flow, cree un flujo de trabajo que se inicie cuando se reciban los datos de su webhook a través de Workflow Webhooks. A continuación, en el activador del webhook, haga clic en «Registrar eventos».

Ahora vaya a la llamada al webhook anterior y vuelva a ejecutar el webhook para enviar esta payload a su activador de webhook en Shopify Flow.

Ahora, en los datos, puede ver la payload y también el ID del webhook.

Podrá ver el mismo webhook en el panel de control de webhooks y puede utilizarlo para identificar su webhook.

Ahora añada la condición: si el ID del webhook recibido coincide con el ID del webhook que ha creado para el flujo de n8n, realice las acciones relacionadas con el formulario. Esto se debe a que cada activador de webhook recibe los datos enviados a cualquier URL de webhook de la aplicación Workflow Webhooks, y este ID le ayudará a seleccionar los datos pertinentes del webhook para un fin específico.

Utilice el valor del correo electrónico entrante para buscar al cliente correspondiente mediante la consulta avanzada. En la consulta puede utilizar el correo electrónico, y este correo electrónico se obtiene de las variables de activación del webhook. En mi caso, «fieldTwo» es el correo electrónico. Mi consulta tiene este aspecto: email:"{{fieldTwo}}"

Ahora compruebe si el cliente existe. Estoy comprobando si existe el identificador del cliente.

](https://shopify.github.io/liquid/basics/whitespace/), {{-, -}}, {%- y -%} para eliminar los espacios en blanco de la izquierda o la derecha del ID del cliente. Si hay algún espacio en blanco, la consulta no funcionará.

{%- for getCustomerData_item in getCustomerData -%}
  {{-getCustomerData_item.id-}}
{%- endfor -%}

Añada o actualice la nota del cliente con la URL de la tienda y el reto de SEO. Para obtener el ID del cliente, en la configuración he utilizado este código: he empleado el control de espacios en blanco de en la sintaxis de la etiqueta {{-, -}}, {%- y -%} para eliminar los espacios en blanco del lado izquierdo o derecho del ID del cliente. Si hay algún espacio en blanco, la consulta no funcionará.

{%- for getCustomerData_item in getCustomerData -%}
  {{-getCustomerData_item.id-}}
{%- endfor -%}

Active el flujo de trabajo, envíe una respuesta de prueba desde su formulario y compruebe que el registro de cliente correcto en Shopify reciba la etiqueta y la nota.

Esto funciona de la siguiente manera: se envía el formulario -> N8N recibe los datos -> N8N envía los datos al webhook de Workflow Webhooks -> el webhook de Workflow Webhooks activa el Shopify Flow -> usted filtra el activador de flujo en función del ID del webhook -> a continuación, recupera el cliente en función de dicho ID -> comprueba si el cliente está presente -> añade la etiqueta -> añade la nota

La etiqueta y la nota se ven tal y como se muestra en la siguiente imagen para el cliente.