Guía

Personalizar el aspecto del chat de tu web

Cambia los textos, los colores, el botón y la forma de abrirse del chat desde la pestaña Widget de tu agente, con vista previa en directo y sin volver a tocar tu web.

En la aplicación:: Agentes › tu agente › Widget; Abrir la aplicación
Revisado el: Revisado el 6 de octubre de 20266 min de lectura

En este artículo

El aspecto del chat se cambia en la pestaña Widget de tu agente: los textos, los colores, el botón que lo abre y la forma de abrirse. Cada cambio se ve al momento en una vista previa y, al pulsar Guardar cambios, se aplica en tu web sin volver a pegar el código.

Dónde se cambia

Entra en Agentes y abre tu agente.
Abre la pestaña Widget.
Elige la sección que quieras cambiar: Contenido, Apariencia, Lanzador y ventana o Comportamiento.

La quinta sección, Instalación, contiene el código del chat y los dominios donde puede usarse. La explican instalar el chat en tu web y limitar el chat a tus dominios.

Para cambiar algo necesitas el rol Miembro, Administrador o Propietario. Con Solo lectura ves la configuración, pero no puedes modificarla.

La vista previa

La vista previa es el chat real con tus cambios todavía sin guardar, sobre una conversación de ejemplo. No crea conversaciones ni gasta créditos.

Si no la ves junto a los ajustes, pulsa Vista previa.
Con Escritorio y Móvil compruebas cómo queda en un ordenador y en un teléfono.
En ella no se puede escribir. Para conversar con tu agente usa la pestaña Pruebas, como explica probar tu agente.

Contenido: textos e imágenes

Apartado	Qué ajustas
Cabecera	El Título y el Subtítulo del chat. Con el título vacío se muestra el nombre de tu negocio o, si no lo has indicado, el del agente
Inicio de la conversación	El Mensaje de bienvenida, que es el primer mensaje del agente (vacío, el chat empieza sin saludo); hasta 4 Preguntas sugeridas, que el visitante envía con un toque; y el Texto del campo de escritura
Idioma del widget	El idioma de los botones y avisos del chat, no el de las respuestas. Automático usa el del navegador del visitante si tu agente lo habla y, si no, el predeterminado del agente
Imágenes	El Logo, que va en la cabecera, y el Avatar del agente, que acompaña a sus mensajes

Conviene saber:

Las preguntas sugeridas se muestran como botones bajo el saludo, en el orden de la lista. Cámbialo con Subir y Bajar.
El saludo y las preguntas se ven al empezar una conversación. Si ya habías escrito en el chat de tu web, verás esa conversación: para empezar de cero, abre el menú del chat y elige «Nueva conversación».
Los textos propios del chat existen en español, catalán e inglés; gallego, euskera y portugués usan los de español, y el resto de idiomas, los de inglés. El idioma en el que responde el agente se elige aparte, en su pestaña Comportamiento: lo explica ajustar cómo responde tu agente.

Imágenes: formatos y tamaño

Se admiten imágenes PNG, JPEG, WebP o GIF de 1 MB como máximo. Los SVG no se admiten. Pulsa Subir imagen para añadirla, Cambiar imagen para sustituirla y Quitar para dejar de usarla. Sin imágenes, el chat usa su propio icono y la inicial del agente; si subes avatar pero no logo, el avatar se usa también en la cabecera.

Apariencia: modo, colores y letra

Modo: Claro, Oscuro o Automático, que sigue la preferencia de claro u oscuro del dispositivo de cada visitante.
Colores: elige el Color de marca y el resto se calcula a partir de él. Si lo necesitas, puedes fijar el color de una parte concreta: Cabecera, Ventana, Mensajes del agente, Mensajes del visitante, Campo de escritura, Botón de enviar, Lanzador o Enlaces y bordes. Todos en automático los devuelve a los calculados.
Tipografía y forma: el Tipo de letra (Sistema, La de tu web, Redondeada, Serif o Monoespaciada), el Tamaño del texto y el Radio de las esquinas, que redondea la ventana, los mensajes y los botones. La de tu web usa la letra de la página donde está instalado el chat, así que se comprueba en tu propia web.

