Agentin ulkoasun ja käyttökokemuksen mukauttaminen

Artikkeli
03/04/2025

Agentin pohja määrittää sen ulkoasun ja käyttökokemuksen. Voit mukauttaa pohjaa kahdella tavalla haluttujen muutosten monimutkaisuuden mukaan:

Mukauta oletuspohjaa JavaScript-muotoilulla sen verkkosivuston HTML-koodissa, jossa otat agenttisi käyttöön.
Tästä on hyötyä, jos haluat tehdä pieniä mukautuksia ilman, että panostat koodien kehittämiseen.
Käytä mukautettua pohjaa, joka perustuu Bot Frameworkin verkkokeskustelupohjaan.
Tämä tapa edellyttää laajaa kehittäjien tietämystä. Se on hyödyllinen organisaatioille, jotka haluavat täysin mukautetun käyttökokemuksen.

Tärkeä

Voit asentaa ja käyttää tähän artikkeliin sisältyvää näytekoodia vain Copilot Studiossa. Näytekoodilla on käyttöoikeus sellaisenaan, ja se jätetään kaikkien palvelutasosopimusten ja tukipalvelujen ulkopuolelle. Käytöstä aiheutuvat riskit ovat omalla vastuullasi.

Microsoft ei anna mitään suoria takuita, vakuutuksia tai ehtoja ja kiistää kaikki epäsuorat takuut, mukaan lukien takuut soveltuvuudesta kaupankäynnin kohteeksi, tiettyyn käyttötarkoitukseen tai oikeuksien rikkomattomuudesta.

Verkkosovellus
Teams

Kun olet luonut ja julkaissut agentin, asiakkaat voivat käyttää agentin verkkokeskustelupohjaa ollakseen vuorovaikutuksessa sen kanssa.

Voit myös yhdistää mukautetun pohjan määrittämällä agenttisi aloittamaan keskustelun automaattisesti.

Lisäksi voit muuttaa agentin nimeä ja kuvaketta (kun agentti jaetaan Microsoft Teamsissa) suoraan portaalista.

Muuta agentin nimeä ja kuvaketta

Tärkeää

Jos agenttisi on yhdistettynä Customer Servicen monikanavaan, sen nimi määräytyy Azure-portaalin rekisteröinnin Näyttönimi-ominaisuuden mukaan.

Voit muuttaa agentin nimeä ja kuvaketta. Tämä vaikuttaa kuvakkeeseen kaikilla kanavilla, joilla julkaiset agenttisi.

Valitse siirtymisvalikon Asetukset-kohdasta Tiedot.
Muuta agentin nimeä ja kuvaketta. Tutustu Microsoft Teamsin kuvakemuotoja koskeviin suosituksiin.
Vahvista muutoksesi valitsemalla Tallenna.

Tärkeää

Kun olet päivittänyt agentin kuvakkeen, sen näkyminen kaikissa paikoissa voi kestää jopa vuorokauden.

Nouda tunnuksen päätepiste

Jos haluat mukauttaa pohjaa, oli kyseessä sitten oletuspohja tai mukautettu pohja, johon muodostat yhteyden, sinun on noudettava agenttisi tiedot.

Valitse siirtymisvalikon Asetukset-kohdasta Kanavat.
Valitse Mobiilisovellus.
Valitse Tunnuksen päätepiste -kohdan vierestä Kopioi.

Oletuspohjan mukauttaminen (yksinkertainen)

Määritä keskustelupohjan ulkoasu yksinkertaisten CSS- ja JavaScript-muotoiluasetusten avulla.

Aluksi sinun on määritettävä, missä otat agenttipohjasi käyttöön.

Agentin luominen ja julkaiseminen.

Kopioi ja liitä alla oleva HTML-koodi ja tallenna se muotoon index.html.
Voit myös kopioida ja liittää alla olevan koodin w3schools.com HTML try it -editoriin. Sinun on tästä huolimatta lisättävä tunnuksesi päätepiste.

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

Syötä tunnuksesi päätepiste luomasi index.html-tiedoston riville const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>";.
Avaa index.html käyttämällä modernia selainta (kuten Microsoft Edgeä) avataksesi agentin mukautetussa pohjassa.
Testaa agentti varmistaaksesi, että saat siltä vastauksia ja että se toimii oikein.

Jos ongelmia ilmenee, varmista, että olet julkaissut agenttisi ja että tunnuksen päätepiste on lisätty oikeaan paikkaan. Sen pitäisi tulla yhtäläisyysmerkin (=) jälkeen rivillä const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>", ja sen ympärillä pitäisi olla lainausmerkit (").

Agenttikuvakkeen, taustavärin ja nimen mukauttaminen

Kun saat mukautetun pohjan toimimaan agenttisi kanssa, voit tehdä siihen muutoksia.

Voit käyttää JavaScript styleOptions -asetuksia erilaisten esimääritettyjen tyylien määrittämiseen.

