Freigeben über


Ihren Agenten anpassen

Wenn Sie einen Agent für eine Website erstellen, verwendet er den Inhalt der Hosting-Website, um Antworten zu generieren. Microsoft Dataverse indiziert Websiteinhalte und konfigurierte Tabellen. Copilot Studio fasst die indizierten Inhalte und Tabellen zusammen, um daraus Antworten zu generieren.

Authentifizierte Website-Benutzer erhalten maßgeschneiderte, zusammengefasste Antworten, die auf ihre Webrollen abgestimmt sind. Verbessern Sie das Inhaltsmodell für authentifizierte Website-Benutzende, indem Sie die Daten mit den folgenden Schritten verfeinern:

  1. Gehen Sie in Power Pages zu Arbeitsbereich einrichten.

  2. Unter Copilot wählen Sie Agent hinzufügen aus.

  3. Wählen Sie unter Daten verfeinern die Option Änderungen vornehmen aus.

  4. Wählen Sie das Suchsteuerelement Tabellen auswählen aus, um Tabellen auszuwählen oder zu löschen.

    • In diesem Abschnitt können Sie mehrere Tabellen auswählen. Stellen Sie sicher, dass jede Tabelle, die Sie auswählen, auf der Website verwendet wird.
    • Geben Sie auf den nachfolgenden Seiten die Seite an, auf der die Tabelle verwendet wird, um die Zitat-URL zu generieren.
  5. Wählen Sie Weiter.

  6. Wählen Sie unter Tabellen auswählen die Tabelle, welche die Spalten und den Seitenlink enthält, die Sie auswählen möchten. Eine Tabelle wird nur angezeigt, wenn sie mindestens eine mehrzeilige Spalte enthält.

    Sie können jeweils nur eine Tabelle auswählen.

  7. Wählen Sie unter Seitenverknüpfung hinzufügen die Seite aus, auf der die Tabelle verwendet wird.

    Anmerkung

    • Stellen Sie sicher, dass Sie die richtige Seite auswählen. Andernfalls gibt der Bot eine falsche Zitations-URL für die Antworten an.
    • Die Seite muss id als Abfragezeichenfolgenparameter verwenden. Wenn Sie einen anderen Parameternamen verwenden, funktioniert die Zitations-URL nicht ordnungsgemäß.
  8. Wählen Sie unter Spalten auswählen die Spalten aus, die auf der Seite verwendet werden. Es stehen nur Spalten mit mehrzeiligem Text zur Auswahl.

  9. Wählen Sie Weiter aus, und überprüfen Sie Ihre Auswahl.

  10. Wählen Sie Speichern aus, um die Änderungen zu speichern.

Das Erscheinungsbild des Agent anpassen

Sie können den Stil des Agents anpassen, indem Sie die Standardklassen des Cascading Stylesheets (CSS) überschreiben. Fügen Sie dazu der Headervorlage ein style-Element hinzu und überschreiben Sie die Werte, indem Sie wie folgt vorgehen:

  1. Öffnen Sie den Codeeditor der Website.

  2. Erweitern Sie in der Explorer-Navigation den Ordner web-templates.

  3. Öffnen Sie Header.html.

  4. Fügen Sie Ihr style- oder script-Element hinzu.

    Screenshot von Visual Studio, bei dem der Ordners web-templates, der Header.html-Datei und das style-Element mit einem CSS-Selektor hervorgehoben wird.

  5. Überschreiben Sie die entsprechenden Stile.

Agent-Widget

Screenshot des Chatbot-Widgets.

Symbol für eingeklappten Agenten:

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

QuickInfo:

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

Symbolbild:

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

Anmerkung

Ersetzen Sie <image URL> mit der tatsächlichen URL der Bildquelle. Verwenden Sie einen externen Pfad oder laden Sie ein Bild in die Tabelle Webdatei hoch und verwenden Sie dessen URL.

Agent-Elemente

Die CSS-Beispiele in diesem Abschnitt zeigen im folgenden Screenshot, wie Sie jedes der nummerierten Chatbot-Elemente anpassen können.

Screenshot eines Chatbots mit einzelnen Elementen, die hervorgehoben und nummeriert sind.

1. Kopfzeile

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

2. Einstellungen für Höhe und Breite

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

3. Agent-Fenster

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

4. Blase von einem Agenten

Hintergrundfarbe:

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

Textfarbe:

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

5. Blase eines Benutzers

Hintergrundfarbe:

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

Textfarbe:

.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. Einstellungen für Datenschutznachrichten

Hintergrundfarbe:

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

Textfarbe:

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