Botun varsayılan tuvalinin görünümünü ve tarzını özelleştirme

  • Okumak için 4 dakika

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

Botun varsayılan görünüm ve kullanımı botun tuvali tarafından tanımlanır. Tuvali özelleştirmelerin karmaşıklığına bağlı olarak iki şekilde özelleştirebilirsiniz:

  1. Botunuzu dağıttığınız web sitesinin HTML kodunda JavaScript tabanlı stille varsayılan tuvali özelleştirebilirsiniz.
    Kod geliştirmeye yatırım yapmadan küçük özelleştirmeler yapmak isterseniz varsayılan tuvali özelleştirmek yararlıdır.

  2. Bot Framework Web sohbeti tuvaline dayanan özel bir tuval kullanabilirsiniz.
    Özel bir tuvale bağlanmak için kapsamlı geliştirici bilgisi gerekir ve deneyimi tamamen özelleştirmek isteyen kuruluşlar için yararlıdır.

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

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

Ön koşullar

Önemli

Yalnızca Microsoft Power Virtual Agents ürünüyle kullanım için bu belgelerde yer alan örnek kodları 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.

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

Bot adını ve simgesini değiştirebilirsiniz.

Not

Bot avatarı simgesinin değiştirilmesi, yalnızca botun Microsoft Teams'e eklendiği durumlarda geçerlidir.

Botun adını ve simgesini değiştirmek için:

  1. Yan gezinti bölmesinde Yönet'i seçin ve ardından Ayrıntılar sekmesine gidin.

  2. Bot 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.

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

Bot kimliğini ve kiracı kimliği ayrıntılarını alma

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

Bot Kimliğini ve Kiracı Kimliğini Kanallar altındaki Mobil uygulama öğesine giderek öğrenebilirsiniz.

Varsayılan tuvali özelleştirme (basit)

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

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

  1. Bot 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 Bot Kimliğinizi eklemeniz gerekir.

    <!DOCTYPE html>
<html>
<head>
    <title>Contoso Sample Web Chat</title> 
    <!-- This styling is for the Web Chat demonstration purposes. It is recommended that style is moved to separate file for organization in larger projects -->
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        h1 {
            font-size: 16px;
            font-family: Segoe UI;
            line-height: 20px;
            color: whitesmoke;
            display: table-cell;
            padding: 13px 0px 0px 20px;
        }

        #heading {
            background-color: black;
            height: 50px;
        }

        .main {
            margin: 18px;
            border-radius: 4px;
        }

        div[role="form"]{
            background-color: black;
        }

        #webchat {
            position: fixed;
            height: calc(100% - 50px);
            width: 100%;
            top: 50px;
            overflow: hidden;
        }

    </style>

</head>
<body>
    <div>
        <div id="heading">
            <!-- Change the h1 text to change the bot name -->    
            <h1>Contoso Bot Name</h1>
        </div>
        <div id="webchat" role="main"></div>
    </div>    

  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

  <script>
        const styleOptions = {

           // Add styleOptions to customize Web Chat canvas
           hideUploadButton: true
        };

        // Add your BOT ID below 
        var BOT_ID = "<ENTER YOUR BOT ID>"; 
        var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

      fetch(theURL)
            .then(response => response.json())
            .then(conversationInfo => {
                window.WebChat.renderWebChat(
                    {
                        directLine: window.WebChat.createDirectLine({
                            token: conversationInfo.token,
                        }),
                        styleOptions
                    },
                    document.getElementById('webchat')
                );
            })
            .catch(err => console.error("An error occurred: " + err));

    </script>
  </body>
</html>

  3. Oluşturduğunuz index.html dosyasında, Bot Kimliğinizi var BOT_ID = "<ENTER YOUR BOT ID>" satırına girin.

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

  5. Botunuzdan yanıt aldığınızdan ve botun doğru çalıştığından emin olmak için botu test edin.
    Sorunlarla karşılaşırsanız botu yayımladığınızdan ve Bot Kimliğinizin doğru yere eklendiğinden emin olun. var BOT_ID satırındaki eşittir işaretinden (=) sonra olmalı ve iki tarafında çift tırnak (") bulunmalıdır._

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

Özelleştirilmiş tuvalin botunuzla ç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ı GitHub depomuzda kullanılabilir ve değiştirebileceğiniz tüm ayarların tam listesini içerir. Neyi özelleştirebileceğiniz ve nasıl görüneceği hakkında daha fazla bilgi için bkz. Web Sohbeti özelleştirmesi.

Bot simgesini değiştirmek için

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

    
const styleOptions = {
            botAvatarInitials: 'BT',
            accent: '#00809d',
            botAvatarBackgroundColor: "#FFFFFF",
            botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg',
            userAvatarImage: 'https://avatars.githubusercontent.com/u/661465'
        };

  2. Botu 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ştirmek için

  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.

Bot adını değiştirmek için

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

    <body>
    <div id="heading">
         <!-- Change the h1 text to change the bot name -->
         <h1><img src="contosobot-teams.png"> Contoso Bot Name</h1>
    </div>

  2. Metni, botu 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ş)

Power Virtual Agents botunuzu, 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

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

  • Tam paket satış, Power Virtual Agents'ı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 Power Virtual Agents'ı kullanarak bir bota 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 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.

Ayrıca bkz.