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.

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.

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.

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.