Webhooks y Snippets en WordPress con Make

Por /
Webhooks y Snippets en WordPress con Make

¿Tu formulario “envía correos” o enciende ventas? La respuesta separa una web bonita de un negocio que respira datos. Hoy bajamos a tierra un combo que ya nos funcionó: Webhooks + Snippets en WordPress + Make. ¿La promesa? Cada envío de formulario crea un contacto, avisa al equipo, alimenta tu CRM y registra una conversión—en segundos.

Resumen ejecutivo (para decidir en 30s):

  • Webhook = URL que recibe un JSON cuando ocurre un evento (ej. envío de formulario).
  • Snippet = fragmento PHP que “escucha” el envío y hace un POST al webhook.
  • Make = orquestador que recibe ese JSON y dispara acciones: Sheets + Email + CRM + Analytics.
  • Resultado: menos fricción, más velocidad, trazabilidad y automatizaciones reales.

Índice

  1. ¿Qué es un Webhook?
  2. ¿Qué es un Snippet?
  3. Arquitectura en 1 minuto
  4. Arranque rápido (10 pasos)
  5. Implementación en WordPress (CF7 y WPForms)
  6. Configuración en Make (Custom Webhook + Router)
  7. Seguridad y cumplimiento (HMAC, API Key, minimización)
  8. Medición: UTMs, página de “Gracias” y conversiones
  9. Depuración y errores comunes (con soluciones)
  10. Plantillas listas: payload JSON y snippets base
  11. FAQ expres
  12. Conclusiones + CTA

1) ¿Qué es un Webhook?

Es una URL receptora que tu web llama automáticamente con un JSON cada vez que algo pasa (ej. “nuevo envío”). No “pregunta” el CRM; WordPress empuja los datos.
Traducción a negocio: respuestas más rápidas, menos tareas manuales, datos limpios para vender mejor.

2) ¿Qué es un Snippet?

Un bloque de código PHP que agregas (ideal con el plugin Code Snippets) para personalizar WordPress sin plugins pesados. Aquí lo usamos para:

  • Engancharnos al evento “formulario enviado”.
  • Construir un JSON limpio (datos + meta + UTMs).
  • Enviar ese JSON al webhook (Make).

3) Arquitectura en 1 minuto

[Usuario] → envía formulario
   ↓
[WordPress] + Snippet → arma JSON → POST a Webhook
   ↓
[Make: Custom Webhook] → Router → (Sheets + Email + CRM + Analytics)
   ↓
[Negocio] → lead registrado, notificado, medido y accionable

4) Arranque rápido (10 pasos)

  1. Crea el formulario (CF7 o WPForms).
  2. Instala Code Snippets y pega el snippet.
  3. Define $webhook_url (Custom Webhook de Make).
  4. (Opcional) Activa API Key en ese webhook y guárdala.
  5. Añade en el snippet el header x-make-apikey: TU_CLAVE si lo habilitaste.
  6. En Make, pon el escenario en Run once.
  7. Envía un test real desde la web.
  8. Mapea campos y encadena módulos (Sheets, Email, CRM).
  9. Activa logs en WordPress y prueba 2–3 escenarios reales.
  10. Publica y mide conversiones con página de “Gracias”.

5) Implementación en WordPress

Opción A: Contact Form 7 (CF7) – Snippet con mapeo explícito

Colócalo en Code Snippets (Run everywhere). Ajusta el título del formulario y la URL del webhook.

Opción B: WPForms – Snippet base

La gracia: toma etiquetas de los campos y las convierte en claves.

Tip: prueba primero contra webhook.site; si llega allí, tu lado WordPress está ok.

6) Configuración en Make (Custom Webhook + Router)

  1. Crea un escenario y añade Webhooks → Custom Webhook.
  2. Add → Add a new webhook → nómbralo (ej. quote_form_siteA).
  3. Run once y envía el formulario desde WordPress.
  4. Mapea campos del JSON entrante.
  5. Añade un Router y crea ramas por source (dominio) o por service (tipo de trabajo).
  6. Encadena módulos:
    • Google Sheets → Add a Row (registro de leads)
    • Email/Outlook/Gmail → Send Email (notificación)
    • Telegram/Slack → Send Message (alerta inmediata)
    • Dolibarr/HubSpot/Pipedrive → Create/Upsert Contact
    • HTTP → Make a request (integraciones propias)
    • Google Analytics / Ads (Measurement Protocol) (evento de conversión)

Si activas API key authentication en ese webhook, recuerda el header x-make-apikey en el snippet (si no, 401 “Unauthorized”).

