Cómo recibir notificaciones por WhatsApp cuando alguien quiere acceder a tu contenido premium (Hugo + Netlify + CallMeBot)

⚠️ Nivel Técnico: Senior / Expert

Si tienes un blog técnico con contenido que te costó tiempo y experiencia generar, probablemente ya pensaste en ponerle precio. El problema clásico: implementar un paywall “de verdad” requiere pasarelas de pago, bases de datos, autenticación… todo lo contrario a la filosofía de un sitio estático.

En este artículo te muestro la solución que construí para mi propio blog: un paywall de difuminado con un modal estilo WhatsApp que envía un mensaje directo a mi teléfono cuando alguien solicita acceso — sin que el visitante salga del sitio y sin pagar por ningún servicio.

📋 1. Fase de Validación / Prerrequisitos

🎯 ¿Qué problema resuelve esto?

Tenía artículos técnicos detallados — guías de liberación de equipos, configuraciones de infraestructura, runbooks paso a paso — que me tomaron horas documentar. Quería:

1. Mostrar suficiente para generar interés
2. Ocultar el contenido clave detrás de una barrera
3. Recibir notificación inmediata cuando alguien quisiera acceso
4. Poder cobrar manualmente y compartir el contenido por WhatsApp

La solución no necesita suscripciones ni pasarelas de pago. Es un sistema de contacto inteligente que funciona perfecto para contenido de nicho y audiencias pequeñas.

🔧 Prerrequisitos

Antes de implementar, asegúrate de tener:

• Hugo instalado localmente (v0.112.0+)
• Sitio desplegado en Netlify (plan gratuito funciona)
• Git configurado y conectado a Netlify
• Cuenta en Netlify — el formulario de detección requiere al menos un deploy exitoso
• Un número de WhatsApp activo donde quieres recibir las notificaciones

✅ Validación rápida del entorno

hugo version
git --version

Esperado:

hugo v0.112.0 o superior
git version 2.x.x o superior

🏗️ 2. Arquitectura del sistema

Visitante llega al artículo
        ↓
Ve el inicio del contenido (libre)
El resto aparece difuminado + gradiente
        ↓
Hace clic en "Contactar por WhatsApp"
        ↓
Modal tipo chat de WhatsApp se abre
(el fondo se oscurece con blur)
        ↓
Visitante llena: nombre, teléfono, mensaje
        ↓
fetch() → POST a Netlify Forms
(el visitante NO sale del blog)
        ↓
Netlify Forms registra el envío
        ↓  (automático, sin configuración de UI)
Netlify Function: submission-created.js
        ↓
GET → CallMeBot API
        ↓
📱 WhatsApp llega a tu teléfono con:
   nombre, teléfono del visitante y artículo

Piezas que intervienen:

📁 Estructura de archivos

tu-sitio/
├── layouts/
│   ├── shortcodes/
│   │   └── paywall.html          ← El blur + CTA
│   └── partials/
│       └── wa-modal.html         ← Modal de chat + JS de envío
├── assets/sass/3-modules/
│   └── _paywall.scss             ← Todos los estilos
├── netlify/
│   └── functions/
│       └── submission-created.js ← Función que envía el WhatsApp
├── netlify.toml                  ← Declara la carpeta de functions
└── config.toml                   ← Parámetros del paywall

📦 3. Componentes del sistema

1 — El shortcode de paywall

Bloque reutilizable que va en cualquier artículo de Markdown. Envuelves el contenido que quieres proteger:

{{< paywall >}}
## Sección que quieres proteger

Todo este contenido aparecerá difuminado con un gradiente.
El lector verá que hay más pero no podrá leerlo.
{{< /paywall >}}

El shortcode genera: filter: blur(5px) sobre el interior + gradiente CSS + bloque CTA con candado y botón de contacto.

2 — El modal de WhatsApp

El botón no abre WhatsApp. Hace un fetch() AJAX al endpoint de Netlify Forms y muestra el resultado dentro del mismo modal. El visitante nunca sale del blog.

3 — La Netlify Function

submission-created.js — Netlify la ejecuta automáticamente con cada envío de formulario, sin configurar webhooks en la UI. Filtra por form_name === 'paywall-contact' y llama a CallMeBot.

4 — CallMeBot

API gratuita que envía mensajes a WhatsApp personal. No requiere WhatsApp Business. Activación única con un mensaje de autorización.

📬 Resultado: el WhatsApp que recibes

📩 Nuevo contacto — blog.wesoft.solutions

📄 Título del artículo que estaba viendo
🔗 https://blog.wesoft.solutions/posts/slug-del-articulo/
📱 Juan Pérez — wa.me/5215512345678

💬 Hola, me interesa el artículo completo ¿cómo accedo?

El número del visitante viene como enlace wa.me/ — lo tocas y WhatsApp se abre listo para responder.

🚀 4. Implementación completa

A continuación están todos los archivos listos para copiar y pegar.