Настройка внешнего вида холста по умолчанию бота

После создания и публикации бота ваши клиенты могут использовать холст веб-чата бота для взаимодействия с ним.

Внешний вид бота по умолчанию определяется его холстом. Вы можете настроить холст двумя способами, в зависимости от сложности настроек:

  1. Вы можете настроить холст по умолчанию с помощью стилей на основе JavaScript в коде HTML для веб-сайта, на котором вы развертываете свой бот.
    Настройка холста по умолчанию полезна, если вы хотите сделать небольшие настройки, не вкладывая средства в разработку кода.

  2. Вы можете использовать пользовательский холст, на основе хоста веб-чата Bot Framework.
    Подключение к пользовательскому холсту требует обширных знаний разработчика и полезно для организаций, которые хотят полностью настроить взаимодействие.

Вы также можете комбинировать настроенный холст с настройкой вашего бота для автоматического начала разговора.

Наконец, вы можете изменить имя и значок бота (когда бот общий в Microsoft Teams) прямо на портале.

Предварительные условия

Важно!

Вы можете установить и использовать пример кода, включенный в эту документацию, только для использования с продуктами Microsoft Power Virtual Agents. Образец кода лицензируется "как есть" и исключается из любых соглашений об уровне обслуживания или служб поддержки. Вы берете на себя все риски, связанные с использованием сведений, приводящихся в данном документе.

Корпорация Майкрософт не предоставляет никаких явных гарантий или условий и отказывается от всех подразумеваемых гарантий, в том числе пригодности для использования, пригодности для конкретной цели и ненарушения прав.

Изменение имени бота и значка

Можно изменить имя бота и значок. Это повлияет на значок во всех каналах, где вы публикуете своего бота.

  1. Выберите Управление на боковой панели, затем перейдите на вкладку Сведения

  2. Изменение имени бота и значка. Ознакомьтесь с рекомендациями по форматам значков Microsoft Teams

  3. Нажмите Сохранить, чтобы подтвердить изменения.

    На панели сведений о боте можно вам изменить имя и значок.

Важно!

После обновления значка вашего бота может пройти до 24 часов, прежде чем новый значок вашего бота появится везде.

Извлечение сведений об идентификаторе бота и идентификаторе клиента

Чтобы настроить свой холст, будь то холст по умолчанию или пользовательский холст, к которому вы подключаетесь, вам нужно получить данные своего бота.

Вы можете получить идентификатор бота и идентификатор клиента, зайдя в мобильное приложение в каналах.

Настройка холста по умолчанию (простая)

Вы можете настроить внешний вид холста чата с помощью простых параметров стилей CSS и JavaScript.

Во-первых, вам нужно настроить, где вы развертываете свой холст бота.

  1. Создайте и опубликуйте бот.

  2. Скопируйте и вставьте приведенный ниже HTML-код и сохраните его как index.html.
    Вы также можете скопировать и вставить приведенный ниже код в пробный редактор HTML w3schools.com. Вам все равно нужно будет добавить свой идентификатор бота.

    <!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. В файле index.html, который вы создали, введите свой идентификатор бота в строке var BOT_ID = "<ENTER YOUR BOT ID>".

  4. Откройте файл index.html, используя современный браузер (например, Microsoft Edge), чтобы открыть бот в пользовательском холсте.

  5. Протестируйте бот, чтобы убедиться, что вы получаете ответы от своего бота и что он работает правильно.
    Если у вас возникли проблемы, убедитесь, что вы опубликовали свой бот и что ваш идентификатор бота был вставлен в правильное место. Он должен быть после знака равенства (=) в строке var BOT_ID и в двойных кавычках (").

Настройка значка бота, цвета фона и имени

После настройки холста для работы с вашим ботом вы можете внести в него изменения.

Вы можете использовать параметры styleOptions JavaScript для настройки ряда предопределенных стилей.

Откройте Настройка веб-чата для получения ссылок на файл defaultStyleOptions.js и дополнительную информацию о том, что вы можете настроить и как это будет выглядеть.

Сменить иконку бота

  1. Обновите файл index.html со следующим примером кода:

    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. Замените изображения бота и аватара пользователя изображениями вашей компании.
    Если у вас нет URL-адреса изображения, вы можете использовать вместо него строку изображения в кодировке Base64.

Изменение цвета фона

  1. Обновите файл index.html со следующим примером кода:

    const styleOptions = {
    
                backgroundColor: 'lightgray'
    
            };  
    
  2. Измените backgroundColor на любой цвет, который вы хотите. Вы можете использовать стандартные названия цветов CSS, значения RGB или HEX.

Сменить название бота

  1. Обновите текст <h1> в файле index.html на следующий:

    <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. Измените текст на любое нужное вам название бота. Вы также можете вставить изображение, хотя вам может понадобиться стилизовать его, чтобы оно помещалось в раздел заголовка.

Настройка и размещение холста чата (дополнительно)

Вы можете подключить свой бот Power Virtual Agents к пользовательскому холсту, который размещается как отдельное веб-приложение. Этот вариант лучше всего подходит, если вам нужно встроить настроенный iFrame на нескольких веб-страницах.

Примечание

Размещение пользовательского холста требует разработки программного обеспечения. Наша рекомендация здесь заключается в том, что это предназначено для опытных ИТ-специалистов, таких как ИТ-администраторы или разработчики, которые хорошо разбираются в инструментах разработчика, утилитах и интегрированных средах разработки (IDE).

Выберите образец для настройки

Мы рекомендуем начать с одного из этих образцов, специально созданных для работы с Power Virtual Agents:

  • Полный пакет — это пользовательский холст, способный отображать весь богатый контент из Power Virtual Agents. Например:

    Пользовательский холст «Полный пакет».

  • Расположение и отправка файла — это пользовательский холст, способный получить местоположение пользователя и отправить его боту с помощью Power Virtual Agents. Например:

    Пользовательский холст «Расположение и отправка файла».

Или вы можете выбрать из других образцов холстов веб-чатов, предоставленных Bot Framework.

Настройка холста с помощью stylesetOptions

Как и при настройке холста по умолчанию, вы можете использовать styleSetOptions, чтобы настроить пользовательский холст. Все настраиваемые свойства перечислены в defaultStyleOptions.js. Для получения дополнительной информации о том, что вы можете настроить и как это будет выглядеть, смотрите раздел Настройка веб-чата.

Развертывание настроенного холста

Чтобы разместить свой пользовательский холст, разверните все файлы в веб-приложении.

См. также