Настройте внешний вид и ощущения агент
Холст вашего агент определяет его внешний вид и ощущение. Вы можете настроить холст двумя способами, в зависимости от сложности необходимых изменений:
Настройте холст по умолчанию с помощью стиля 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. Для получения дополнительной информации о том, что вы можете настроить и как это будет выглядеть, смотрите раздел Настройка веб-чата.
Развертывание настроенного холста
Чтобы разместить свой пользовательский холст, разверните все файлы в веб-приложении.
