Personalizar la apariencia del bot de un copiloto

  • Artículo

La apariencia de su copiloto se define por su lienzo. Puede personalizar el lienzo de dos maneras, según la complejidad de los cambios deseados:

Importante

Puede instalar y utilizar el código de muestra incluido en este artículo solo para utilizarlo con Microsoft Copilot Studio. El código de muestra tiene licencia "tal cual" y está excluido de cualquier acuerdo de nivel de servicio o servicios de soporte. Usted asume el riesgo de su uso.

Microsoft no ofrece garantías expresas, garantías ni condiciones y renuncia a todas las garantías implícitas, incluidas las de comerciabilidad, idoneidad para un propósito genérico y ausencia de infracción.

Después de crear y publicar un copiloto, sus clientes pueden usar el lienzo del chat web del copiloto para interactuar con él.

También puede combinar el lienzo personalizado con Configurar su copiloto para iniciar automáticamente la conversación.

Por último, puede cambiar el nombre y el icono de su copiloto (cuando se comparte en Microsoft Teams) directamente desde el portal.

Cambie el nombre y el icono del copiloto

Importante

Si su copiloto está conectado a la Plataforma omnicanal para Customer Service, su nombre se define mediante la propiedad Nombre para mostrar en el registro del portal de Azure.

Puede cambiar el nombre y el icono del copiloto. Esto afectará al ícono en todos los canales en los que publique el copiloto.

  1. En el menú de navegación, en Configuración, seleccione Detalles.

  2. Cambie el nombre y el icono del copiloto Revise las recomendaciones sobre los formatos del icono de Microsoft Teams.

  3. Seleccione Guardar para confirmar los cambios.

    El panel de detalles del copiloto le permite cambiar el nombre y el icono.

Importante

Después de actualizar el icono del copiloto, pueden pasar hasta 24 horas para que el nuevo icono aparezca en todas partes.

Recuperar el extremo del token

Para personalizar su lienzo, ya sea el lienzo predeterminado o uno personalizado al que se conecta, debe recuperar los detalles de su copiloto.

  1. En el menú de navegación, en Configuración, seleccione Canales.

  2. Seleccione Aplicación móvil.

    Captura de pantalla del mosaico de canal de la aplicación móvil.

  3. Junto a Extremo de token, seleccione Copiar.

    Captura de pantalla del id. del token de punto de conexión.

Personalizar el lienzo predeterminado (sencillo)

Configure el aspecto del lienzo de chat con algunas sencillas opciones de estilo de CSS y JavaScript.

Primero, debe configurar dónde está implementando su lienzo de copiloto.

  1. Crear y publicar un copiloto.

  2. Copie y pegue el código HTML a continuación y guárdelo como index.html.
    También puede copiar y pegar el siguiente código en el editor para probar HTML en w3schools.com. Aún necesitará agregar su extremo de token.

     <!doctype html>
 <html lang="en">
   <head>
     <title>Contoso Sample Web Chat</title>
     <!--
       This styling is for the Web Chat demonstration purposes.
       It is recommended that style is moved to a separate file for organization in larger projects.

       Please visit https://github.com/microsoft/BotFramework-WebChat for details about Web Chat.
     -->
     <style>
       html,
       body {
         height: 100%;
       }

       body {
         margin: 0;
       }

       h1 {
         color: whitesmoke;
         font-family: Segoe UI;
         font-size: 16px;
         line-height: 20px;
         margin: 0;
         padding: 0 20px;
       }

       #banner {
         align-items: center;
         background-color: black;
         display: flex;
         height: 50px;
       }

       #webchat {
         height: calc(100% - 50px);
         overflow: hidden;
         position: fixed;
         top: 50px;
         width: 100%;
       }
     </style>
   </head>
   <body>
     <div>
       <div id="banner">
         <h1>Contoso copilot name</h1>
       </div>
       <div id="webchat" role="main"></div>
     </div>

     <!--
       In this sample, the latest version of Web Chat is being used.
       In production environment, the version number should be pinned and version bump should be done frequently.

       Please visit https://github.com/microsoft/BotFramework-WebChat/tree/main/CHANGELOG.md for changelog.
     -->
     <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

     <script>
       (async function () {
         // Specifies style options to customize the Web Chat canvas.
         // Please visit https://microsoft.github.io/BotFramework-WebChat for customization samples.
         const styleOptions = {
           // Hide upload button.
           hideUploadButton: true
         };

         // Specifies the token endpoint URL.
         // To get this value, visit Copilot Studio > Settings > Channels > Mobile app page.
         const tokenEndpointURL = new URL('<COPILOT TOKEN ENDPOINT>');

         // Specifies the language the copilot and Web Chat should display in:
         // - (Recommended) To match the page language, set it to document.documentElement.lang
         // - To use current user language, set it to navigator.language with a fallback language
         // - To use another language, set it to supported Unicode locale

         // Setting page language is highly recommended.
         // When page language is set, browsers will use native font for the respective language.

         const locale = document.documentElement.lang || 'en'; // Uses language specified in <html> element and fallback to English (United States).
         // const locale = navigator.language || 'ja-JP'; // Uses user preferred language and fallback to Japanese.
         // const locale = 'zh-HAnt'; // Always use Chinese (Traditional).

         const apiVersion = tokenEndpointURL.searchParams.get('api-version');

         const [directLineURL, token] = await Promise.all([
           fetch(new URL(`/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`, tokenEndpointURL))
             .then(response => {
               if (!response.ok) {
                 throw new Error('Failed to retrieve regional channel settings.');
               }

               return response.json();
             })
             .then(({ channelUrlsById: { directline } }) => directline),
           fetch(tokenEndpointURL)
             .then(response => {
               if (!response.ok) {
                 throw new Error('Failed to retrieve Direct Line token.');
               }

               return response.json();
             })
             .then(({ token }) => token)
         ]);

         // The "token" variable is the credentials for accessing the current conversation.
         // To maintain conversation across page navigation, save and reuse the token.

         // The token could have access to sensitive information about the user.
         // It must be treated like user password.

         const directLine = WebChat.createDirectLine({ domain: new URL('v3/directline', directLineURL), token });

         // Sends "startConversation" event when the connection is established.

         const subscription = directLine.connectionStatus$.subscribe({
           next(value) {
             if (value === 2) {
               directLine
                 .postActivity({
                   localTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
                   locale,
                   name: 'startConversation',
                   type: 'event'
                 })
                 .subscribe();

               // Only send the event once, unsubscribe after the event is sent.
               subscription.unsubscribe();
             }
           }
         });

         WebChat.renderWebChat({ directLine, locale, styleOptions }, document.getElementById('webchat'));
       })();
     </script>
   </body>
 </html>

  3. En archivo index.html que creó, ingrese su extremo de token en la línea const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>";.

  4. Abra index.html utilizando un navegador moderno (por ejemplo, Microsoft Edge) para abrir el copiloto en el lienzo personalizado.

  5. Pruebe el copiloto para asegurarse de que está recibiendo respuestas del mismo y de que funciona correctamente.

    Si encuentra problemas, asegúrese de haber publicado el copiloto y que el punto de conexión del token se haya insertado en el lugar correcto. Debe aparecer después del signo igual (=) en la línea const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>" y estar rodeado de comillas dobles (").

