Bir yardımcı pilotun görünümünü ve tarzını özelleştirme

Makale
04/09/2024

Önemli

Power Virtual Agents yetenekleri ve özellikleri, Microsoft Copilot genelinde üretken yapay zekaya ve gelişmiş tümleştirmelere yapılan önemli yatırımların ardından artık Microsoft Copilot Studio'nun parçasıdır.

Bazı makalelerde ve ekran görüntülerinde, belgeler ve eğitim içeriği güncelleştirilirken Power Virtual Agents'a başvurulabilir.

Yardımcı pilotunuzun görünümü ve hissi tuvali ile tanımlanır. Yardımcı pilotunuzu özelleştirmek için tuvalini özelleştirmeniz gerekir. Tuvali özelleştirmelerin karmaşıklığına bağlı olarak iki şekilde özelleştirebilirsiniz:

Yardımcı pilotunuzu dağıttığınız web sitesinin HTML kodunda JavaScript stiliyle varsayılan tuvali özelleştirin.
Bu yaklaşım, kod geliştirmeye yatırım yapmadan küçük özelleştirmeler yapmak isterseniz varsayılan tuvali özelleştirmek yararlıdır.
Bot Framework Web Sohbeti tuvaline dayanan özel bir tuval kullanın.
Bu yaklaşım kapsamlı geliştirici bilgisi gerektirir. Bu, tamamen özel bir deneyim isteyen kuruluşlar için yararlıdır.

Önemli

Yalnızca Microsoft Copilot Studio ile kullanım için bu makaledeki örnek kodu yükleyip kullanabilirsiniz. Örnek kod "olduğu gibi" lisanslanır ve tüm servis düzeyi sözleşmelerinden veya destek hizmetlerinden hariç tutulur. Kullanım riski size aittir.

Microsoft hiçbir açık garanti veya koşul sunmaz ve satılabilirlik, belirli bir amaca uygunluk ve hak ihlali bulunmaması dahil olmak üzere tüm zımni garantileri açık bir şekilde reddeder.

Web uygulaması
Teams

Bir yardımcı pilot oluşturup yardımcı pilotu yayımladıktan sonra, müşterileriniz etkileşim kurmak için yardımcı pilotun Web Sohbeti tuvalini kullanabilir.

Ayrıca, yardımcı pilotunuzu konuşmayı otomatik olarak başlatmak için yapılandırmayla özelleştirilmiş tuvali birleştirebilirsiniz.

Son olarak, doğrudan portaldan yardımcı pilotunuzun adını ve simgesini değiştirebilirsiniz (Microsoft Teams'de paylaşıldığında).

Yardımcı pilot adını ve simgesini değiştirme

Önemli

Yardımcı pilotunuz Customer Service için Çok Yönlü Kanal'la bağlantılıysa adı Azure portal kaydında Görünen ad özelliği ile tanımlanır.

Yardımcı pilotun adını ve simgesini değiştirebilirsiniz. Bu, yardımcı pilotunuzu yayımladığınız tüm kanallardaki simgeyi etkiler.

Gezinti menüsünde, Ayarlar altında Ayrıntılar'ı seçin.
Yardımcı pilot adını ve simgesini değiştirin. Microsoft Teams simge biçimi önerilerini inceleme
Yaptığınız değişiklikleri kaydetmek için Kaydet'i seçin.

Önemli

Yardımcı pilotunuzun simgesini güncelledikten sonra yeni simgenin her yerde görünmesi 24 saat kadar sürebilir.

Belirteç uç noktasını alma

Varsayılan tuval veya bağlandığınız özel bir tuval olsun tuvalinizi özelleştirmek için yardımcı pilot ayrıntılarınızı almanız gerekir.

Gezinti menüsünde, Ayarlar altında Kanallar'ı seçin.
Mobil uygulama'yı seçin.
Belirteç Uç Noktası'nın yanında Kopyala'yı seçin.

Varsayılan tuvali özelleştirme (basit)

Sohbet tuvalinin görünümünü bazı basit CSS ve JavaScript stili seçenekleriyle yapılandırın.

İlk olarak, yardımcı pilot tuvalinizi dağıtacağınız yeri yapılandırmanız gerekir.

Bir yardımcı pilot oluşturma ve yayımlama.

Aşağıdaki HTML kodunu kopyalayıp yapıştırın ve index.html olarak kaydedin.
Aşağıdaki kodu kopyalayıp w3schools.com HTML deneme düzenleyicisine de yapıştırabilirsiniz. Yine de belirteç uç noktanızı eklemeniz gerekir.

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

Oluşturduğunuz index.html dosyasında, belirteç uç noktanızı const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>"; satırına girin.
Özel tuvalde yardımcı pilotu açmak için yeni bir tarayıcı (örneğin Microsoft Edge) kullanarak index.html açın.
Yardımcı pilotunuzdan yanıt aldığınızdan ve onun doğru çalıştığından emin olmak için yardımcı pilotu test edin.

Problemlerle karşılaşırsanız yardımcı pilotunuzu yayımladığınızdan ve belirtecinizin uç noktasının doğru yere yerleştirilmiş olduğundan emin olun. const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>" satırındaki eşittir işaretinden (=) sonra olmalı ve iki tarafında çift tırnak (") bulunmalıdır.

