Página web de chat
Apariencia
Deja la página web de chat con la cara de tu marca — elige el diseño de página, tus colores y tu logo, y escribe lo que se lee primero.
Si la página web de chat es tu vitrina, esto es la pintura, el letrero y lo que se exhibe en la ventana. Abre el canal Web de tu agente, ve a la pestaña Apariencia y todo lo que cambies aparece en la vista previa que tienes al lado antes de que lo vea nadie más. La vista previa te acompaña mientras bajas; sus pestañas cambian entre la pantalla de acceso, Bienvenida de vuelta, el chat vacío y un chat en curso, y Ampliar la abre en grande.
Elige un diseño
Los seis diseños no son combinaciones de colores: cada uno es una página distinta. Los mensajes van en otro lugar, el encabezado se comporta distinto y la sensación al leer cambia con ellos.
Cada diseño trae su propio modo claro u oscuro por defecto, que puedes cambiar.
Claro, oscuro e idioma
| Opción | Para qué sirve |
|---|---|
| Claro u oscuro | Fija la página en claro, en oscuro, o deja que siga lo que ya usa el teléfono o el computador de quien entra |
| Permitir cambiar entre claro y oscuro | Activado por defecto. Al desactivarlo se fija tu elección y el botón desaparece por completo |
| Idioma | El idioma de la pantalla de acceso y del chat: español, inglés, o el del navegador de quien entra |
Tu identidad
- Nombre en el encabezado y una línea pequeña al lado (algo como Soporte · 24/7). Déjalos vacíos para usar el nombre del agente.
- Logo para el encabezado, un logo para modo oscuro opcional y un avatar que se usa cuando no hay logo.
- Descripción del logo — lo que dice un lector de pantalla en lugar de la imagen, para que quien lo use también sepa de quién es la página.
- Mostrar el crédito «compartido por» — tu nombre y tu foto en la pantalla de acceso, para que se sepa quién está detrás del enlace.
Lo que subes se aplica apenas lo eliges, así que aparece en la vista previa antes de presionar Guardar. Todo lo demás de la pestaña se guarda con el botón de abajo.
Tus colores
Dos colores: uno principal (botones, la flecha de enviar, las filas seleccionadas) y un segundo color que solo algunos diseños usan — la franja del encabezado de Órbita, por ejemplo. Deja cualquiera de los dos desactivado para heredar los colores del diseño.
Tu color se ajusta automáticamente para que el texto se siga leyendo bien en claro y en oscuro. El tono nunca cambia, así que tu marca se sigue viendo como tu marca.
Lo que la gente lee
Todos los campos de abajo son opcionales: si los dejas vacíos se usan el nombre, la descripción y las sugerencias del propio agente.
| Campo | Dónde aparece |
|---|---|
| Título y subtítulo de acceso | La primera pantalla, sobre la casilla del correo |
| Mensaje de bienvenida | El chat vacío, antes de que alguien escriba. Es el único campo que conserva los saltos de línea; el formato básico funciona, las imágenes no |
| Encabezado del chat | El título sobre ese mensaje de bienvenida |
| Texto de la casilla de mensaje | La pista gris dentro de la casilla donde se escribe |
| Preguntas sugeridas | Ejemplos que se pueden tocar en el chat vacío: usa las del agente, no muestres ninguna, o escribe las tuyas, una por línea |
| Línea de privacidad | Reescribe el aviso de que tú puedes leer las conversaciones |
| Línea del pie | Una línea tuya bajo el chat, con enlace a tu sitio si quieres |
A quien entra siempre se le dice que la persona dueña del asistente puede leer estas conversaciones. Puedes cambiar las palabras; no puedes desactivarlo.
Páginas de bienvenida
Dos pantallas marcan la primera impresión: la pantalla de acceso y el chat vacío antes del primer mensaje. Cada una tiene sus opciones en Páginas de bienvenida, y todas se redibujan con el diseño que elegiste arriba.
Ana· Soporte · 24/7
·Prueba NirvaiAnaVentas y soporte de ropa outdoor.Clásica. Tu agente, centrado sobre la casilla de acceso.
Bienvenida de vuelta no es una opción que eliges: es automática con el acceso por correo. Cuando alguien vuelve en un dispositivo que ya usó, la página lo saluda por su nombre, muestra su correo medio oculto, le envía el código con un clic y le ofrece reabrir su última conversación. Puedes apagarla con Dar la bienvenida a quienes vuelven.
Ana· Soporte · 24/7·Prueba NirvaiTu pedido, tu talla y tu cambio — resueltos en minutos.¿En qué puedo ayudarte hoy?Simple. La foto de tu agente y un título. La opción por defecto.
Cada opción se arma con unas pocas listas cortas. Si dejas una vacía, ese bloque simplemente no aparece.
| Tú escribes | Lo usa | Hasta |
|---|---|---|
| Qué obtienen los visitantes — líneas cortas con un check | Acceso dividido | 3 |
| Sellos — datos cortos como Responde al instante | Acceso dividido y con portada | 3 |
Saludo — escribe {first_name} para usar el nombre de la persona | Saludo | 1 |
| En qué ayuda — un título y una línea cada uno (información, no botones) | Bloques de bienvenida | 3 |
Enlaces — tu web, Instagram, WhatsApp… (solo https://) | Acceso con portada, Bloques de bienvenida | 3 |
| Horario de atención humana | Bloques de bienvenida | 4 filas |
| Preguntas frecuentes — las respuestas se abren en el lugar y nunca usan créditos | Bloques de bienvenida, Portada grande | 6 |
| Imagen de portada | Dividida, Portada, Portada grande | 1 |
La imagen de portada
Sin foto, cada diseño pinta su propia portada con tus colores. Con una, sube el tamaño del lugar donde se muestra y calzará perfecto (máx. 2 MB). Bajo el cargador, el panel Tamaño recomendado muestra las formas que usan las opciones que elegiste y revisa tu foto en cada una — aquí, una foto de 2400 × 600 con las tres en uso:
Tamaño recomendado
Tu foto: 2400 × 600 px
Usas la portada en más de una forma y una sola foto no puede calzar en todas. Sube el tamaño de la que más te importa; en las demás se recorta desde el centro, así que deja lo importante al medio.
Si usas la portada en más de un lugar, una sola foto no puede llenar todas las formas. Sube el tamaño del que más te importa — en los demás se recorta desde el centro, así que deja lo importante al medio.
Puedes subir cualquier foto, clara u oscura, así que el texto encima siempre es blanco sobre una sombra oscura suave. Se lee bien en modo claro y oscuro. El banner del acceso Portada no lleva texto encima, así que se muestra tal como lo subiste.
Lo que sigue siendo de Nirvai
La marca de Nirvai y el botón Get Nirvai están en la esquina superior derecha de todas las pantallas, tanto en el acceso como en el chat, pongas lo que pongas aquí. Esto es co-branding, no marca blanca:
La izquierda es tuya. La derecha es de Nirvai. Tu logo y tu nombre siempre van primero — en un teléfono angosto es el botón de Nirvai el que se reduce a un ícono, nunca tu nombre.
La línea del pie es el espacio que es completamente tuyo.
Problemas frecuentes
| Problema | Solución |
|---|---|
| Mi logo se ve aplastado o borroso | El logo del encabezado es pequeño (alrededor de 132×24). Sube una versión ancha y con fondo transparente en vez de una cuadrada — la imagen cuadrada va en Avatar |
| Mi color casi no se nota | Algunos diseños usan poco el color a propósito. Prueba Órbita, que es el que más lo usa |
| Mi logo desaparece en modo oscuro | Agrega un logo para modo oscuro. Sin él se reutiliza el claro |
| Mi portada se corta o se ve borrosa | Sube el tamaño recomendado para donde se muestra (mira la imagen de portada) y deja lo importante al centro. Bajo el cargador, Muy pequeña significa que se verá borrosa |
| A quienes vuelven no les aparece «Bienvenida de vuelta» | Necesita acceso por correo y el mismo dispositivo y navegador que usaron antes. Cerrar sesión los olvida a propósito. Revisa que Dar la bienvenida a quienes vuelven esté activado |
| No se ven mis bloques de bienvenida | Los bloques sin nada escrito se ocultan. Completa al menos una fila, elige Bloques de bienvenida o Portada grande y guarda |
| Los cambios no se ven | Los textos y colores se aplican al presionar Guardar cambios; las imágenes se aplican de inmediato |
| Alguien ve un tema distinto al de mi vista previa | Dejaste Claro u oscuro en «seguir el dispositivo» o esa persona usó el botón. Fíjalo y desactiva el botón si el diseño debe quedar quieto |