Que el widget se parezca a tu sitio

Todo lo visual vive en la pestaña Diseño del widget, y nada llega a tus visitantes hasta que pulsas Publicar.

Empieza por una captura

Lo más rápido es subir una captura de tu propio sitio. Leemos la paleta, el radio de las esquinas y la tipografía, y proponemos valores; tú revisas y cambias lo que quieras antes de aplicar, y aplicar solo rellena los campos: no guarda. La captura no se almacena.

Tokens de tema

Cada campo es una variable CSS que el widget lee:

• Primario y Primario hover son el lanzador, el botón de enviar y los enlaces.
• Burbuja del visitante y Burbuja del asistente son los dos lados de la conversación.
• Fondo de página, Fondo del panel, Texto, Texto secundario y Bordes son el panel.
• Radio del panel, Radio de burbuja, Tamaño de fuente, Tamaño del lanzador, Ancho y Alto del panel y los dos desplazamientos son la forma y dónde se coloca.

Dejar un color vacío significa "heredar", que suele ser lo correcto para los que no te importan. Cada campo puede volver por su cuenta al valor por defecto de WelcomeAI, y hay un botón que lo restablece todo: no te puedes quedar atrapado en una configuración de la que te arrepientes.

No vas a ver todos. La lista se filtra a los tokens que el tipo del widget realmente dibuja, porque un selector de color para algo que nunca aparece es un ajuste que se guarda y nadie lee. Un chat flotante recibe los cuarenta y uno; un asistente de documentación no tiene botón lanzador, así que los siete colores del lanzador no se ofrecen; Destacado y Campo en línea dibujan una tarjeta de respuesta y no burbujas, así que tampoco están los dos colores de burbuja ni su radio; y Brillo, el segundo color del degradado de Destacado, se le ofrece a Destacado y a nada más. Cambia el tipo y la lista cambia con él.

Tipografía

Elige de la lista de Google Fonts y se carga en el editor, en la vista previa y en tu sitio, con una sola petición. Déjala en la fuente del sistema si prefieres no añadir una descarga: se adapta al dispositivo del visitante y aparece al instante.

Darle un nombre y una cara al asistente

En Identidad del asistente puedes ponerle un nombre -- Mia, Alex, el que encaje con la marca -- y una imagen. Cambian tres cosas:

• El nombre aparece como una etiqueta pequeña sobre cada respuesta, como en un mensajero. Se dibuja una vez por tanda de respuestas, no en cada burbuja.
• La imagen aparece junto a cada respuesta y en el encabezado del panel, recortada cuadrada y dibujada redonda.
• Mientras escribe decide qué ve la persona mientras llega la respuesta: los tres puntos, las palabras "Mia está escribiendo...", o ambas cosas. Sin nombre siempre son los puntos: una línea de escritura sin nadie delante parece un error.

El nombre es solo presentación. No se envía al modelo y no cambia cómo responde el asistente; si quieres que diga que es Mia, ponlo en las instrucciones de la base de conocimiento.

Las imágenes, y qué les pasa

Cada imagen que subes aquí -- la del asistente, el logo de la página alojada y su fondo -- se convierte a WebP en tu propio navegador antes de enviarse, escalada al tamaño al que realmente la dibujamos. Una fotografía de cuatro megabytes soltada en el campo de fondo llega como unos veinte kilobytes. El original nunca sale de tu equipo y nunca se guarda.

Cada subida recibe una dirección propia cuyo contenido no cambia nunca, así que los navegadores y nuestro CDN la guardan un año y un reemplazo se ve al instante.

El icono del lanzador

La marca de WelcomeAI por defecto. Sube el tuyo como PNG o JPG de exactamente 128 por 128 píxeles, o como SVG cuadrado. Un SVG se revisa con cuidado antes de guardarlo -- se rechazan scripts, manejadores de eventos, archivos incrustados y referencias externas -- y lo que guardamos es una copia reconstruida con solo lo necesario para dibujarlo.

Claro, oscuro, o lo que prefiera el visitante

El tema tiene tres opciones. Automático sigue la preferencia del sistema del visitante, que es lo correcto para un sitio que ya lo hace.

La vista previa

El panel junto al editor es tu widget en una página real, a un ancho de dispositivo real. Cambia entre escritorio, tableta y móvil: el widget tiene sus propios puntos de ruptura y solo se activan a anchos reales, así que juzgar el móvil estrechando el navegador no vale.

La página alojada (widgets de página completa)

Un widget de página completa se sirve en su propia dirección -- la nuestra o tu propio dominio -- así que, a diferencia del resto, no tiene una página tuya alrededor. Apariencia de la página alojada es esa página:

• Logo del encabezado y Texto del encabezado son la franja sobre el chat. El logo nunca se recorta; fijas su altura en píxeles y el ancho se ajusta. El texto tiene un color propio, porque la franja va sobre tu fondo y no dentro del panel.
• Color de fondo es el suelo detrás del panel, y también lo que la página pinta antes de que el widget cargue, así que una marca oscura ya no recibe un destello blanco en su propio dominio.
• Imagen de fondo va detrás de todo, con un ajuste (cubrir, contener o mosaico) y una capa: un color con su propia opacidad encima, para que una misma fotografía sirva con tema claro y oscuro sin exportarla dos veces.
• Ancho del panel es cuánto puede crecer el chat en una pantalla grande.

Acciones rápidas: dos textos, uno visible

Una acción rápida es una píldora que se muestra antes del primer mensaje, y las de tipo Preguntar llevan dos cadenas:

• Etiqueta es lo que ve y pulsa la persona; y, en cuanto lo hace, es lo que dice su propio mensaje en el chat.
• Pregunta a enviar es lo que recibe el asistente. Nunca se le muestra a la persona, así que puede ser tan larga y específica como haga falta: "¿Cuánto cuesta cada plan al mes y al año, y qué incluye cada uno?" detrás de una píldora que dice "Ver precios".

Si dejas la pregunta vacía se envía la etiqueta tal cual, que es lo correcto cuando la píldora ya se lee como una pregunta.

En tus Conversaciones el mensaje de la persona muestra la etiqueta, con la pregunta debajo, así que "¿por qué respondió eso?" se contesta desde la transcripción sin abrir la configuración del widget.

Publicar, y limpiar la caché

Publicar hace dos cosas: convierte el borrador en lo que reciben los visitantes, y limpia las respuestas guardadas de la base de conocimiento de este widget. Esas respuestas se indexan por la pregunta y el material, no por nada de esta pantalla, así que sin ese paso un cambio en el saludo o en las citas podía ir seguido de una respuesta de ayer.

Limpiar caché hace solo la segunda mitad. Úsalo cuando lo que cambió fue el material y no el widget: reindexaste una fuente, reescribiste las instrucciones, corregiste un precio en un documento. Solo toca la base de conocimiento desde la que responde este widget.

Cuando los tokens no bastan

Los planes Pro y Business pueden escribir CSS propio contra el shadow root del widget, con selectores ::part() para el lanzador, el panel, la cabecera y los mensajes, o con las clases del propio widget. @import y las url() externas se eliminan: el widget no debe traer nada de un tercero a las páginas de tus visitantes.

Si estás peleando con el CSS, comprueba antes lo sencillo: un token que dejaste vacío está heredando de algún sitio, y ponerlo explícitamente suele ser el arreglo entero.