Tilpasse din copilots udseende og funktionalitet

Artikel
05/29/2024

Din copilots lærred bestemmer udseendet og funktionalitet. Du kan tilpasse lærredet på to måder, afhængigt af tilpasningens kompleksitet for de ønskede ændringer:

Tilpas standardlærredet med JavaScript-baseret formatering i HTML-koden for den website, hvor du installerer din copilot.
Denne fremgangsmåde er nyttigt, hvis du vil foretage små tilpasninger uden at investere i kodeudvikling.
Brug et brugerdefineret lærred, der er baseret på Bot Framework-lærredet for webchat.
Denne fremgangsmåde kræver omfattende udviklerviden. Det er praktisk for organisationer, der ønsker en helt brugerdefineret oplevelse.

Vigtigt

Du må kun installere og bruge eksempelkoden, der findes i denne artikel, til brug sammen med Microsoft Copilot Studio-produktet. Eksempelkoden er licenseret "som den er og forefindes" i forhold til serviceaftaler eller supporttjenester. Dokumentet bruges på egen risiko.

Microsoft giver ingen udtrykkelige garantier, eller betingelser og påtager sig intet ansvar og fraskriver sig alle underforståede garantier, herunder garanti for salgbarhed, egnethed til et bestemt formål og ikke-krænkelser.

Webapp
Teams

Når du har oprettet og publiceret en copilot, kan dine kunder bruge copilotens webchatlærred til at kommunikere med den.

Du kan også kombinere det brugerdefinerede lærred med konfiguration af din copilot til automatisk at starte samtalen.

Endelig kan du ændre navn og ikon for din copilot (når den deles i Microsoft Teams) direkte fra portalen.

Ændre copilotens navn og ikon

Vigtigt!

Hvis din copilot er knyttet til Omnikanal til Customer Service, defineres dens navn af egenskaben Vist navn i Azure-portaltilmeldingen.

Du kan ændre copilotens navn og ikon. Dette påvirker ikonet i alle de kanaler, hvor du publicerer din copilot.

Vælg Detaljer under Indstillinger i navigationsmenuen.
Rediger copilotens navn og ikon. Gennemse anbefalingerne vedrørende ikonformater i Microsoft Teams.
Vælg Gem for at anvende dine ændringer.

Vigtigt!

Når du har opdateret dit copilotikon, kan det tage op til 24 timer, før det nye ikon vises alle steder.

Hente tokenslutpunkt

Hvis du vil tilpasse lærredet, uanset om det er standardlærredet eller et brugerdefineret lærred, som du opretter forbindelse til, skal du hente dine copilotoplysninger.

Vælg Kanaler under Indstillinger i navigationsmenuen.
Vælg Mobilapp.
Vælg Kopiér ud for Slutpunkt for token.

Tilpas standardlærredet (simpelt)

Konfigurere, hvordan chatlærredet skal se ud med nogle simple CSS- og JavaScript-formateringsindstillinger.

Du skal først konfigurere, hvor du vil installere copilotlærredet.

Opret og publicer en copilot.

Kopier og Indsæt HTML-koden nedenfor, og gem den som indeks.html.
Du kan også kopiere og indsætte koden herunder i w3schools.com HTML prøveeditoren. Du skal stadig tilføje dit tokenslutpunkt.

 <!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>

I filen index.html, som du har oprettet, skal du angive dit tokenslutpunkt på linjen const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>";.
Åbn indeks.html ved hjælp af en moderne browser (f.eks. Microsoft Edge) for at åbne copiloten i det brugerdefinerede lærred.
Test copiloten for at sikre dig, at du modtager svar fra din den, og at den fungerer korrekt.

Hvis du støder på problemer, skal du sørge for at have udgivet din copilot, og at dit token-slutpunkt er indsat på det korrekte sted. Værdien skal være angivet efter lighedstegnet (=) på linjen const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>" og omgivet af dobbelte anførselstegn (").

Tilpas ikonet, baggrundsfarven og navnet for copiloten

Når du har anskaffet dig det brugerdefinerede lærred, der arbejder sammen med din copilot, kan du foretage ændringer i det.

Du kan bruge indstillingerne for JavaScript styleOptions til at konfigurere en række foruddefinerede typografier.

