Avustajan ulkoasun määrittäminen

Artikkeli
05/29/2024

Tärkeää

Power Virtual Agents -ominaisuudet ja -toiminnot ovat nyt Microsoft Copilot Studion osa generatiiviseen tekoälyyn tehtyjen panostusten ja parannettujen Microsoft Copilot -integrointien jälkeen.

Joissakin artikkeleissa ja näyttökuvissa voidaan viitata Power Virtual Agentsiin, kun ohjeita ja koulutussisältöä päivitetään.

Avustajan ulkoasun määrittää sen pohja. Voit mukauttaa avustajaa mukauttamalla sen pohjaa. Voit mukauttaa pohjaa kahdella tavalla mukautusten monimutkaisuuden mukaan:

Voit mukauttaa oletuspohjaa JavaScriptin muotoilulla sen verkkosivuston HTML-koodissa, jossa otat avustajan 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 Microsoft 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 avustajan, asiakkaat voivat käyttää avustajan verkkokeskustelupohjaa ollakseen vuorovaikutuksessa sen kanssa.

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

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

Avustajan nimen ja kuvakkeen muuttaminen

Tärkeää

Jos avustaja on yhdistetty Customer Servicen monikanavaan, sen nimi määritetään Azure-portaalin rekisteröinnin Näyttönimi-ominaisuudessa.

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

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

Tärkeää

Kun olet päivittänyt avustajan 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 avustajan 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 avustajan pohjan käyttöön.

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

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 avustajan mukautetussa pohjassa.
Testaa avustaja varmistaaksesi, että saat siltä vastauksia ja että se toimii oikein.

Jos ongelmia ilmenee, varmista, että olet julkaissut avustajan 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 (").

Avustajan kuvakkeen, taustavärin ja nimen mukauttaminen

Kun saat mukautetun pohjan toimimaan avustajan 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ää.

Avustajan kuvakkeen muuttaminen

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 avustajan ja käyttäjän avatarin kuvat yrityksen 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ä.

Avustajan nimen muuttaminen

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

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

Muuta tekstiin nimi, jolla haluat kutsua avustajaa. 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 Studion avustajan 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 Studion avustajalle. 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

Avustajan ulkoasun määrittäminen

Avustajan nimen ja kuvakkeen muuttaminen

Nouda tunnuksen päätepiste

Oletuspohjan mukauttaminen (yksinkertainen)

Avustajan kuvakkeen, taustavärin ja nimen mukauttaminen

Avustajan kuvakkeen muuttaminen

Taustavärin muuttaminen

Avustajan nimen muuttaminen

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

Mukautettavan näytteen valinta

Pohjan mukauttaminen `styleSetOptions`-asetuksilla

Mukautetun pohjan käyttöönotto

Avustajan avatarkuvakkeen ja nimen muuttaminen

Avustajan värin ja kuvauksen muuttaminen

Palaute

Palaute

Lisäresursseja

Jaa

Avustajan ulkoasun määrittäminen

Avustajan nimen ja kuvakkeen muuttaminen

Nouda tunnuksen päätepiste

Oletuspohjan mukauttaminen (yksinkertainen)

Avustajan kuvakkeen, taustavärin ja nimen mukauttaminen

Avustajan kuvakkeen muuttaminen

Taustavärin muuttaminen

Avustajan nimen muuttaminen

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

Mukautettavan näytteen valinta

Pohjan mukauttaminen styleSetOptions-asetuksilla

Mukautetun pohjan käyttöönotto

Asiaan liittyviä aiheita

Palaute

Palaute

Lisäresursseja

Pohjan mukauttaminen `styleSetOptions`-asetuksilla