Personalizar el widget y la ventana de chat en vivo

Personalizar el widget y la ventana de chat en vivo


Ahora puede personalizar el widget de chat en vivo y la ventana de chat para que coincidan con la apariencia de su sitio web, elegir dónde y cómo desea que se muestren a sus clientes, y conectarse con ellos sin problemas.

Widget flotante

El widget de chat en vivo flotante es una forma práctica de atraer la atención de sus visitantes a través de las páginas sin interferir en su experiencia, ya que “flota” con el navegador del visitante, incluso cuando se desplaza hacia abajo.

Puede elegir el widget flotante que quiera entre varios widgets flotantes disponibles en Zoho SalesIQ. 


¿Cómo puedo cambiar el widget flotante?

  • Para elegir un widget flotante diferente, vaya a Configuración > Marcas > {Nombre de su marca} > Personalización, y seleccione Etiquetas en el menú de la izquierda.
  • En Flotantes, seleccione el widget flotante deseado y haga clic en Guardar.


Widget de botón

Coloque el botón de chat en vivo en la ubicación que quiera de su página, donde pueda llamar la atención de sus clientes para que accedan de inmediato al servicio de asistencia al cliente. Puede elegir un estilo de botón entre los diversos diseños que SalesIQ ofrece.


¿Cómo puedo elegir un widget de botón?

  • Para elegir un widget flotante diferente, vaya a Configuración > Marcas > {Nombre de su marca} > Personalización, y seleccione Etiquetas en el menú de la izquierda.
  • En la pestaña Botón, seleccione el widget flotante deseado y haga clic en Guardar.



Cargar su etiqueta personalizada

Si no está satisfecho con los diseños de widget que puede utilizar de inmediato o necesita un widget más personalizado que se adapte mejor a su marca, puede agregar su etiqueta personalizada con la opción “Cargar su etiqueta”.

  • En la página “Etiquetas”, haga clic en la opción Cargar imagen en línea bajo la opción Etiqueta personalizada del widget flotante
  • Ahora, cargue una imagen que represente el estado “Fuera de línea” para mostrar una etiqueta personalizada durante las horas de descanso.


  • Puede arrastrar y soltar la etiqueta o seleccionar la imagen desde su computadora.


Nota: La etiqueta debe ser una imagen cuadrada y sus dimensiones mínimas deberían ser 50 x 50 píxeles, con un tamaño máximo de 1 MB.

Personalizar el contenido del widget de chat  

Capte la atención de los usuarios y haga que interactúen con su empresa agregando contenido personalizado en su widget de chat. 

Personalizar mensaje de “En línea”

En la página “Etiquetas”, desplácese hacia abajo hasta Mensaje del widget de chat: En línea, ingrese su texto personalizado en “Contenido y Frase”, y haga clic en Guardar.



Personalizar mensaje de “Fuera de línea”

En la página “Etiquetas”, desplácese hacia abajo hasta Mensaje del widget de chat: Fuera de línea, ingrese su texto personalizado en “Contenido y Frase”, y haga clic en Guardar.




Establecer la posición del widget de chat

Coloque el widget de chat flotante en la esquina inferior derecha o izquierda según su preferencia o el diseño del sitio web. De forma predeterminada, el widget se ubica en la esquina inferior derecha, pero, si su sitio web tiene contenido importante en ese lugar, puede colocarlo en el lado izquierdo. 

  • En la página “Etiquetas”, desplácese hasta la sección “Posición del widget”, seleccione el lado en el que desea colocar el widget de chat y haga clic en Guardar.

Personalizar la apariencia de la ventana de chat

Puede realizar las siguientes personalizaciones en la ventana de chat:

  • Elegir la apariencia de la ventana de chat según las necesidades del sitio web.
  • Elegir un color para la ventana de chat que se adapte a su sitio web.
  • Mostrar el logotipo de su empresa en la ventana de chat.
  • Mostrar la foto de perfil del operador mientras se conecta con el visitante en el chat.
  • Volver a diseñar la apariencia de la ventana completamente con su archivo CSS personalizado.