Yardımcı pilot simgesini, arka plan rengini ve adı özelleştirme

Yardımcı pilotunuzla çalışırken özelleştirilmiş tuvali aldıktan sonra, tuvalde değişiklikler yapabilirsiniz.

Önceden tanımlanmış bir dizi stili yapılandırmak için JavaScript styleOptions seçeneklerini kullanabilirsiniz.

defaultStyleOptions.js dosyası bağlantıları, neleri özelleştirebileceğiniz ve nasıl görüneceği hakkında daha fazla bilgi için Web Sohbeti özelleştirmesi bölümüne bakın.

Yardımcı pilot simgesini değiştirme

index.html dosyasını aşağıdaki örnek kodla güncelleştirin:

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

Yardımcı pilot ve kullanıcı avatar görüntülerini şirket görüntülerinizle değiştirin.
Görüntü URL'niz yoksa bunun yerine Base64 kodlu bir görüntü dizesi kullanabilirsiniz.

Arka plan rengini değiştirme

index.html dosyasını aşağıdaki örnek kodla güncelleştirin:
```
const styleOptions = {
  backgroundColor: 'lightgray'
};  
```
backgroundColor öğesini istediğiniz renge değiştirin. Standart CSS renk adları, RGB değerleri veya HEX kullanabilirsiniz.

Yardımcı pilot adını değiştirme

index.html dosyasındaki <h1> metnini şununla güncelleştirin:

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

Metni yardımcı pilotu nasıl adlandırmak istiyorsan öyle değiştir. Bir görüntü de ekleyebilirsiniz ancak başlık bölümüne sığacak şekilde biçimlendirmeniz gerekir.

Sohbet tuvalinizi özelleştirme ve barındırma (gelişmiş)

Copilot Studio yardımcı pilotunuzu tek başına bir web uygulaması olarak barındırılan özel bir tuvalle bağlayabilirsiniz. Bu seçenek, özelleştirilmiş bir iFrame'i birçok Web sayfası üzerinde katıştırmak istediğinizde en uygun seçenektir.

Not

Özel bir tuvali barındırmak için yazılım geliştirme gerekmez. Buradaki kılavuzumuz, geliştirici araçları, yardımcı programlar ve IDE'ler ile ilgili iyi bir anlayışa sahip BT yöneticileri veya geliştiriciler gibi deneyimli BT uzmanlarına yöneliktir.

Özelleştirilecek örneği seçme

Copilot Studio ile çalışmak için özel olarak oluşturulmuş bu örneklerden biriyle başlamanızı öneririz:

Tam paket satış, Copilot Studio'ın tüm zengin içeriğini gösterebilen özel bir tuvaldir. Örneğin:
Konum ve dosya yükleme, kullanıcının konumunu alabilen ve konumu bir Copilot Studio yardımcı pilotuna gönderebilen özel bir tuvaldir. Örneğin:

Veya Bot Framework tarafından sağlanan diğer örnek Web Sohbeti tuvalleri arasından seçim yapabilirsiniz.

`styleSetOptions` kullanarak tuvali özelleştirme

Varsayılan tuvali özelleştirirken olduğu gibi özel tuvali özelleştirmek için styleSetOptions'ı kullanabilirsiniz. Tüm özelleştirilebilir özellikler defaultStyleOptions.js dosyasında listelenir. Neyi özelleştirebileceğiniz ve nasıl görüneceği hakkında Daha fazla bilgi edinmek için bkz. Web Sohbeti özelleştirmesi.

Özelleştirilmiş tuvalinizi dağıtma

Özel tuvalinizi barındırmak için tüm dosyaları bir web uygulamasına dağıtın.

Bir yardımcı pilotun görünümünü ve tarzını özelleştirme

Yardımcı pilot adını ve simgesini değiştirme

Belirteç uç noktasını alma

Varsayılan tuvali özelleştirme (basit)

Yardımcı pilot simgesini, arka plan rengini ve adı özelleştirme

Yardımcı pilot simgesini değiştirme

Arka plan rengini değiştirme

Yardımcı pilot adını değiştirme

Sohbet tuvalinizi özelleştirme ve barındırma (gelişmiş)

Özelleştirilecek örneği seçme

`styleSetOptions` kullanarak tuvali özelleştirme

Özelleştirilmiş tuvalinizi dağıtma

Bot avatarı simgesini ve adını değiştirme

Bot rengini ve açıklamasını değiştirme

Geri Bildirim

Geri Bildirim

Ek kaynaklar

Bir yardımcı pilotun görünümünü ve tarzını özelleştirme

Yardımcı pilot adını ve simgesini değiştirme

Belirteç uç noktasını alma

Varsayılan tuvali özelleştirme (basit)

Yardımcı pilot simgesini, arka plan rengini ve adı özelleştirme

Yardımcı pilot simgesini değiştirme

Arka plan rengini değiştirme

Yardımcı pilot adını değiştirme

Sohbet tuvalinizi özelleştirme ve barındırma (gelişmiş)

Özelleştirilecek örneği seçme

styleSetOptions kullanarak tuvali özelleştirme

Özelleştirilmiş tuvalinizi dağıtma

İlgili konular

Geri Bildirim

Geri Bildirim

Ek kaynaklar

`styleSetOptions` kullanarak tuvali özelleştirme