Se Tilpasning af webchat for links til defaultStyleOptions.js-filen og flere oplysninger om, hvad du kan tilpasse, og hvordan det ser ud.

Skift copilotikon

Opdater filen indeks.html med følgende eksempelkode:

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

Erstat copilotens og brugerens avatar-billeder med dine virksomhedsbilleder.
Hvis du ikke har en URL-adresse til et billede, kan du i stedet bruge en Base64-kodet billedstreng.

Ændre baggrundsfarve

Opdater filen indeks.html med følgende eksempelkode:

const styleOptions = {
  backgroundColor: 'lightgray'
};

Skift backgroundColor til den farve, du ønsker. Du kan bruge standard CSS-farvenavne, RGB-værdier eller HEX.

Skift copilotnavnet

Opdater teksten <h1> i filen indeks.html med følgende:

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

Rediger teksten til det, du ønsker skal bruges til at kalde på copiloten. Du kan også indsætte et billede, men det kan være nødvendigt at redigere det for at sikre, at det passer ind i overskriftssektionen.

Tilpas og hoste dit chatlærred (avanceret)

Du kan oprette forbindelse mellem din Copilot Studio-copilot og et brugerdefineret lærred, der er hostet som en selvstændig webapp. Denne indstilling er at foretrække, hvis du har brug for at integrere en brugerdefineret iFrame over flere websider.

Bemærk

Hvis du er vært for et brugerdefineret lærred, kræver det softwareudvikling. Nærværende vejledning er udviklet til erfarne IT-medarbejdere, såsom IT-administratorer eller -udviklere, der har en god forståelse for udviklerværktøjer, værktøjer og IDE'er.

Vælg et eksempel, der skal tilpasses

Vi anbefaler, at du starter med et af disse eksempler, der er specialdesignet til at arbejde sammen med Copilot Studio:

Fuldt bundt er et brugerdefineret lærred, der kan vise alt avanceret indhold fra Copilot Studio. Eksempel:
Placering og filoverførsel er et brugerdefineret lærred, der kan få en brugers placering og sende det til en copilot ved hjælp af Copilot Studio. Eksempel:

Du kan også vælge mellem andre eksempler på webchatlærreder, der leveres af Bot Framework.

Tilpas lærredet ved hjælp af `styleSetOptions`

På samme måde som når standardlærredet tilpasses, kan du bruge styleSetOptions til at tilpasse det brugerdefinerede lærred. Alle de egenskaber, der kan tilpasses, er angivet i defaultStyleOptions.js. Du kan finde flere oplysninger om, hvad du kan tilpasse den, og hvordan det vil se ud, i tilpasning af webchat.

Installer dit brugerdefinerede lærred

Hvis du vil være vært for det brugerdefinerede lærred, skal du installere alle filer på en webapp.

Del via

Tilpasse din copilots udseende og funktionalitet

Ændre copilotens navn og ikon

Hente tokenslutpunkt

Tilpas standardlærredet (simpelt)

Tilpas ikonet, baggrundsfarven og navnet for copiloten

Skift copilotikon

Ændre baggrundsfarve

Skift copilotnavnet

Tilpas og hoste dit chatlærred (avanceret)

Vælg et eksempel, der skal tilpasses

Tilpas lærredet ved hjælp af `styleSetOptions`

Installer dit brugerdefinerede lærred

Rediger copilotens avatar-ikon og -navn

Rediger copilotens farve og beskrivelse

Feedback

Yderligere ressourcer

Del via

Tilpasse din copilots udseende og funktionalitet

Ændre copilotens navn og ikon

Hente tokenslutpunkt

Tilpas standardlærredet (simpelt)

Tilpas ikonet, baggrundsfarven og navnet for copiloten

Skift copilotikon

Ændre baggrundsfarve

Skift copilotnavnet

Tilpas og hoste dit chatlærred (avanceret)

Vælg et eksempel, der skal tilpasses

Tilpas lærredet ved hjælp af styleSetOptions

Installer dit brugerdefinerede lærred

Relateret indhold

Feedback

Yderligere ressourcer

Tilpas lærredet ved hjælp af `styleSetOptions`