Налаштуйте свого агента

Коли ви створюєте агента для веб-сайту, він використовує вміст із сайту хостингу для генерації відповідей. Microsoft Dataverse індексує контент сайту та налаштовані таблиці. Copilot Studio Узагальнює індексований контент і таблиці для генерації відповідей.

Автентифіковані користувачі сайту отримують індивідуальні, узагальнені відповіді, що відповідають їхнім веб-ролям. Удосконалте модель контенту для автентифікованих користувачів сайту, уточнивши дані за допомогою таких кроків:

  1. Перейдіть Power Pages до розділу Налаштування робочої області.

  2. У розділі Copilot виберіть Додати агента.

  3. У розділі Уточнення даних виберіть Внести зміни.

  4. Виберіть елемент керування підстановкою таблиць, щоб вибрати або очистити таблиці.

    • У цьому розділі можна вибрати кілька таблиць. Слідкуйте за тим, щоб кожен обраний вами стіл використовувався на сайті.
    • На наступних сторінках вкажіть сторінку, на якій таблиця використовується для генерації URL-адреси цитування.
  5. Виберіть Далі.

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

    Одночасно можна вибрати лише один стіл.

  7. У розділі Додати посилання на сторінку виберіть сторінку, на якій використовується таблиця.

    Нотатка

    • Переконайтеся, що ви вибрали правильну сторінку. В іншому випадку бот надає неправильну URL-адресу цитування для відповідей.
    • Сторінка повинна використовувати id як параметр рядка запиту. Якщо ви використовуєте будь-яке інше ім’я параметра, URL-адреса цитування не працює належним чином.
  8. У розділі Вибрати стовпці виберіть стовпці, які використовуються на сторінці. Для вибору доступні лише стовпці з багаторядковим текстом.

  9. Натисніть Далі та перегляньте свій вибір.

  10. Натисніть Зберегти , щоб надіслати зміни.

Налаштуйте зовнішній вигляд агента

Ви можете налаштувати стиль агента, замінивши стандартні класи Cascading Style Sheet (CSS). Для цього додайте style елемент до шаблону заголовка та змініть значення, виконавши такі дії:

  1. Відкрийте редактор коду сайту.

  2. У навігації Провідника розгорніть папку веб-шаблонів .

  3. Відкрийте Header.html.

  4. Додайте свій style елемент or script .

    Скріншот Visual Studio, виділення папки web-шаблонів, файлу Header.html та елементу стилю з CSS селектором.

  5. Замініть відповідні стилі.

Віджет агента

Якщо ви створили свого агента до липня 2025 року, ваш агент може відрізнятися від найновішої версії.

Скріншот віджета чат-бота.

Значок згорнутого агента:

.pva-embedded-web-chat-widget {
  background-color: #484644;
  border: 1px solid #FFFFFF;
}

Підказка:

.pva-embedded-web-chat-widget-tooltip-text {
  background: white;
  color: #323130;
}

Зображення піктограми:

<script>
document.addEventListener('DOMContentLoaded', function() {
   var buttons = document.getElementsByClassName("pva-embedded-web-chat-widget");
    buttons[0].innerHTML = '<img src="<image URL>" height= "70px" width = "70px" />';
}, false);
</script>

Нотатка

Замініть <image URL> на фактичну URL-адресу джерела зображення. Використовуйте зовнішній шлях або завантажте зображення в таблицю «Веб-файл» і використовуйте його URL-адресу.

Елементи агента

У CSS зразках цього розділу наведено приклади, які показують, як налаштувати кожен із пронумерованих елементів чат-бота на наступному скріншоті. Виберіть вкладку, яка відповідає інтерфейсу агента.

Скріншот чат-бота з виділеними та пронумерованими окремими елементами.

1 – верхній колонтитул

.pages-chatbot-header {
  background: #77a145;
  color: #ffffff;
}

2 . Настройки висоти та ширини

.pva-embedded-web-chat-window-container {
  height: 80%;
  width: 25%;
  max-width: 400px;
  max-height: 740px;
}

3 – вікно Copilot

.pva-embedded-web-chat-window {
  background: white;
}

4 - Бульбашка з копілоту

Колір фону:

.webchat__bubble:not(.webchat__bubble--from-user)
.webchat__bubble__content {
  background-color: #77a145 !important;
  border-radius: 5px !important;
}

Колір тексту:

.webchat__bubble:not(.webchat__bubble--from-user) p {
  color: #ffffff;
}

5 – бульбашка від користувача

Колір фону:

.webchat__bubble.webchat__bubble--from-user
.webchat__bubble__content {
  background-color: #797d81 !important;
  border-radius: 5px !important;
}

Колір тексту:

.webchat__bubble.webchat__bubble--from-user p {
  color: #ffffff;
}
.webchat__link-definitions__badge {
  color: blue !important;
}

.webchat__link-definitions__list-item-text {
  color: blue !important;
}

.webchat__render-markdown__pure-identifier {
  color: blue !important;
}

7 – параметри повідомлень про конфіденційність

Колір фону:

.pva-privacy-message {
  background: #797d81;
}

Колір тексту:

.pva-privacy-message p {
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
}