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, imagen del chatbot y estilo del lanzador, así como 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 apariencia 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 lanzador

Para el icono del lanzador del widget tienes a disposición cuatro estilos diferentes. Cuando el usuario hace clic sobre el lanzador, éste despliega la ventana del chatbot por lo tanto, es recomendable darle un diseño que capte la atención e invite a hacer clic para iniciar la conversación.

Los estilos disponibles son:

• Solo Icono A su vez, podrás elegir de entre el icono de burbuja de chat clásico, icono de chat con puntos suspensivos o el icono de ayuda circular. En tu panel de administración podrás visualizar los ejemplos de cada uno de ellos para facilidad de elección. Toma en cuenta que el color de fondo para el lanzador corresponderá al que elijas como color primario.

• Solo Texto: Con esta opción puedes personalizar el texto que aparecerá en el botón del lanzador, el máximo de caracteres permitido es de 12 (incluyendo espacios) y el color de fondo corresponderá al que elijas como color primario.

• Icono + Texto: Esta opción combina las dos anteriores, podrás incluir tanto un icono como texto que mostrará el botón. Podrás elegir entre el icono de burbuja de chat clásico, icono de chat con puntos suspensivos o el icono de ayuda circular, además del texto con un máximo de 12 caracteres (incluyendo espacios). El color de fondo corresponderá al que elijas como color primario.

• Personalizado Sube un icono personalizado para el lanzador 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 0px y el máximo 400px.

Recuerda Guardar cambios después de hacer modificaciones, de lo contrario los cambios en la vista previa del widget no tendrán efecto.