Personalice la apariencia de Chat en web con Webchat Playground

Webchat Playground le ayuda a personalizar la apariencia y el comportamiento del agente de copilot Chat en web. La interfaz de usuario intuitiva le permite modificar colores, fuentes, miniaturas y mucho más para que coincidan con la identidad de la marca. En este artículo se describe cómo usar Webchat Playground para crear y administrar temas y exportar estilos como JSON o HTML.

IU Webchat Playground

La interfaz fácil de usar de Webchat Playground le ayuda a definir la apariencia de su Chat en web. Puede realizar fácilmente ajustes y ver las vistas previas en tiempo real de los cambios.

La interfaz tiene tres áreas principales:

1. En el panel izquierdo se muestran los temas guardados con sus colores primarios, secundarios y de énfasis. Seleccione un tema para editarlo u obtener una vista previa.

2. El panel central proporciona una vista previa del tema seleccionado o el tema que está editando.

3. El panel derecho le permite alternar entre las pestañas JSON y Fragmento de código. La vista JSON proporciona los estilos actuales en una matriz JSON, que puede pegar en una Chat en web existente. La vista Fragmento de código contiene html de ejemplo de un Chat en web con los estilos incrustados.

Este ejemplo de interfaz de usuario muestra:

1. En el panel izquierdo, el editor de estilos donde edita o crea un tema.

   Entre las secciones se incluyen General, Caja enviar, Caja sugerencia Box, Avatar y Burbuja. El editor también incluye un comprobador de accesibilidad para todas las secciones aplicables. Guarda y elimina acciones en la parte superior.

2. En el panel derecho, la pestaña Fragmento de código que muestra HTML de ejemplo. Cambie a la pestaña JSON para ver JSON de ejemplo.

Usar temas predefinidos o crear sus propios temas

Webchat Playground ofrece temas predefinidos que muestran diferentes opciones de personalización para la experiencia de Chat en web. Estos temas proporcionan un punto de partida al diseñar un nuevo tema. También puede crear nuevos temas para satisfacer sus necesidades específicas y guardarlos para su uso futuro.

Vista previa de un tema

Seleccione un tema en el panel izquierdo (donde se muestran los colores) para abrir la vista previa del chat web.

Crear un tema nuevo

Para crear un tema nuevo:

1. Seleccione Agregar un tema en el panel de la izquierda.
   El panel izquierdo se convierte en un editor de estilo donde puede realizar modificaciones.
2. Escriba un nombre para el tema.
3. Seleccione Guardar.

Editar un tema

Para editar un tema existente:

1. Seleccione el icono de lápiz situado junto al nombre del tema en el panel izquierdo.
2. Realice modificaciones en el editor de estilos.
3. Cuando acabe, seleccione Guardar.

Eliminar un tema

Para eliminar un tema existente:

1. Abra el tema en modo de edición.
2. Seleccione el icono de eliminar (papelera) en la parte superior.

Exportar estilos

Para exportar estilos:

1. Seleccione el tema que desee en el selector de temas.
2. Seleccione la pestaña JSON en el panel derecho.
3. Copie todo el texto de la vista y péguelo en el Chat en web HTML mediante la variable styleOptions.

Exportar el fragmento de código HTML

Para exportar el fragmento de código HTML:

1. Seleccione el tema que desee en el selector de temas.
2. Seleccione la pestaña Fragmento de código en el panel derecho.
3. Guarde todo el marcado HTML en la vista como un archivo con una extensión .html.
4. Cargue el archivo HTML en el servidor web.

HTML de muestra

El fragmento de código HTML de ejemplo incluye un widget flotante Chat en web control con los estilos seleccionados aplicados.

Información relacionada

• Personalizar la apariencia de un agente