Comparteix via


Personalitza el teu agent

Quan creeu un agent per a un lloc web, utilitza el contingut del lloc d'allotjament per generar respostes. Microsoft Dataverse indexa el contingut del lloc i les taules configurades. Copilot Studio resumeix el contingut indexat i les taules per generar respostes.

Els usuaris del lloc autenticats reben respostes resumides i personalitzades alineades amb els seus rols web. Milloreu el model de contingut per als usuaris del lloc web autenticats refinant les dades amb aquests passos:

  1. A, Power Pages aneu a l'àrea de treball Configura.

  2. A Copilot, seleccioneu Afegeix agent.

  3. A Refina les dades, seleccioneu Fa canvis.

  4. Seleccioneu Tria el control de cerca de taules per triar o esborrar les taules.

    • Podeu seleccionar diverses taules en aquesta secció. Assegureu-vos que totes les taules que trieu s'utilitzin al lloc.
    • A les pàgines següents, especifiqueu la pàgina on s'utilitza la taula per generar l'URL de la cita.
  5. Seleccioneu Següent.

  6. A Tria taules, seleccioneu la taula que conté les columnes i l'enllaç de la pàgina que voleu seleccionar. Una taula només apareix si té com a mínim una columna multilínia.

    Només podeu seleccionar una taula alhora.

  7. A Afegeix un enllaç de pàgina, seleccioneu la pàgina on s'utilitza la taula.

    Nota

    • Assegureu-vos de seleccionar la pàgina correcta. En cas contrari, el bot proporciona un URL de citació incorrecte per a les respostes.
    • La pàgina s'ha d'utilitzar id com a paràmetre de cadena de consulta. Si utilitzeu qualsevol altre nom de paràmetre, l'URL de citació no funciona correctament.
  8. A Tria columnes, seleccioneu les columnes utilitzades a la pàgina. Només les columnes amb text de diverses línies estan disponibles per a la selecció.

  9. Seleccioneu Següent i reviseu la selecció.

  10. Seleccioneu Desa per enviar els canvis.

Personalitzar l'aspecte de l'agent

Podeu personalitzar l'estil de l'agent substituint les classes de full d'estil en cascada (CSS) per defecte. Per fer-ho, afegiu un style element a la plantilla de capçalera i substituïu els valors seguint aquests passos:

  1. Obriu l'editor de codi dellloc.

  2. A la navegació de l'Explorador , expandiu la carpeta web-templates .

  3. Obre Header.html.

  4. Afegiu el vostre style element o script .

    Captura de Visual Studio pantalla, ressaltant la carpeta web-templates, el fitxer Header.html i l'element d'estil amb un CSS selector.

  5. Anul·lar els estils adequats.

Giny de l'agent

Captura de pantalla del widget del chatbot.

Icona col·lapsada de l'agent:

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

Consell d'eines:

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

Imatge de la icona:

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

Nota

Substituïu-lo <image URL> per l'URL de la font de la imatge real. Utilitzeu un camí extern o carregueu una imatge a la taula Fitxer web i utilitzeu el seu URL.

Elements de l'agent

Les CSS mostres d'aquesta secció proporcionen exemples que mostren com personalitzar cadascun dels elements numerats del chatbot a la captura de pantalla següent.

Captura de pantalla d'un chatbot amb elements individuals cridats i numerats.

1. Capçalera

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

2. Configuració d'alçada i amplada

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

3. Finestra de l'agent

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

4. Bombolla d'un agent

Color de fons:

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

Color del text:

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

5. Bombolla de l'usuari

Color de fons:

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

Color del text:

.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. Configuració dels missatges de privadesa

Color de fons:

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

Color del text:

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