Udostępnij przez

Dostosowanie agenta

Podczas tworzenia agenta dla witryny internetowej używa on zawartości witryny hostującej do generowania odpowiedzi. Microsoft Dataverse indeksuje treść witryny i skonfigurowane tabele. Copilot Studio podsumowuje zindeksowaną treść i tabele w celu wygenerowania odpowiedzi.

Uwierzytelnieni użytkownicy witryny otrzymują dostosowane, podsumowane odpowiedzi zgodnie z ich rolami w sieci. Ulepsz model zawartości dla uwierzytelnionych użytkowników witryny, precyzując dane, wykonując następujące kroki:

  1. W Power Pages przejdź do Konfigurowanie obszaru roboczego.

  2. W obszarze Copilot wybierz pozycję Dodaj agenta.

  3. W obszarze Precyzowanie danych wybierz opcję Określ zmiany.

  4. Wybierz kontrolkę wyszukiwania tabel, aby wybrać lub wyczyścić tabele.

    • W tej sekcji można wybrać wiele tabel. Upewnij się, że każda wybrana tabela jest używana na stronie.
    • Na kolejnych stronach należy podać stronę, na której jest używana tabela do utworzenia adresu URL ci z nazwami.

  5. Wybierz Dalej.

  6. W polu Wybierz tabelę wybierz tabelę zawierającą kolumny i łącze do strony, które chcesz wybrać. Tabela pojawia się tylko wtedy, gdy ma co najmniej jedną kolumnę wielowierszową.

    Jednocześnie można wybrać tylko jedną tabelę.

  7. W sekcji Dodaj łącze do strony wybierz stronę, na której używana jest tabela.

    Uwaga

    • Upewnij się, że wybrałeś właściwą stronę. W przeciwnym razie bot poda nieprawidłowy adres URL cytatu dla odpowiedzi.
    • Strona musi używać id jako parametru ciągu zapytania. Jeśli użyjesz innej nazwy parametru, adres URL cytatu nie będzie działał poprawnie.

  8. W obszarze Wybierz kolumny wybierz kolumny używane na stronie. Do wyboru dostępne są tylko kolumny z tekstem wielowierszowym.

  9. Wybierz Dalej i sprawdź swój wybór.

  10. Wybierz Zapisz, aby przesłać zmiany.

Dostosuj wygląd agenta

Styl agenta można dostosować, zastępując domyślne klasy kaskadowego arkusza stylów (CSS). Aby to zrobić, dodaj element style do szablonu nagłówka i zastąp wartości, wykonując następujące czynności:

  1. Otwórz edytor kodu strony edytor kodu.

  2. W nawigacji Explorer rozwiń folder web-templates.

  3. Otwórz plik Header.html.

  4. Dodaj element style lub script.

    Zrzut ekranu z Visual Studio, podświetlający folder web-templates, plik Header.html i element stylu z selektorem CSS.

  5. Zastąp odpowiednie style.

Widżet agenta

Zrzut ekranu widżetu chatbota.

Ikona zwiniętego agenta:

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

Etykietka narzędzia:

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

Obraz ikony:

<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>

Notatka

Zastąp <image URL> go rzeczywistym adresem URL źródła obrazu. Użyj ścieżki zewnętrznej lub prześlij obraz do tabeli plik sieciowy i użyj jego adresu URL.

Elementy agenta

Próbki CSS w tej sekcji zawierają przykłady, które pokazują, jak dostosować każdy z ponumerowanych elementów chatbota na poniższym zrzucie ekranu.

Zrzut ekranu chatbota z nazwanymi i ponumerowanymi poszczególnymi elementami.

1. Nagłówek

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

2. Ustawienia wysokości i szerokości

.pva-embedded-web-chat[data-minimized='false'] {
    height: 80%;
    width: 25%;
    max-width: 400px;
    max-height: 740px;
}

3. Okno agenta

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

4. Bańka od agenta

Kolor tła:

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

Kolor tekstu:

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

5. Bąbelek od użytkownika

Kolor tła:

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

Kolor tekstu:

.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. Ustawienia wiadomości prywatności

Kolor tła:

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

Kolor tekstu:

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