Personalizar Widget

Adapta el widget a la identidad de tu marca y las necesidades de tus clientes.

Acceder a la Personalización

1. Ve a Agentes > Selecciona agente
2. Haz clic en la pestaña Widget
3. Encontrarás todas las opciones de personalización

Opciones de Tema

Colores

| Opción | Descripción | |--------|-------------| | Color Primario | Color del botón y encabezado | | Fondo | Fondo de la ventana de chat | | Texto | Color del texto | | Burbuja Usuario | Color del mensaje del visitante | | Burbuja Bot | Color de la respuesta del agente |

Posición

Elige dónde mostrar el widget:

• Abajo Derecha (predeterminado)
• Abajo Izquierda

Tamaño

• Estándar: 380x600px
• Compacto: 320x500px
• Grande: 420x700px

Textos

Personaliza todos los textos mostrados:

Título de Bienvenida: "¡Hola! 👋"
Mensaje de Bienvenida: "¿Cómo podemos ayudarte?"
Placeholder del Input: "Escribe un mensaje..."
Botón Enviar: "Enviar"

Botón (Launcher)

El botón que abre el chat:

• Icono: Elige entre iconos disponibles
• Texto: Texto opcional junto al icono
• Animación: Pulso, rebote o ninguna
• Retraso: Tiempo antes de aparecer

Comportamiento

Auto-apertura

Auto-apertura: Si/No
Retraso: 5 segundos
Solo Primera Visita: Si/No

Mensajes de Bienvenida

Configura mensajes de bienvenida automáticos:

1. Primer mensaje: Saludo inmediato
2. Segundo mensaje: Después de X segundos
3. Acciones rápidas: Botones sugeridos

Sonido

• Habilitar/deshabilitar sonido de notificación
• Volumen
• Sonido personalizado (Pro)

Branding

Logo

Sube el logo de tu empresa:

• Formato: PNG, JPG, SVG
• Tamaño recomendado: 120x40px
• Aparece en el encabezado

Nombre de Empresa

Nombre mostrado en el encabezado.

Remover "Powered by"

Disponible en planes Pro.

CSS Avanzado

Para personalización avanzada:

/* Ejemplo de CSS personalizado */
.leader24-widget {
  --l24-primary: #tu-color;
  --l24-radius: 12px;
}

Vista Previa

Usa la vista previa para ver los cambios en tiempo real antes de guardar.

Mejores Prácticas

Guardar y Publicar

1. Realiza los cambios deseados
2. Usa Vista Previa para verificar
3. Haz clic en Guardar
4. Los cambios están activos inmediatamente

Próximos pasos

• Obtener código de integración
• Monitorear conversaciones
• Gestionar leads