Personalizar la apariencia de la ventana de chat en vivo

  • En “Configuración” > “Marcas” > “Nombre de su marca” > “Personalizar”, vaya a “Apariencia” en el menú del lado izquierdo.
  • Ahora puede elegir uno de los temas disponibles. Haga clic en Guardar después de seleccionar el tema predefinido.



Cambiar el color de la ventana de chat

Los temas vendrán con los colores predefinidos de fábrica. A veces, puede que el color no se adapte a la imagen de su sitio web. Por esta razón, puede cambiar el color de la ventana de chat y el widget modificando el color para que se adapte al de su sitio web.

  • En “Configuración” > “Marcas” > “Nombre de su marca” > “Personalizar”, vaya a “Apariencia” en el menú del lado izquierdo.
  • Desplácese hacia abajo hasta Elegir un color para la ventana de chat y elija un color de la lista o utilice el selector de color para seleccionar el que desea.
  • Puede proporcionar el código del color o elegir un color de la paleta de colores en el selector de colores.
  • Puede ver una vista previa instantánea de la ventana de chat en el lado derecho de la pantalla. Los colores que elija se reflejarán en la ventana.


Elegir el tamaño de la ventana de chat

  • En Configuración > Marcas > {Nombre de su marca} > Personalizar, vaya a “Apariencia” en el menú del lado izquierdo.
  • Desplázate hacia abajo hasta Elegir el tamaño de la ventana de chat. Puede elegir el tamaño de la ventana de chat entre pequeño y grande según las necesidades de su sitio web.


Nota: La elección del tamaño de la ventana de chat no se aplica a los navegadores móviles. El tamaño de la ventana de chat en dispositivos móviles depende del tamaño de la pantalla del dispositivo.



Cargar CSS personalizado

Sí, es posible cambiar la apariencia de la ventana de chat con un archivo CSS personalizado. Consulte nuestra Guía de CSS personalizado e intente personalizar la ventana de chat. 

  • En Configuración > Marcas > {Nombre de su marca} > Personalizar, vaya a Apariencia en el menú del lado izquierdo.
  • Desplácese hacia abajo hasta Cargar CSS personalizado, haga clic en el botón de carga, seleccione el archivo CSS desde su computadora y haga clic en Guardar.
  • Puede acceder a una vista previa en vivo de su CSS en la ventana de vista previa del chat a la derecha.



Personalizar el nombre de la base de conocimientos

Puede cambiar el nombre de la base de conocimientos según el contenido presente en ella. Si solo almacena artículos en la base de conocimientos, cambie el nombre a “Artículos”; si ha respondido muchas preguntas de los visitantes, puede nombrarla “Preguntas frecuentes”.

  • En la página “Apariencia”, desplácese hacia abajo hasta Especificar un nombre para la base de conocimientos en las ventanas de chat del visitante y cambie el texto dentro del campo de entrada. 
  • Puede ver los cambios en vivo en la ventana de vista previa.



Categorizar artículos

Si desea mostrar los artículos según las categorías asignadas mientras crea y permite a los visitantes encontrar lo que buscan fácilmente, haga lo siguiente:

  • En la página “Apariencia”, desplácese hacia abajo hasta la sección Elegir cómo visualizar artículos en la ventana de chat, seleccione Solo categoría y haga clic en Guardar.


Cambiar el idioma de la ventana de chat

De forma predeterminada, la ventana de chat utiliza el idioma disponible en su sitio web. Puede cambiar el idioma si lo desea y utilizar uno que le acomode. Si tiene varios sitios para cada país, esta opción será más útil para usted.

  • En Configuración > Marcas > {Nombre de su marca} > Personalizar, vaya a Idioma y fuente en el menú del lado izquierdo.
  • Seleccione un idioma del menú desplegable y haga clic en Guardar.
  • Si no encuentra el idioma que busca o desea cambiarlo según su sitio web, seleccione la opción Idioma del sitio web en la parte superior del menú desplegable.


Personalizar la fuente de la ventana de chat

Al igual que el idioma, la ventana de chat utiliza la fuente del sitio web de forma predeterminada. Puede cambiar esto para que se adapte a su preferencia. 

  • En la página Idioma y fuente, seleccione la fuente deseada en la sección Fuente de la ventana de chat y haga clic en “Guardar”.