Avisos de contraste

Si un texto o un icono se lee mal sobre su fondo, la aplicación lo indica con «Poco contraste» en la parte afectada y reúne todos los casos al principio de Apariencia. Es un aviso, no un bloqueo: puedes guardar igualmente. Para arreglarlo, cambia uno de los dos colores o déjalo en automático. Cuando todo se lee bien, Colores muestra «Contraste correcto».

Lanzador y ventana

El lanzador es el botón flotante que abre el chat.

Lanzador: la Forma (Círculo, Redondeado o Píldora), el Icono y el Tamaño. La forma Píldora admite un Texto de la píldora junto al icono, por ejemplo «¿Hablamos?»; sin texto se muestra como un círculo. El icono Tu imagen usa la Imagen del lanzador que subas, que ocupa todo el botón; si no subes ninguna, se usa el logo.
Posición en la página: el Lado (Izquierda o Derecha), la Separación lateral y la Separación inferior. Sirven para que el botón no tape otro elemento de tu web.
Ventana del chat: el Ancho y el Alto de la ventana en ordenador. En Cabecera eliges Mostrar el logo y Mostrar el estado («En línea» o «Fuera de horario»); en Mensajes, Mostrar el avatar del agente y Mostrar la hora de cada mensaje.

Comportamiento: apertura, horario y marca

Apertura

Opción	Qué hace
Cerrado	Solo se ve el lanzador. El visitante abre el chat cuando quiere
Abierto	El chat se abre al cargar la página. Si el visitante lo cierra, se queda cerrado en esa pestaña
Se abre al cabo de un rato	Deja ver la página primero y se abre solo, una vez por visita, pasados los Segundos antes de abrirse que indiques

Fuera de horario

Tu agente responde a cualquier hora. Esta opción solo cambia lo que ve el visitante mientras el negocio está cerrado.

Activa Tener en cuenta el horario del negocio.
Escribe el Mensaje fuera de horario, por ejemplo «Ahora estamos cerrados. Déjanos tus datos y te llamamos mañana.».

Fuera de horario, tu mensaje aparece como aviso al principio del chat y la cabecera indica «Fuera de horario», si tienes activado Mostrar el estado. El horario no se define aquí: es el Horario de la pestaña Perfil del agente, con su Zona horaria, y el enlace Editar el horario te lleva a él. Si en el perfil está marcado Abierto siempre, el chat nunca se muestra como cerrado.

Para ver cómo queda sin esperar a la hora de cierre, activa Ver el estado «fuera de horario» en la vista previa. Solo cambia la vista previa y no se guarda.

Marca iAgentify

Al pie del chat se lee «Con tecnología de iAgentify». Poder quitarla depende de tu plan. Si lo incluye, verás el interruptor Quitar la marca iAgentify. Si no, la aplicación indica que tu plan muestra siempre la marca y qué planes permiten quitarla, con el botón Ver planes.

En móviles

El chat ocupa toda la pantalla, así que el Ancho y el Alto de la ventana no se aplican.
Nunca se abre solo, aunque hayas elegido Abierto o Se abre al cabo de un rato: el visitante toca el lanzador.

Guardar y ver el cambio en tu web

Pulsa Guardar cambios. Aparece «Widget guardado». Un solo guardado recoge los cambios de todas las secciones.
Abre tu web y recarga la página. El cambio puede tardar alrededor de un minuto en verse.

No hay que volver a pegar el código: el aspecto no se guarda en tu web, el chat lo consulta a iAgentify cada vez que se carga una página. Una página que ya estaba abierta mantiene el aspecto anterior hasta que se recarga.

Mientras no guardes, Descartar deshace los cambios, y si sales de la pestaña Widget la aplicación pregunta «¿Salir sin guardar?».

Si has guardado y el chat no se ve en tu web, el motivo no está en el aspecto: revisa el chat no aparece en tu web.