Бөлісу құралы:


Автоматический запуск разговора с помощником

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

Важно

Если помощник начинает разговор, это отображается в вашей аналитике и увеличит количество ваших сеансов.

Если пользователь вашего помощника не взаимодействует с ним (например, он загружает страницу, но ничего не спрашивает у помощника), сеанс помечается как сеанс без взаимодействия. Это может повлиять на вашу аналитику.

По умолчанию помощники, созданные с помощью Microsoft Copilot Studio и опубликованные на веб-сайте, загружаются без приветствия и пассивно ожидают, пока пользователь не начнет разговор.

Тем не менее, вы можете использовать пользовательские CSS и код JavaScript, чтобы помощник автоматически начинал разговор при загрузке помощника. Например, ваш помощник может сказать "Привет, я Ботти, виртуальный агент", как только помощник загрузится.

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

Внимание

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

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

Извлечение конечной точки токена

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

  1. В меню навигации в разделе Параметры выберите Каналы.

  2. Выберите Мобильное приложение.

    Снимок экрана: плитка канала мобильного приложения.

  3. Рядом с пунктом Конечная точка токена выберите Копировать.

    Снимок экрана: идентификатор токена конечной точки.

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

Вы можете настроить внешний вид холста чата с помощью простых параметров стилей 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 a 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 token endpoint below
            var theURL = "<BOT TOKEN ENDPOINT>";
    
            var environmentEndPoint = theURL.slice(0,theURL.indexOf('/powervirtualagents'));
            var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
            var regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`; 
    
            var directline;
                fetch(regionalChannelSettingsURL)
                    .then((response) => {
                        return response.json();
                        })
                    .then((data) => {
                        directline = data.channelUrlsById.directline;
                        })
                    .catch(err => console.error("An error occurred: " + err));
    
          fetch(theURL)
                .then(response => response.json())
                .then(conversationInfo => {
                    window.WebChat.renderWebChat(
                        {
                            directLine: window.WebChat.createDirectLine({
                                domain: `${directline}v3/directline`,
                                token: conversationInfo.token,
                            }),
                            styleOptions
                        },
                        document.getElementById('webchat')
                    );
                })
                .catch(err => console.error("An error occurred: " + err));
    
        </script>
      </body>
    </html>
    
  3. В файле index.html, который вы создали, введите свою конечную точку токена в строке var theURL = "<YOUR TOKEN ENDPOINT>";.

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

  5. Протестируйте помощник, чтобы убедиться, что вы получаете ответы от своего помощника и что помощник работает правильно.

    Если у вас возникли проблемы, убедитесь, что вы опубликовали своего помощника и что ваша конечная точка токена вставлена в правильное место. Конечная точка токена должна быть после знака равенства (=) в строке var theURL = "<YOUR TOKEN ENDPOINT>" и в двойных кавычках (").

Изменение приветствия помощника по умолчанию

Код в файле index.html файл вызывает автоматический вызов темы при загрузке помощника. По умолчанию этот код вызывает системную тему приветствия. Вы также можете создать новую тему и перенаправить системную тему приветствия по умолчанию на эту новую тему.

В обоих случаях вы внесите изменения в тему, которую вы хотите вызвать, как обычно.

Если вы измените или создадите новую приветственную тему, вам следует включить в нее какое-то указание на то, что пользователь разговаривает с помощником (или «виртуальным агентом»). Такая индикация поможет пользователю понять, что он разговаривает не с человеком.

Мы рекомендуем вам изменить системную тему приветствия, чтобы вам не приходилось редактировать код файла index.html.

  1. В меню навигации выберите Темы, затем выберите строку темы Приветствие.

    Снимок экрана на странице quot;Темыquot; с выделенной темой quot;Приветствиеquot;.

  2. Измените текст внутри узлов Сообщение. Вы также можете добавить или удалить дополнительные узлы.

  3. Выберите Сохранить.

  4. Опубликуйте свой помощник.

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

Создание новой пользовательской темы

Предупреждение

Используя пользовательскую тему для начала разговора увеличит количество ваших оплачиваемых сеансов. Оплачиваемый сеанс представляет собой взаимодействие между клиентом и помощником и представляет собой одну единицу потребления. Оплачиваемый сеанс начинается, когда запускается тема пользователя. Для получения дополнительной информации см. Просмотр оплачиваемых сеансов (предварительная версия).

  1. В меню навигации выберите Темы.

  2. Выберите Новая тема и задайте ей имя.

  3. Добавьте текст внутрь узла Сообщение.

  4. Выберите Сохранить, когда завершите редактирование сообщения.

  5. В меню навигации выберите Темы, затем выберите строку темы Приветствие.

  6. Удалите узлы сообщения в теме Приветствие.

  7. Чтобы автоматически перенаправлять помощник на пользовательскую тему, выберите Добавить узел (+), чтобы добавить узел, затем Перейти к другой теме.

  8. Во всплывающем меню выберите пользовательскую тему, которую вы создали выше.

  9. Выберите Сохранить, когда завершите редактирование сообщения.

  10. Опубликуйте свой помощник.

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