Colores y diseño
En el módulo "Apariencia" de tu panel de administración de ExpertoBot, encontrarás dos apartados principales:
- Personalización de textos.
- Colores y diseño.
En la sección de "Colores y diseño" puedes editar los colores predeterminados que se muestran en el widget, imágenes del chatbot, su posición y espaciado lateral en relación al borde de la pantalla. La vista previa a la derecha de la sección de edición te muestra en tiempo real cómo se verán los cambios de diseño que apliques.
A continuación te explicamos uno a uno los campos editables para alinear la imagen de tu chatbot con tu marca.
Imagen del chat
Sube una imagen que represente a tu chatbot. Esta imagen aparecerá junto a sus mensajes durante las conversaciones, por lo que te recomendamos elegir una que refleje la personalidad o identidad de tu marca. Una imagen adecuada puede mejorar la percepción inicial del usuario y fortalecer la conexión con tu servicio desde el primer contacto.
Los formatos aceptados son .PNG, .JPG, .JPEG o .SVG, con un peso máximo de 5 MB.
Color primario y Color de texto
Aquí encontrarás una herramienta que te permite elegir un color de manera visual y con ello personalizar las secciones principales del widget. Asegúrate de que los colores seleccionados coincidan con la identidad de tu marca. Si ya cuentas con el código hexadecimal de los colores que requieres, puedes ingresarlo directamente en los campos junto al cuadro de color.
Al dar clic sobre el cuadro de color mostrará un selector de colores donde puedes hacer clic o mover el círculo dentro del recuadro hasta encontrar el de tu preferencia. También puedes desplazarte en las barras que se muestran abajo del recuadro para seleccionar el color.
Cuando eliges un color, el selector genera el código hexadecimal correspondiente que puedes usar en los elementos principales de tu chatbot.
- Color primario: Selecciona el color principal del chat, correspondiente al fondo del encabezado.
- Color de texto: Selecciona el color de los textos correspondientes al nombre y slogan del chatbot.
Posición del widget
Define la posición del widget del chatbot para optimizar su accesibilidad y usabilidad en su sitio web. Encontrarás dos botones para decidir dónde aparecerá el widget: esquina inferior izquierda o derecha. Esta configuración no se refleja en la vista preliminar, sino hasta estar integrado el chatbot en tu sitio web.
Icono del widget
Sube un icono personalizado para el launcher del chatbot en formato .PNG, .JPG JPEG o .SVG con un peso máximo de 5 MB. Este icono debe ser intuitivo para tus usuarios ya que al hacer clic en él, se desplegará el chatbot para iniciará la conversación.
Ajuste de posición
La última configuración que encontrarás en este apartado corresponde al espacio lateral e inferior del widget en píxeles para adaptarlo al diseño de su sitio web. Tiene como referencia los bordes de la pantalla. Verás un campo para cada opción, en el cual debes ingresar únicamente el número de píxeles, el mínimo aceptado es de 1px y el máximo 30px.
Recuerda Guardar cambios después de hacer modificaciones, de lo contrario los cambios en la vista previa del widget no tendrán efecto.