Personalice la apariencia, el comportamiento y la funcionalidad de su widget a través del sistema de configuración.
Todas las configuraciones del widget se gestionan a través de la configuración del widget en su panel. La configuración incluye configuraciones de apariencia, opciones de comportamiento y personalización de contenido.
Piense en la configuración como el ADN de su widget; define todo, desde colores y fuentes hasta flujos de conversación y mensajes iniciales. ¿La mejor parte? Los cambios en su configuración tienen efecto inmediato sin requerir cambios de código en su sitio web.
3a8 Personalización en Vivo
Utilice nuestro editor de configuración visual en el panel para ver sus cambios en tiempo real. No es necesario adivinar cómo se verán los colores o cómo se comportarán los botones; previsualice todo antes de publicar.
La apariencia visual es crucial para hacer que el widget se sienta como una parte natural de su sitio web. Nuestras configuraciones de apariencia le dan control total sobre cada aspecto visual.
Elija colores que coincidan con la identidad de su marca. Todos los valores de color deben estar en formato hexadecimal (por ejemplo, #FF5733).
Consejo profesional: Utilice una herramienta de verificación de contraste de color para asegurarse de que su texto siga siendo legible contra sus fondos elegidos. Esto es especialmente importante para el cumplimiento de accesibilidad.
Bajo Apariencia puede establecer una paleta de colores separada para Claro y Oscuro; cada modo tiene sus propios ajustes preestablecidos y colores. Cuál ve un visitante se elige en la incrustación con data-theme="light|dark|system" (el sistema sigue el dispositivo del visitante), o en tiempo de ejecución con CompaninWidget.setTheme(). Deje la paleta Oscura en blanco para derivarla automáticamente de sus colores Claros.
Dimensione su widget adecuadamente para su 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 pruebe su configuración en varios tamaños de pantalla para garantizar una buena experiencia para todos los usuarios.
Las configuraciones 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 necesiten 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. Hágalo acogedor, claro y accionable. Puede 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 ayudarle 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" } ] } ] } ]}Configure texto para múltiples idiomas:
Agregue CSS personalizado para un estilo avanzado:
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Configure puntos finales de API externos para una funcionalidad mejorada: