Comparteix a través de

Personalitzar el Copilot

  • Article

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

Els usuaris del lloc autenticats reben respostes personalitzades i resumides que estan alineades amb les seves funcions web. Per millorar el model de contingut per als usuaris del lloc web autenticats, refineu les dades seguint aquests passos:

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

  2. A # Copilot, seleccioneuAfegeix copilot .

  3. A Refina les dades, seleccioneu Fa canvis.

  4. Seleccioneu Tria el control de cerca de taules per seleccionar o esborrar la selecció de taules.

    • Podeu seleccionar diverses taules en aquesta secció. Assegureu-vos que totes les taules que seleccioneu s'utilitzen 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 la llista de columnes que s'utilitzen a la pàgina. Només les columnes que tenen text multilínia estan disponibles per a la selecció.

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

  10. Seleccioneu Desa per enviar els canvis.

Personalitza l'aspecte del copilot

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

  1. Aneu a 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 / script element.

    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.

Copilot giny

Captura de pantalla del giny del chatbot.

Copilot icona col·lapsada:

.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. Feu referència a un camí extern o carregueu una imatge a la taula Fitxer web i utilitzeu el seu URL.

Elements Copilot

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. Alçada i amplada

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

3. Finestra Copilot

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

4. Bombolla del copilot

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. Missatge de privacitat

Color de fons:

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

Color del text:

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