Katso Verkkokeskustelun mukauttaminen -kohdasta linkit defaultStyleOptions.js-tiedostoon ja lisätietoja siitä, mitä voit mukauttaa ja miltä se näyttää.

Asiakaspalvelijan kuvakkeen vaihtaminen

Päivitä index.html-tiedosto seuraavalla näytekoodilla:

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

Korvaa asiakaspalvelijan ja käyttäjän avatar-kuvat yrityksesi kuvilla.
Jos sinulla ei ole kuvan URL-osoitetta, voit käyttää sen sijaan Base64-koodattua kuvamerkkijonoa.

Taustavärin muuttaminen

Päivitä index.html-tiedosto seuraavalla näytekoodilla:

const styleOptions = {
  backgroundColor: 'lightgray'
};

Vaihda backgroundColor haluamaasi väriin. Voit käyttää CSS:n vakiomuotoisia värinimiä, RGB-arvoja tai HEXiä.

Agentin nimen muuttaminen

Päivitä index.html-tiedoston <h1>-teksti seuraavasti:

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

Muuta teksti haluamaksesi nimeksi agentille. Voit myös lisätä kuvan, vaikka se saattaa vaatia muotoilua, jotta se mahtuu otsikko-osaan.

Keskustelupohjan mukauttaminen ja isännöiminen (lisäasetukset)

Voit yhdistää Copilot Studio -agenttisi mukautettuun pohjaan, jota isännöidään erillisenä verkkosovelluksena. Tämä vaihtoehto on paras, jos sinun on upotettava mukautettu iFrame useille verkkosivuille.

Huomautus

Mukautetun pohjan isännöinti edellyttää ohjelmistokehitystä. Ohjeet on tarkoitettu kokeneille IT-ammattilaisille, kuten IT-järjestelmänvalvojille tai sovelluskehittäjille, joilla on hyvä käsitys kehittäjien työkaluista, apuohjelmista ja IDE:istä.

Mukautettavan näytteen valinta

Suosittelemme, että aloitat yhdellä seuraavista näytteistä, jotka on suunniteltu toimimaan yhdessä Copilot Studioin kanssa:

Full bundle on mukautettu pohja, joka pystyy näyttämään kaiken rikkaan sisällön Copilot Studioista. Esimerkki:
Location and file uploading on mukautettu pohja, joka pystyy noutamaan käyttäjän sijainnin ja lähettämään sen Copilot Studio -agentille. Esimerkki:

Voit valita myös muun Bot Frameworkin tarjoaman näyteverkkokeskustelupohjan.

Pohjan mukauttaminen `styleSetOptions`-asetuksilla

Kuten oletuspohjan mukauttamisessa, voit käyttää styleSetOptions-asetuksia mukautetun pohjan mukauttamiseen. Kaikki mukautettavat ominaisuudet on lueteltu defaultStyleOptions.js-tiedostossa. Katso Verkkokeskustelun mukauttaminen -kohdasta lisätietoja siitä, mitä voit mukauttaa ja miltä se näyttää.

Mukautetun pohjan käyttöönotto

Jos haluat isännöidä mukautettua pohjaa, ota kaikki tiedostot käyttöön verkkosovelluksessa.

Jaa

Agentin ulkoasun ja käyttökokemuksen mukauttaminen

Muuta agentin nimeä ja kuvaketta

Nouda tunnuksen päätepiste

Oletuspohjan mukauttaminen (yksinkertainen)

Agenttikuvakkeen, taustavärin ja nimen mukauttaminen

Asiakaspalvelijan kuvakkeen vaihtaminen

Taustavärin muuttaminen

Agentin nimen muuttaminen

Keskustelupohjan mukauttaminen ja isännöiminen (lisäasetukset)

Mukautettavan näytteen valinta

Pohjan mukauttaminen `styleSetOptions`-asetuksilla

Mukautetun pohjan käyttöönotto

Agentin avatarkuvakkeen ja nimen muuttaminen

Agentin värin ja kuvauksen muuttaminen

Palaute

Lisäresursseja

Jaa

Agentin ulkoasun ja käyttökokemuksen mukauttaminen

Muuta agentin nimeä ja kuvaketta

Nouda tunnuksen päätepiste

Oletuspohjan mukauttaminen (yksinkertainen)

Agenttikuvakkeen, taustavärin ja nimen mukauttaminen

Asiakaspalvelijan kuvakkeen vaihtaminen

Taustavärin muuttaminen

Agentin nimen muuttaminen

Keskustelupohjan mukauttaminen ja isännöiminen (lisäasetukset)

Mukautettavan näytteen valinta

Pohjan mukauttaminen styleSetOptions-asetuksilla

Mukautetun pohjan käyttöönotto

Liittyvä sisältö

Palaute

Lisäresursseja

Pohjan mukauttaminen `styleSetOptions`-asetuksilla