Del via

Tilpas udseendet og funktionaliteten af en agent

  • Artikel

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

  • Tilpasse standardlærredet med JavaScript-baseret design i HTML-koden for det website, hvor du installerer din agent.
    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 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.

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

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

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

Rediger agentnavn og ikon

Vigtige oplysninger

Hvis din agent har forbindelse til Omnikanal til Customer Service, defineres navnet af egenskaben Vist navn i Azure portalregistreringen.

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

  1. Vælg Detaljer under Indstillinger i navigationsmenuen.

  2. Rediger agentens navn og ikon. Gennemse anbefalingerne vedrørende ikonformater i Microsoft Teams.

  3. Vælg Gem for at anvende dine ændringer.

    I agentens detaljeruden kan du ændre navnet og ikonet.

Vigtige oplysninger

Når du har opdateret dit agentikon, 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 agentoplysninger.

  1. Vælg Kanaler under Indstillinger i navigationsmenuen.

  2. Vælg Mobilapp.

    Skærmbillede af mobilappens kanalfelt.

  3. Vælg Kopiér ud for Slutpunkt for token.

    Skærmbillede af slutpunktets token-id.

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 agentlærredet.

  1. Oprette og publicere en agent.

  2. 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 agent 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('<AGENT TOKEN ENDPOINT>');

         // Specifies the language the agent 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. I filen index.html, som du har oprettet, skal du angive dit tokenslutpunkt på linjen const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>";.

  4. Åbn indeks.html ved hjælp af en moderne browser (f.eks. Microsoft Edge) for at åbne agenten i det brugerdefinerede lærred.

  5. Test agenten for at sikre dig, at du modtager svar fra den, og at den fungerer korrekt.

    Hvis du støder på problemer, skal du sørge for at have udgivet din agent, 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 agentikonet, baggrundsfarven og navnet

Når du har anskaffet dig det brugerdefinerede lærred, der arbejder sammen med din agent, 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.

Ændring af agentikonet

  1. 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'
};

  2. Udskift agent- og brugeravatarbillederne med dine virksomhedsbilleder.
    Hvis du ikke har en URL-adresse til et billede, kan du i stedet bruge en Base64-kodet billedstreng.

Ændre baggrundsfarve

  1. Opdater filen indeks.html med følgende eksempelkode:

    const styleOptions = {
  backgroundColor: 'lightgray'
};

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

Ændring af agentnavnet

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

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

  2. Rediger teksten til det, du ønsker skal bruges til at kalde på agenten. 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-agent 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:

    Brugerdefineret lærred som fuldt bundt.

  • Placering og filoverførsel er et brugerdefineret lærred, der kan få en brugers placering og sende det til en Copilot Studio-agent. Eksempel:

    Brugerdefineret lærred til placering og filoverførsel.

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.

Relateret indhold