Aracılığıyla paylaş

Bir aracının görünümünü özelleştirme

  • Makale

Aracınızın tuvali, görünümünü ve hissini belirler. Tuvali istenen değişikliklerin karmaşıklığına bağlı olarak iki şekilde özelleştirebilirsiniz:

  • Aracınızın dağıttığınız web sitesinin HTML kodunda JavaScript stilini kullanarak 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 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.

Bir aracı oluşturup yayımladıktan sonra müşterileriniz aracının Web Sohbeti tuvalini botla etkileşim kurmak için kullanabilir.

Özelleştirilmiş tuvali konuşmayı otomatik olarak başlatmak için aracınızı yapılandırmayla da birleştirebilirsiniz.

Son olarak adı ve aracı simgesini (aracı Microsoft Teams'de paylaşıldığında) doğrudan portaldan değiştirebilirsiniz.

Aracı adını ve simgesini değiştirin

Önemli

Aracınız Customer Service için Çok Yönlü Kanal'a bağlıysa, adı Azure portal kaydındaki Görünen ad özelliği tarafından tanımlanır.

Aracı adını ve simgesini değiştirebilirsiniz. Bu, aracıyı yayımladığınız tüm kanallardaki simgeyi etkiler.

  1. Gezinti menüsünde, Ayarlar altında Ayrıntılar'ı seçin.

  2. Aracı adını ve simgesini değiştirin. Microsoft Teams simge biçimlerindeki önerileri inceleme.

  3. Yaptığınız değişiklikleri kaydetmek için Kaydet'i seçin.

    Aracı ayrıntıları bölmesi, adı ve simgeyi değiştirmenize olanak sağlar.

Önemli

Aracı 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 aracı ayrıntılarınızı almanız gerekir.

  1. Gezinti menüsünde, Ayarlar altında Kanallar'ı seçin.

  2. Mobil uygulama'yı seçin.

    Mobil uygulama kanal kutucuğunun ekran görüntüsü.

  3. Belirteç Uç Noktası'nın yanında Kopyala'yı seçin.

    Belirteç uç noktası kimliğinin ekran görüntüsü.

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, aracı tuvalinizi dağıtacağınız yeri yapılandırmanız gerekir.

  1. Aracı oluşturun ve yayımlayın.

  2. 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 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. Oluşturduğunuz index.html dosyasında, belirteç uç noktanızı const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>"; satırına girin.

  4. Aracıyı özel tuvalde açmak için modern bir tarayıcı (örneğin, Microsoft Edge) kullanarak index.html dosyasını açın.

  5. Aracınızdan yanıt aldığınızdan ve aracının doğru çalıştığından emin olmak için aracıyı test edin.

    Sorunlarla karşılaşırsanız aracıyı yayımladığınızdan ve belirteç uç noktasının doğru yere eklendiğinden 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.

Aracı simgesini, arka plan rengini ve adı özelleştirme

Özelleştirilmiş tuvalin aracınızla çalışmasını sağladıktan sonra üzerinde değişiklik 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.

Aracı simgesini değiştirme

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

  2. Temsilci ve kullanıcı avatar resimlerini şirket resimlerinizle 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

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

    const styleOptions = {
  backgroundColor: 'lightgray'
};

  2. backgroundColor öğesini istediğiniz renge değiştirin. Standart CSS renk adları, RGB değerleri veya HEX kullanabilirsiniz.

Aracı adını değiştirme

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

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

  2. Metni, aracıyı adlandırmak istediğiniz herhangi bir adla değiştirin. 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 aracınızı, bağımsız 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:

    Tam paket satış özel tuvali.

  • Konum ve dosya yükleme kullanıcının konumunu alabilen ve Copilot Studio aracısına gönderebilen özel bir tuvaldir. Örneğin:

    Konum ve dosya yükleme özel tuvali.

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.

İlgili içerik