Diseño y el Estudio de Diseño del Widget
Da estilo al widget para que encaje con tu marca: tokens de tema, componentes y el estudio de diseño por organización.
El grupo Superficies es donde controlas el aspecto del asistente: ve los componentes que puede representar y diseña el widget en detalle en el Estudio de diseño del widget.
Componentes
Una referencia de los componentes integrados que el asistente puede representar —tablas, tarjetas, formularios y más— junto con la API para registrar tus propios componentes de React y que el asistente también los represente.
Estudio de Diseño del Widget
El Estudio de Diseño es donde diseñas el widget en profundidad. Monta el widget real como un lienzo en vivo, así que lo que ves es lo que se publica:
- Una biblioteca de diseños: mantén varios diseños y elige cuál está activo.
- Asignación por tamaño y por modo: da a cada tamaño de chat su propio diseño si quieres.
- Un inspector de colores, tipografía, forma, el lanzador, iconos y movimiento, anulaciones por tamaño y CSS avanzado.
- Un diseño «detectado» que deriva los esquemas claro y oscuro a partir de tu sitio en vivo.
Crea y activa un diseño, paso a paso
El Design Studio monta el widget real como un lienzo en vivo, así que lo que ves es lo que se despliega:
- Abre el Design StudioVe al grupo Surfaces y abre el Widget Design Studio. Carga el widget en vivo junto a una biblioteca de diseños.
- Crea un perfilHaz clic en New profile y ponle nombre; o duplica el diseño «detected» integrado, que deriva esquemas claro y oscuro de tu sitio en vivo, y edita a partir de ahí.
- Ajústalo en el inspectorAbre el perfil para editarlo. Usa el inspector para ajustar colores, tipografía, forma, el lanzador, los iconos y el movimiento: el lienzo en vivo se actualiza a medida que avanzas, y tus cambios se guardan según los haces.
- Asígnalo a tamaños y modosEn el panel Sizes & modes, elige qué tamaños y modos de chat usan este diseño; puedes dar a cada tamaño el suyo propio si quieres.
- Conviértelo en el que está en usoGuardar actualiza el aspecto almacenado del perfil, pero tu widget en vivo solo cambia cuando eliges Use this design para hacerlo el activo. Promuévelo a producción cuando estés a gusto con él.