Personalizar el icono, el color de fondo y el nombre del copiloto

Una vez que cree el lienzo personalizado del copiloto, puede realizar cambios en él.

Puede usar las opciones styleOptions de JavaScript para configurar una serie de estilos predefinidos.

Vea Personalización del chat web para obtener enlaces al archivo defaultStyleOptions.js y más información sobre lo que puede personalizar y cómo se verá.

Cambiar el icono del copiloto

  1. Actualizar el archivo index.html con el siguiente código de muestra:

    const styleOptions = {
  accent: '#00809d',
  botAvatarBackgroundColor: '#FFFFFF',
  botAvatarImage: 'https://video2.skills-academy.com/azure/bot-service/v4sdk/media/logo_bot.svg',
  botAvatarInitials: 'BT',
  userAvatarImage: 'https://avatars.githubusercontent.com/u/661465'
};

  2. Reemplace las imágenes del avatar del copiloto y del usuario con imágenes de su empresa.
    Si no tiene una dirección URL de imagen, puede usar una cadena de imagen codificada en Base64 en su lugar.

Cambiar el color de fondo

  1. Actualice el archivo index.html con el siguiente código de muestra:

    const styleOptions = {
  backgroundColor: 'lightgray'
};

  2. Cambie backgroundColor a cualquier color que desee. Puede usar nombres de colores CSS estándar, valores RGB o HEX.

Cambiar el nombre del copiloto

  1. Actualice el texto <h1> en el archivo index.html con el siguiente código de muestra:

    <body>
  <div id="banner">
    <h1><img src="contosocopilot-teams.png"> Contoso copilot name</h1>
  </div>

  2. Cambie el texto con el nombre que quiere asignar al copiloto. También puede insertar una imagen, aunque es posible que deba diseñarla para asegurarse de que se ajusta a la sección de encabezado.

Personalizar y hospedar el lienzo de chat (avanzado)

Puede conectar el copiloto de Copilot Studio con un lienzo personalizado que está hospedado como una aplicación web independiente. Esta opción es mejor si tiene que insertar un elemento iFrame personalizado en varias páginas web.

Nota

Hospedar un lienzo personalizado requiere desarrollo de software. Nuestra guía está destinada a profesionales de TI con experiencia, como administradores de TI o desarrolladores que tienen una sólida comprensión de las herramientas de desarrollo, las utilidades y los entornos de desarrollo integrado (IDE).

Elegir un ejemplo para personalizar

Recomendamos comenzar con uno de estos ejemplos personalizados para trabajar con Copilot Studio:

  • Paquete completo es un lienzo personalizado capaz de mostrar todo el contenido enriquecido de Copilot Studio. Por ejemplo:

    Lienzo personalizado de paquete completo.

  • Ubicación y carga de archivos es un lienzo personalizado capaz de obtener la ubicación de un usuario y enviarla a un copiloto de Copilot Studio. Por ejemplo:

    Ubicación y carga de archivos de lienzo personalizado.

También puede elegir entre otros ejemplos de lienzos de Chat en web proporcionados por Bot Framework.

Personalizar un lienzo con styleSetOptions

Al igual que con la personalización del lienzo predeterminado, puede usar styleSetOptions para personalizar el lienzo personalizado. Todas las propiedades personalizables se enumeran en defaultStyleOptions.js. Para obtener más información sobre lo que puede personalizar y cómo se verá, vea Personalización del chat web.

Implementar el lienzo personalizado

Para hospedar el lienzo personalizado, implemente todos los archivos en una aplicación web.

Contenido relacionado