Читати англійською

Поділитися через

Налаштування помічника

  • Стаття

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

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

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

  2. У розділі Copilot виберіть Додати помічник.

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

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

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

  5. Виберіть Далі.

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

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

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

    Примітка

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

  8. У розділі Вибір стовпців виберіть список стовпців, які використовуються на сторінці. Для вибору доступні лише стовпці з багаторядковим текстом.

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

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

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

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

  1. Зайдіть в редактор коду сайту.

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

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

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

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

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

Copilot віджет

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

Copilot згорнута іконка:

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

Підказка:

.pva-embedded-web-chat-widget .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-адресу.

Copilot елементів

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

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

1. Заголовок

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

2. Висота і ширина

.pva-embedded-web-chat[data-minimized='false'] {
    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;
}