Documentación de Uso
Tag HTML
<whatsapp-widget></whatsapp-widget>
Características Principales
- Detección automática: Detecta la página actual y carga la configuración correspondiente
- Matching inteligente: Soporta matching exacto, contiene, empieza con, y regex
- Configuración desde admin: Crea reglas desde el panel de administración
- Fallback automático: Si no hay regla que coincida, usa la regla por defecto
- Override manual: Puedes forzar configuración con atributos HTML
Atributos Disponibles (Opcional)
| Atributo | Tipo | Default | Descripción |
|---|---|---|---|
| phone | String | auto | Número de WhatsApp (override manual) |
| message | String | auto | Mensaje predefinido (override manual) |
| agent-name | String | auto | Nombre del agente (override manual) |
| position | String | bottom-right | Posición: bottom-right, bottom-left, top-right, top-left |
| size | String | large | Tamaño: small, medium, large |
| delay | Number | 2000 | Delay antes de mostrar (ms) |
| pulse | Boolean | true | Animación de pulso |
| show-badge | Boolean | true | Mostrar badge con contador |
Ejemplos de Uso
Automático (recomendado):
<whatsapp-widget></whatsapp-widget>
El widget detecta automáticamente la página y carga la configuración desde el backend
Con override manual:
<whatsapp-widget phone="+5491123456789" message="Hola, me interesa..."></whatsapp-widget>
Fuerza una configuración específica sin usar reglas del backend
Con posición personalizada:
<whatsapp-widget position="bottom-left" size="medium"></whatsapp-widget>
Configuración de Reglas
Para usar la detección automática, necesitas crear reglas desde el panel de administración:
- Crea reglas con patrones de URL (ej: "/cursos/*", "/soporte")
- Asigna un número de WhatsApp y mensaje a cada regla
- Establece prioridades para que las reglas más específicas tengan prioridad
- Crea una regla "default" como fallback
Ejemplo 1: Widget automático
El widget detecta automáticamente esta página y carga la configuración desde el backend
URL actual: widgets/whatsapp-widget
El widget consultará: /api/whatsapp-config?url=widgets%2Fwhatsapp-widget
Ejemplo 2: Con override manual
Fuerza un número y mensaje específico sin usar reglas del backend
Ejemplo 3: Tamaño pequeño sin pulso
Widget pequeño sin animación de pulso
Widgets Relacionados
Explora otros widgets que podrían complementar tu implementación
Captura Automática de Interesados
Convierte visitas en leads calificados sin perder ninguna consulta
Testimonios que Convierten
Historias reales de alumnos que vencen objeciones de compra
Vitrina de Cursos Destacados
Muestra tus mejores programas de forma atractiva y moderna