Widget de Captura de Leads
Qué Es
El Widget de Captura de Leads es un pequeño botón flotante que aparece en cualquier sitio web. Cuando un visitante hace clic en él, aparece un formulario que solicita su nombre, correo electrónico, número de teléfono y un mensaje. Cuando envían el formulario, se crea automáticamente un nuevo lead en LeadHub — y cualquier automatización que hayas configurado se activa de inmediato.
No necesitas tocar el código de tu sitio web más allá de agregar una línea de JavaScript.
Crear un Widget
Ve a Herramientas → Widgets de Leads en la barra lateral (puede aparecer bajo el grupo de navegación etiquetado como "Herramientas").
- Haz clic en Nuevo Widget de Captura de Leads.
- Rellena la configuración (ver abajo).
- Haz clic en Guardar.
- Haz clic en Obtener Código de Inserción en el widget que acabas de crear.
- Copia el fragmento de JavaScript y agrégalo a tu sitio web.
Opciones de Configuración
Identidad del Widget
| Campo | Qué hace |
|---|---|
| Nombre | Etiqueta interna — solo visible para tu equipo, no para los visitantes del sitio |
| Titular | El título principal mostrado dentro del formulario emergente (p. ej. "Ponte en contacto") |
| Subtítulo | Texto más pequeño opcional debajo del titular |
| Texto del Botón | El texto en el botón de envío (p. ej. "Enviar Mensaje") |
| Mensaje de Éxito | Lo que ve el visitante después de enviar el formulario (p. ej. "¡Gracias! Nos pondremos en contacto pronto.") |
Apariencia
| Campo | Qué hace |
|---|---|
| Color Primario | El color del botón flotante y del botón de envío |
| Color del Texto | El color del texto en los botones (normalmente blanco) |
| Posición | Dónde aparece el botón en la pantalla — Abajo a la Derecha, Abajo a la Izquierda, Arriba a la Derecha, o Arriba a la Izquierda |
Campos del Formulario
| Toggle | Qué hace |
|---|---|
| Mostrar campo de teléfono | Muestra un campo de número de teléfono en el formulario |
| Requerir teléfono | Hace obligatorio el campo de teléfono |
| Mostrar campo de empresa | Muestra un campo de nombre de empresa |
| Mostrar campo de mensaje | Muestra un área de texto para mensaje |
| Requerir mensaje | Hace obligatorio el campo de mensaje |
El nombre y el correo electrónico siempre se muestran y siempre son obligatorios.
Enrutamiento de Leads
Puedes enrutar automáticamente los leads enviados a través de este widget a un pipeline y etapa específicos:
- Enrutar leads al pipeline — elige en qué pipeline aterrizan los nuevos leads del widget
- Etapa inicial — elige en qué etapa dentro de ese pipeline comienzan
Si los dejas en blanco, el lead se crea sin asignación de pipeline.
Activo/Inactivo
El toggle El widget está activo te permite activar o desactivar el widget sin eliminarlo. Cuando está inactivo, el botón flotante no aparece en los sitios web que usan el código de inserción.
Obtener el Código de Inserción
Después de guardar tu widget, encuéntralo en la lista y haz clic en Obtener Código de Inserción.
Verás un fragmento similar a este:
<script src="https://yourdomain.com/widget/abc123-uuid/loader.js" async></script>
Copia esta línea completa. Esto es todo lo que necesitas agregar a tu sitio web.
Agregar el Widget a Tu Sitio Web
WordPress
- Instala un plugin como "Header Footer Code Manager" o "Insert Headers and Footers" — búscalos en el directorio de plugins de WordPress.
- Pega la etiqueta script en el área de "Footer".
- Guarda y visita tu sitio web — aparece el botón flotante.
Alternativamente, si tu tema de WordPress tiene un área de "HTML personalizado" en el widget del pie de página, pega el script allí.
Shopify
- En el admin de Shopify, ve a Tienda Online → Temas.
- Haz clic en Editar Código en tu tema activo.
- Abre el archivo
theme.liquid. - Pega la etiqueta script justo antes de la etiqueta
</body>. - Haz clic en Guardar.
Wix
- En el Editor de Wix, haz clic en el botón + para agregar un elemento.
- Elige Insertar → Código Personalizado.
- Pega la etiqueta script en el cuadro de código.
- Configúralo para cargar en la sección Body.
- Aplica y publica.
Squarespace
- Ve a Configuración → Avanzado → Inyección de Código.
- Pega la etiqueta script en el cuadro Footer.
- Guarda. El widget aparece en todas las páginas.
Sitio Web HTML Personalizado
Pega la etiqueta script en cualquier lugar antes de la etiqueta de cierre </body> en tu archivo HTML:
<script src="https://yourdomain.com/widget/abc123/loader.js" async></script>
</body>
Cómo Fluyen los Envíos
- Un visitante llega a tu sitio web y ve el botón flotante.
- Hace clic, rellena sus datos y pulsa Enviar.
- LeadHub recibe el envío al instante.
- Se crea un nuevo lead en tu espacio de trabajo con la información del visitante.
- Cualquier automatización que se activa con "Nuevo Lead Recibido" se dispara inmediatamente.
- El visitante ve tu mensaje de éxito.
Todo sucede en tiempo real. No necesitas verificar nada manualmente — los nuevos leads aparecen en tu lista de leads automáticamente.
Analíticas del Widget
En la página de lista de Widgets de Leads, cada widget muestra:
- Leads Capturados — número total de leads enviados a través de este widget
Esto te permite ver de un vistazo qué widgets están funcionando y cuáles no.
Personalizar la Apariencia del Widget
Todos los ajustes de apariencia están en el formulario de configuración del widget. Puedes cambiar:
- Colores para que coincidan con la marca de tu sitio web
- La posición del botón para evitar superponerse con los botones de chat o cookies existentes de tu sitio web
- El titular y subtítulo para que coincidan con el tono de tu sitio web
Puedes crear múltiples widgets con diferentes configuraciones — por ejemplo, uno para tu página de inicio con "Obtener un presupuesto gratis" y otro para tu blog con "Suscribirse para actualizaciones".
Seguridad
CORS (Cross-Origin Resource Sharing)
El widget puede aceptar envíos de cualquier sitio web de forma predeterminada. Si deseas restringir qué dominios pueden enviar a través de un widget específico, establece el campo Dominios Permitidos en la configuración del widget. Ingresa tu dominio (p. ej. acmecorp.com) y solo se aceptarán envíos desde ese dominio.
Limitación de Velocidad
LeadHub limita automáticamente cuántos envíos puede hacer un solo visitante en un período de tiempo corto. Esto evita que bots automatizados inunden tu lista de leads con entradas basura.