Personaliza la apariencia de Chat en web con Webchat Playground

Webchat Playground le ayuda a personalizar la apariencia y el comportamiento del agente 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.

Área de juegos de Webchat abierto

Para abrir Webchat Playground:

  1. Inicie sesión en Power Apps.
  2. Seleccione Aplicaciones.
  3. Busca Copilot Agent Kit.
  4. Pasa el cursor sobre el nombre de la app y selecciona el icono Reproducir. El Kit de Agente Copilot se abre en la nueva pestaña del navegador.
  5. En Copilot Agent Kit, selecciona Webchat Playground en el panel izquierdo. Se abre Webchat Playground.

Interfaz de usuario del área de juegos de webchat

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 un chat web existente. La vista del fragmento de código contiene un ejemplo de HTML de un chat web con los estilos integrados.

Captura de pantalla de la interfaz de usuario del área de juegos de webchat que muestra los temas disponibles, el panel de vista previa y un fragmento de código JSON.

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 opciones 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.

Captura de pantalla de la interfaz de usuario del área de juegos de webchat que muestra el editor de estilo de tema, el panel de vista previa y la pestaña Fragmento de código.

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 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 Chat en web 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 ejemplo

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

Captura de pantalla del widget flotante Chat web con estilos personalizados aplicados.

  • Se actualizó por última vez el