Personalizar el aspecto del widget de chat
Define tema, fuente, colores, esquinas, avatar, burbuja, bienvenidas y pie del widget, haz que se abra solo o importa tu logo y colores.
La pestaña Appearance (Aspecto) define cómo se ve el widget de chat y qué dice antes de que el visitante escriba. Tu web carga estos ajustes desde intoCHAT cada vez que se abre una página, así que nunca tienes que modificar el código de inserción para cambiarlos.
Dónde encontrarla
Abre tu agente y selecciona la pestaña Appearance. La Live preview (vista previa en directo), junto a los ajustes, muestra el widget tal como se verá, con la burbuja en el lado que elegiste. En pantallas más pequeñas, toca el botón Preview.
Los cambios no se publican hasta que haces clic en Save changes, arriba en la página. Después, recarga tu web para verlos.
Adaptarlo a tu web
En Match your website, escribe tu dominio y haz clic en Detect branding. intoCHAT lee tu página de inicio y propone un logo y cuatro colores. No cambia nada hasta que aplicas la propuesta:
- Apply colours & logo aplica los cuatro colores y usa el logo como avatar del agente.
- Colours only aplica solo los colores y mantiene tu avatar actual.
Si el color de tu marca es demasiado claro para un texto blanco, la importación lo oscurece. El logo se recorta en un círculo, así que un símbolo cuadrado funciona mejor que un logotipo ancho. El icono de la burbuja nunca se modifica. Una detección no consume créditos de rastreo.
Textos
| Campo | Qué hace |
|---|---|
| Welcome message (bienvenida) | El primer mensaje del agente en cada chat nuevo, de hasta 500 caracteres. Si está vacío: Hello! How can I help you today? Con Add another message añades hasta 3 más de la misma longitud. Cada uno aparece como una burbuja propia después del primero. |
| Suggested questions (preguntas sugeridas) | Hasta 6 preguntas de hasta 120 caracteres, que aparecen como botones sobre el campo de mensaje hasta que el visitante envía su primer mensaje. Un clic envía la pregunta. |
| Launcher tooltip | La etiqueta junto a la burbuja. Aparece un segundo después de cargar la página, se oculta a los tres segundos y vuelve a mostrarse al pasar el ratón. Si está vacío: "Chat with" seguido del nombre de tu agente, por ejemplo "Chat with Example Bikes". |
| Input placeholder (texto de ejemplo) | El texto de ayuda dentro del campo de mensaje. Si está vacío: Type your message... |
| Footer text (texto del pie) | Letra pequeña bajo el campo de mensaje, como un aviso de privacidad, de hasta 300 caracteres. Las direcciones web que empiezan por http:// o https:// se convierten en enlaces que se abren en una pestaña nueva. Aparece encima de la mención "Powered by intoCHAT". |
Los textos predeterminados están en inglés. Si tu web está en español, escribe los tuyos. El agente responde en el idioma del visitante, pero estos textos se muestran exactamente como los escribes. En una web multilingüe, mantenlos breves y en tu idioma principal.
Imágenes
- Agent avatar aparece junto a cada mensaje del agente, no en la cabecera. Sin avatar, los mensajes muestran "AI". Usa una imagen cuadrada de al menos 64 × 64 píxeles.
- Launcher icon sustituye al icono predeterminado de destellos. Un icono propio ocupa toda la burbuja de 56 píxeles, así que el color de la burbuja deja de verse.
Ambos aceptan archivos PNG, JPG, GIF o WebP de hasta 5 MB.
Estilo
En Style defines el tema, la fuente y las esquinas de la ventana del chat.
| Tema | Qué ven los visitantes |
|---|---|
| Light (claro) | Una ventana blanca, como se ha visto siempre el widget. Es la opción predeterminada. |
| Dark (oscuro) | Una ventana oscura. |
| Auto | Clara u oscura, según el ajuste del dispositivo de cada visitante. La ventana cambia si el visitante modifica ese ajuste con el chat abierto. |
En el tema oscuro, los colores de la cabecera, de los mensajes del visitante y de la burbuja se mantienen tal como los elegiste. Los mensajes del agente solo pasan a gris oscuro mientras usen el gris claro predeterminado; un color que hayas elegido se mantiene. Con Auto, la Live preview tiene los botones Light y Dark para comprobar ambos.
Font (fuente) se aplica a todo lo que hay dentro de la ventana del chat: System default, Inter, Roboto, Open Sans, Lato, Poppins o Serif (Georgia). System default y Serif usan fuentes que ya están en el dispositivo del visitante. Las fuentes web las sirve intoCHAT, y los visitantes solo descargan la que elijas. El tooltip y la ventana emergente de bienvenida de tu página mantienen la fuente del sistema.
Corners (esquinas) define lo redondeados que son las burbujas de mensaje, el campo de mensaje, el botón de enviar, las preguntas sugeridas y los botones personalizados: Sharp, Soft o Rounded. Soft es la opción predeterminada y coincide con el aspecto que tenía el widget antes de que existiera este ajuste.
Colores
Empieza con una de las plantillas de Colours (Ink, Ocean, Forest, Plum, Ember) y ajusta cada campo con el selector de color o un valor hexadecimal.
| Color | Dónde se usa |
|---|---|
| Header | La barra superior del chat, con el nombre del agente |
| Launcher bubble | La burbuja redonda y el botón de enviar |
| Visitor messages | El fondo de los mensajes del visitante |
| Agent messages | El fondo de los mensajes del agente |
Posición
En Placement, elige en Side of the screen izquierda (left) o derecha (right). La burbuja se sitúa a 20 píxeles de esa esquina inferior. En escritorio, el chat se abre encima en una ventana de 380 × 600 píxeles. En pantallas de 768 píxeles de ancho o menos ocupa toda la pantalla. La ventana del chat tiene un botón para cerrar en la cabecera, y un nuevo clic en la burbuja también la cierra.
Quitar "Powered by intoCHAT"
El interruptor Show "Powered by intoCHAT" controla la pequeña mención bajo el campo de mensaje. En el plan Free el interruptor está bloqueado en activado, y el enlace Remove the intoCHAT credit on any paid plan que aparece debajo abre tus ajustes de facturación. En cualquier plan de pago puedes desactivarlo. Consulta los precios.
Comportamiento de la burbuja
En Launcher behaviour, dos invitaciones opcionales atraen a los visitantes al chat sin esperar a que hagan clic. Cada una tiene un interruptor y un retraso de 0 a 300 segundos en la página.
- Show the welcome message above the launcher muestra tus mensajes de bienvenida como pequeñas burbujas junto a la burbuja del chat, a los 5 segundos si no cambias el retraso. Tu avatar aparece junto al primero, y los mensajes largos se cortan a partir de la cuarta línea. Un clic en una burbuja abre el chat. El botón × las cierra.
- Open the chat automatically abre la ventana del chat por sí sola, a los 10 segundos si no cambias el retraso. No se aplica en pantallas de 768 píxeles de ancho o menos, donde el chat ocuparía toda la pantalla.
Una visita dura hasta que el visitante cierra la pestaña del navegador. La apertura automática se produce como máximo una vez por visita. La ventana emergente vuelve a aparecer en cada página nueva hasta que el visitante la cierra. Ninguna de las dos aparece durante el resto de la visita una vez que el visitante ha abierto o cerrado el chat, ha cerrado la ventana emergente o el chat se ha abierto automáticamente. Si ambas están activadas, primero llega la de menor retraso, y al abrirse el chat desaparece la ventana emergente que esté visible.
Problemas frecuentes
- Los cambios no aparecen en tu web. Haz clic en Save changes y recarga la página. El widget vuelve a cargar sus ajustes en cada carga de página.
- El color de la burbuja no cambia. Hay un icono de burbuja configurado que tapa el color. Quítalo para volver a usar el color.
- "Logo could not be imported". Los colores se aplicaron igualmente. Sube tú un logo en Agent avatar.
- La ventana emergente o la apertura automática no aparecen. Ambas se detienen durante el resto de la visita una vez que el chat se ha abierto, cerrado o descartado, y la apertura automática también después de haberse producido una vez. Para volver a probar, abre tu web en una pestaña nueva. La apertura automática nunca se produce en pantallas de 768 píxeles de ancho o menos.
Después, instala el widget con una etiqueta script o consulta otras plataformas.