Настройка внешнего вида агента
Холст вашего агента определяет его внешний вид. Вы можете настроить холст двумя способами, в зависимости от сложности необходимых изменений:
Настройте холст по умолчанию с помощью стилей JavaScript в коде HTML веб-сайта, на котором вы развертываете свой агент.
Этот подход полезен, если вы хотите сделать небольшие настройки, не вкладывая средства в разработку кода.Использование пользовательского холста, который основан на холсте веб-чата Bot Framework.
Этот подход требует обширных знаний разработчика. Это полезно для организаций, которым нужен полностью настраиваемый интерфейс.
Внимание
Вы можете установить и использовать пример кода, включенный в эту статью, только для использования с продуктами Copilot Studio. Образец кода лицензируется "как есть" и исключается из любых соглашений об уровне обслуживания или служб поддержки. Вы берете на себя все риски, связанные с использованием сведений, приводящихся в данном документе.
Корпорация Майкрософт не предоставляет никаких явных гарантий или условий и отказывается от всех подразумеваемых гарантий, в том числе пригодности для использования, пригодности для конкретной цели и ненарушения прав.
После создания и публикации агента ваши клиенты могут использовать холст веб-чата агента для взаимодействия с ним.
Вы также можете комбинировать настроенный холст с настройкой вашего агента для автоматического начала разговора.
Наконец, вы можете изменить имя и значок агента (когда он общий в Microsoft Teams) прямо на портале.
Изменение имени агента и значка
Внимание!
Если агент подключен к приложению Многоканальное взаимодействие для Customer Service, его имя определяется свойством Отображаемое имя в регистрации на портале Azure.
Можно изменить имя агента и значок. Это повлияет на значок во всех каналах, где вы публикуете свой агент.
В меню навигации в разделе Параметры выберите Сведения.
Изменение имени агента и значка. Ознакомьтесь с рекомендациями по форматам значков Microsoft Teams.
Нажмите Сохранить, чтобы подтвердить изменения.
Внимание!
После обновления значка вашего агента может пройти до 24 часов, прежде чем новый значок появится везде.
Извлечение конечной точки токена
Чтобы настроить свой холст, будь то холст по умолчанию или пользовательский холст, к которому вы подключаетесь, вам нужно получить данные свой агент.
В меню навигации в разделе Параметры выберите Каналы.
Выберите Мобильное приложение.
Рядом с пунктом Конечная точка токена выберите Копировать.
Настройка холста по умолчанию (простая)
Вы можете настроить внешний вид холста чата с помощью простых параметров стилей CSS и JavaScript.
Во-первых, вам нужно настроить, где вы развертываете свой холст агента.
Скопируйте и вставьте приведенный ниже HTML-код и сохраните его как index.html.
Вы также можете скопировать и вставить приведенный ниже код в пробный редактор HTML w3schools.com. Вам все равно нужно будет добавить конечную точку токена.<!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>В файле index.html, который вы создали, введите свою конечную точку токена в строке
const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>";.Откройте файл index.html, используя современный браузер (например, Microsoft Edge), чтобы открыть агент в пользовательском холсте.
Протестируйте агент, чтобы убедиться, что вы получаете ответы от его и что он работает правильно.
Если у вас возникли проблемы, убедитесь, что вы опубликовали свой агент и что ваша конечная точка токена была вставлена в правильное место. Он должен быть после знака равенства (=) в строке
const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>"и в двойных кавычках (").
Настройка значка агента, цвета фона и имени
После настройки холста для работы с вашим агентом вы можете внести в него изменения.
Вы можете использовать параметры styleOptions JavaScript для настройки ряда предопределенных стилей.
Откройте Настройка веб-чата для получения ссылок на файл defaultStyleOptions.js и дополнительную информацию о том, что вы можете настроить и как это будет выглядеть.
Изменение значка агента
Обновите файл index.html со следующим примером кода:
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' };Замените изображения аватаров агента и пользователя на изображения вашей компании.
Если у вас нет URL-адреса изображения, вы можете использовать вместо него строку изображения в кодировке Base64.
Изменение цвета фона
Обновите файл index.html со следующим примером кода:
const styleOptions = { backgroundColor: 'lightgray' };Измените
backgroundColorна любой цвет, который вы хотите. Вы можете использовать стандартные названия цветов CSS, значения RGB или HEX.
Изменение имени агента
Обновите текст
<h1>в файле index.html на следующий:<body> <div id="banner"> <h1><img src="contosocopilot-teams.png"> Contoso agent name</h1> </div>Измените текст на любое нужное вам название агента. Вы также можете вставить изображение, хотя вам может понадобиться стилизовать его, чтобы оно помещалось в раздел заголовка.
Настройка и размещение холста чата (дополнительно)
Вы можете подключить свой агент Copilot Studio к пользовательскому холсту, который размещается как отдельное веб-приложение. Этот вариант лучше всего подходит, если вам нужно встроить настроенный iFrame на нескольких веб-страницах.
Заметка
Размещение пользовательского холста требует разработки программного обеспечения. Наша рекомендация здесь заключается в том, что это предназначено для опытных ИТ-специалистов, таких как ИТ-администраторы или разработчики, которые хорошо разбираются в инструментах разработчика, утилитах и интегрированных средах разработки (IDE).
Выберите образец для настройки
Мы рекомендуем начать с одного из этих образцов, специально созданных для работы с Copilot Studio:
Полный пакет — это пользовательский холст, способный отображать весь богатый контент из Copilot Studio. Например:
Расположение и отправка файла — это пользовательский холст, способный получить местоположение пользователя и отправить его агенту с помощью Copilot Studio. Например:
Другой вариант — выбрать один из других образцов холстов веб-чатов, предусмотренных Bot Framework.
Настройка холста с помощью styleSetOptions
Как и при настройке холста по умолчанию, вы можете использовать styleSetOptions, чтобы настроить пользовательский холст. Все настраиваемые свойства перечислены в defaultStyleOptions.js. Для получения дополнительной информации о том, что вы можете настроить и как это будет выглядеть, смотрите раздел Настройка веб-чата.
Развертывание настроенного холста
Чтобы разместить свой пользовательский холст, разверните все файлы в веб-приложении.
