Personalización de la apariencia de Web Chat con el área de juegos de webchat

Webchat Playground le ayuda a personalizar la apariencia y el comportamiento del agente Web Chat. 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 Web Chat. 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 Web Chat existente. La vista del fragmento de código contiene un ejemplo de HTML de un chat web con los estilos integrados.

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, Send Box, Suggestion Box, Avatar y Bubble. El editor también incluye un comprobador de accesibilidad para todas las secciones aplicables. Las acciones de guardar y eliminar están en la parte superior.

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

Usar temas predefinidos o crear sus propios temas

Webchat Playground ofrece temas predefinidos que muestran diferentes opciones de personalización para la experiencia de Web Chat. 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. Haga clic en 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 finalices, selecciona 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 código HTML de Web Chat 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 Web Chat control con los estilos seleccionados aplicados.

Información relacionada

• Personalizar la apariencia de un agente