7) Seguridad y cumplimiento

  • HTTPS en el destino.
  • Firma HMAC (X-Signature) si luego reenvías a otros servicios o validas origen.
  • x-make-apikey si habilitas auth en Make (no se muestra en logs de Make por seguridad).
  • Minimiza datos (solo lo necesario).
  • Privacidad: documenta propósito (cotizar/retornar llamada) y conserva UTMs con respeto a normativa local.

8) Medición: UTMs, página “Gracias” y conversiones

  • Captura UTMs (utm_source, utm_medium, utm_campaign, etc.) como hidden fields y remítelos en el JSON.
  • Página de Gracias con evento “lead_submitted” (GA4/Ads).
  • Atribución: guarda page_url y UTMs en Sheets/CRM para saber qué campaña trae ventas.

9) Depuración y errores comunes

  • Activa logs en wp-config.php: define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('WP_DEBUG_DISPLAY', false); @ini_set('display_errors', 0); Revisa wp-content/debug.log.
  • 401 Unauthorized (Make) → faltó x-make-apikey o región incorrecta en la URL.
  • No se dispara el hook → el formulario falló validación (revisa campos/captcha).
  • Tiempo de espera → sube timeout a 15 s.
  • Firewall → si wp_remote_post() falla, prueba webhook.site; si allí funciona, revisa WAF/IP allowlist en el destino.

10) Prompt Listo

A) Prompt Maestro

Actúa como un ingeniero de automatización WordPress + Make
Objetivo: cuando un usuario envía el formulario en WordPress, quiero que los datos se envíen por Webhook a Make, se registren en Google Sheets, se notifique por email y se cree/actualice un contacto en un CRM. Proporciona código listo.

🧩 CONTEXTO FIJO DEL PROYECTO

  • Marca/Sitio: MISITIO.COM
  • CMS: WordPress (tema XXXXX)
  • Plugin de formulario: TU PLUGIN UTILIZADO
  • Formulario activo: título EXACTO «FORMULARIO PUBLICADO»
  • Shortcode de referencia: [TU SHORT CODE]
  • Campos formulario (nombres exactos):
  • your-name (obligatorio)
  • your-email (obligatorio)
  • tel-xxx
  • your-subject (obligatorio)
  • your-message
  • UTMs opcionales (hidden fields o querystring): utm_source, utm_medium, utm_campaign, utm_term, utm_content
  • Webhook Make: URL_WEBHOOK_MAKE (ej: https://hook.US2.make.com/XXXXXXXX)
  • Autenticación Make: Header x-make-apikey: API_KEY_MAKE
  • Firma opcional para trazabilidad propia: HMAC SHA256 con secreto SHARED_SECRET
  • Página de gracias: THANKYOU_URL (ej: https://MIPAGINA.COM/thanks/)
  • Google Sheets destino: NOMBRE_DE_HOJA (ej: MIGOOGLESHEET)
  • CRM destino (si no hay, documenta placeholder): CRM_NOMBRE (ej: HubSpot)

IMPORTANTE:

  • Formatea el código en bloques «`php.
  • Señala claramente los LUGARES QUE DEBO EDITAR (con comentarios).
  • Evita adornos; quiero código y pasos operativos, listos para ejecutar hoy mismo.

B) 🧪 Cómo usarlo

Pega el prompt en tu chat/IA de preferencia.

Reemplaza los placeholders (URL_WEBHOOK_MAKE, API_KEY_MAKE, SHARED_SECRET, THANKYOU_URL, etc.) antes o después de generar la respuesta.

Copia el snippet en Code Snippets (Run everywhere), prueba con Run once en Make y valida el flujo completo.

11) FAQ exprés

¿Necesito plugins pagos?
No. Con Code Snippets + el hook del formulario + Make puedes hacerlo sin add-ons premium.

¿Por qué Make no muestra el valor de x-make-apikey?
Por seguridad; es un header reservado. Si falla, verás 401.

¿Esto afecta SEO?
Indirectamente sí: más conversiones → mejores señales de negocio → más presupuesto inteligente. Además, la página de Gracias y la atribución mejoran tu optimización.

12) Conclusiones + CTA

Si tu web captura leads pero no activa procesos, estás perdiendo dinero. Los webhooks conectan tu WordPress con Make; los snippets te dan control total del qué, cuándo y cómo. Montas un flujo estándar (Webhook → Router → Sheets + Email + CRM + Analytics) y lo replicas en 10 minutos en cada sitio.

Mi opinión: estandariza tu payload JSON, tu snippet base y tu escenario maestro de Make (ramas por fuente/servicio). Menos improvisación, más escalabilidad.

Related Posts

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *