Cómo agregar un botón de WhatsApp a Webflow (Gratis — No se necesita app)
Construyes en Webflow porque quieres control: interacciones limpias, diseño exacto, nada añadido que no merezca estar allí. Un botón de WhatsApp debería encajar en esa filosofía: sin integración pesada, sin aplicación de terceros gestionando a tus clientes, solo un toque desde tu sitio a un chat real de WhatsApp con tu número.
Aquí te mostramos cómo agregar un botón de WhatsApp flotante a cualquier sitio de Webflow en aproximadamente dos minutos: sin aplicación de Webflow, sin cuenta, sin tarifa mensual.
La forma rápida: abre nuestro generador gratuito de Generador de botón de WhatsApp para Webflow, introduce tu número, elige un estilo, copia el código y pégalo en Configuración del sitio → Código personalizado → Código del pie de página. Esa es toda la configuración.
Por qué poner un botón de WhatsApp en tu sitio de Webflow
- El chat convierte donde los formularios dudan. Un visitante en medio de una decisión: precios, disponibilidad, una solicitud personalizada, responde más rápido en WhatsApp que en un formulario en el que tiene que pensar.
- WhatsApp es donde están tus clientes. Para miles de millones de personas es la aplicación más usada en el teléfono; el botón los encuentra allí.
- Las respuestas llegan a tu teléfono. El botón abre WhatsApp con tu número y un mensaje prellenado: responde en segundos desde cualquier lugar, incluso en movimiento.
- Se lleva bien con tu stack. Los chats llegan a ti directamente primero; conecta el mismo número a The Tech Pad más tarde para respuestas con IA y una bandeja de entrada compartida del equipo.
Lo que obtienes con el generador gratuito
El Generador de botón de WhatsApp para Webflow te da un botón flotante real:
- 8 estilos solo para WhatsApp — el logo oficial de WhatsApp y marcas de burbuja en colores de la marca (verde, verde oscuro, blanco, turquesa)
- Tu número + mensaje prellenado — establece el primer mensaje que los visitantes ven
- Forma, tamaño y posición — redondo o cuadrado, izquierda o derecha, cualquier tamaño
- Vista previa en vivo — ve el botón exacto antes de copiar cualquier cosa
- Sin cuenta, sin clave API, sin costo — gratis para siempre
| Capacidad | Botón gratis | La actualización Tech Pad |
|---|---|---|
| Los visitantes inician un chat de WhatsApp con tu número | ✅ | ✅ |
| Estilos solo para WhatsApp + vista previa en vivo | ✅ | ✅ |
| Respuestas de IA 24/7 en el idioma del cliente | — | ✅ |
| Bandeja de entrada de un solo equipo para WhatsApp + chat del sitio web | — | ✅ |
| API oficial de WhatsApp Business (Meta) | — | ✅ |
| Precio | Gratis para siempre | Gratis para empezar |
Agrega el botón a Webflow en 3 pasos
- Genera tu código. Abre el generador gratuito, ingresa tu número de WhatsApp con el código de país (solo dígitos, por ejemplo.
919876543210), elige un estilo y haz clic Copiar código. - Abre Código personalizado. En el diseñador de Webflow presiona W (o haz clic en el W logotipo en la esquina superior izquierda) y abre Código personalizado.
- Pega en el código de pie de página y publica. Pega el código en el Código de pie de página — se carga en cada página, justo antes de la etiqueta de cierre body — haz clic en Guardar cambios, luego Publicar.
El código es una pequeña etiqueta de script que se carga de forma asíncrona, por lo que no ralentizará tu sitio:
<script async src="https://thetechpad.com/chat/widget.js" data-ttp-wa="919876543210" data-ttp-wa-icon="wa-classic" data-ttp-wa-shape="round" data-ttp-wa-size="56" data-ttp-wa-pos="right"></script>¿Cuándo estará en vivo? El código personalizado se aplica cuando publicas tu sitio en un plan de Webflow (incluyendo el nivel de pago de entrada). En el dominio de prueba gratuito se renderiza solo para fines de vista previa: publica, y tus visitantes verán el botón.
¿Por qué código en lugar de una aplicación de Webflow?
Las aplicaciones e integraciones de Webflow añaden un verdadero poder, pero un solo botón flotante de WhatsApp no lo necesita: no requiere instalar del marketplace, ni solicitudes de permisos, ni suscripción. La ruta del código lo mantiene ligero:
- Nada que instalar o aprobar — solo Código personalizado y un clic en Publicar
- Tu número, tus reglas — los chats van al número de WhatsApp que elijas, no a una bandeja de entrada de terceros
- El mismo código funciona en otros lugares — ¿también ejecutas un Shopify, Squarespace, Blogger, HubSpot o Wix sitio? Cada uno tiene su propia página generadora con pasos para pegar.
¿Quieres que el botón responda por ti?
Un botón es el primer paso: el siguiente es responder instantáneamente, incluso cuando estás ocupado o dormido. The Tech Pad convierte ese mismo número de WhatsApp en un asistente de IA 24/7:
- La IA responde al instante desde las páginas de tu sitio y producto — en el idioma de tu cliente
- Una bandeja de entrada compartida para el equipo para chats de WhatsApp, chat del sitio web y notificaciones
- La API oficial de WhatsApp Business en tu propio número verificado por Meta
- Gratis para comenzar, sin tarjeta de crédito — conéctate en thetechpad.com
Dos minutos hoy te dan un botón de WhatsApp en vivo en Webflow. Agregar The Tech Pad más tarde hace que responda por ti.