Personaliza la apariencia, comportamiento y funcionalidad de tu widget a través del sistema de configuración.
Todos los ajustes del widget se gestionan a través de la configuración del widget en tu panel. La configuración incluye ajustes de apariencia, opciones de comportamiento y personalización de contenido.
Piensa en la configuración como el ADN de tu widget: define todo, desde colores y fuentes hasta flujos de conversación y mensajes iniciales. ¿La mejor parte? Los cambios en tu configuración tienen efecto inmediato sin requerir cambios de código en tu sitio web.
🎨 Personalización en Vivo
Usa nuestro editor de configuración visual en el panel para ver tus cambios en tiempo real. No necesitas adivinar cómo se verán los colores o cómo se comportarán los botones: previsualiza todo antes de publicar.
La apariencia visual es crucial para hacer que el widget se sienta como una parte natural de tu sitio web. Nuestros ajustes de apariencia te dan control total sobre cada aspecto visual.
Elige colores que coincidan con la identidad de tu marca. Todos los valores de color deben estar en formato hexadecimal (por ejemplo, #FF5733).
Consejo profesional: Usa una herramienta de verificación de contraste de color para asegurarte de que tu texto siga siendo legible contra tus fondos elegidos. Esto es especialmente importante para el cumplimiento de accesibilidad.
Dimensiona tu widget apropiadamente para tu caso de uso y audiencia. Dimensiones más grandes proporcionan más contexto de conversación, mientras que dimensiones más pequeñas se sienten menos intrusivas.
Consideración móvil: El widget se escala automáticamente en dispositivos móviles, pero prueba tu configuración en varios tamaños de pantalla para asegurar una buena experiencia para todos los usuarios.
Los ajustes de comportamiento controlan cómo el widget interactúa con los usuarios y responde a diferentes contextos.
⚠️ Recomendación
La mayoría de los sitios deberían comenzar con el widget colapsado (<code>start_open: false</code>) para evitar ser intrusivos. Los usuarios que necesitan ayuda harán clic naturalmente en el botón. Para páginas de ayuda/soporte dedicadas, comenzar abierto puede ser beneficioso.
El mensaje de saludo es lo primero que los usuarios ven cuando abren el widget. Hazlo acogedor, claro y accionable. Puedes incluir botones interactivos para guiar a los usuarios a tareas comunes.
Un buen mensaje de saludo debería:
Ejemplo: "¡Hola! 👋 Estoy aquí para ayudar con preguntas sobre nuestros productos, precios o cuenta. ¿Cómo puedo asistirte hoy?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>Los flujos de conversación son caminos predefinidos que guían a los usuarios a través de escenarios comunes. Son perfectos para preguntas frecuentes, solución de problemas o procesos de múltiples pasos como devoluciones o reservas.
Los flujos se activan por palabras clave específicas o clics en botones. Cuando se activan, muestran una serie de respuestas con botones de acción opcionales, creando una experiencia de conversación guiada sin requerir procesamiento de IA.
Mejores prácticas para flujos:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Configura texto para múltiples idiomas:
Agrega CSS personalizado para estilos avanzados:
/* Estilos personalizados del widget */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Configura endpoints de API externos para funcionalidad mejorada: