Partager via

Personnaliser votre assistant

Lorsque vous créez un agent pour un site web, il utilise le contenu du site hébergeur pour générer des réponses. Microsoft Dataverse indexe le contenu du site et les tables configurées. Copilot Studio résume le contenu indexé et les tables pour générer des réponses.

Les utilisateurs authentifiés du site reçoivent des réponses personnalisées et résumées, alignées sur leurs rôles Web. Améliorez le modèle de contenu pour les utilisateurs authentifiés du site en affinant les données en procédant comme suit :

  1. Dans Power Pages, accédez à Configurer l’espace de travail.

  2. Sous Copilot, sélectionnez Ajouter un agent.

  3. Sous Affinez vos données, sélectionner Faire des changements.

  4. Sélectionnez Choisir le contrôle de recherche de tables pour choisir ou effacer des tables.

    • Vous pouvez sélectionner plusieurs tables dans cette section. Assurez-vous que chaque table que vous choisissez est utilisée sur le site.
    • Sur les pages suivantes, spécifiez la page où la table est utilisée pour générer l’URL de la citation.

  5. Sélectionnez Suivant.

  6. Sous Choisir des tables, sélectionnez la table contenant les colonnes et le lien de page que vous souhaitez sélectionner. Une table n’apparaît que si elle comporte au moins une colonne multiligne.

    Vous ne pouvez sélectionner qu’une seule table à la fois.

  7. Sous Ajouter un lien de page, sélectionnez la page où la table est utilisée.

    Note

    • Assurez-vous de sélectionner la page correcte. Sinon, le bot fournit une URL de citation incorrecte pour les réponses.
    • La page doit utiliser id comme paramètre de chaîne de requête. Si vous utilisez un autre nom de paramètre, l’URL de citation ne fonctionne pas correctement.

  8. Sous Choisir des colonnes, sélectionnez les colonnes utilisées sur la page. Seules les colonnes contenant du texte multiligne peuvent être sélectionnées.

  9. Sélectionnez Suivant, puis vérifiez votre sélection.

  10. Cliquez sur Enregistrer pour valider les modifications.

Personnaliser l’apparence de l’agent

Vous pouvez personnaliser le style de l’agent en remplaçant les classes de feuille de style en cascade (CSS) par défaut. Pour ce faire, ajoutez un élément style au modèle d’en-tête et remplacez les valeurs en procédant comme suit :

  1. Ouvrez l’éditeur de code du site.

  2. Dans la navigation de l’Explorateur, développez le dossier web-templates.

  3. Ouvrez Header.html.

  4. Ajoutez votre élément style ou script.

    Capture d’écran de Visual Studio, mettant en surbrillance le dossier web-templates, le fichier Header.html et l’élément de style avec un sélecteur CSS.

  5. Remplacez les styles appropriés.

Widget d’agent

Capture d’écran du widget de chatbot.

Icône de réduction de l’agent :

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

Info-bulle :

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

Image de l’icône :

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

Nonte

Remplacez <image URL> par l’URL source de l’image réelle. Utilisez un chemin d’accès externe ou chargez une image dans la table Fichier web et utilisez son URL.

Eléments de l’agent

Les exemples CSS de cette section fournissent des exemples qui montrent comment personnaliser chacun des éléments de chatbot numérotés dans la capture d’écran suivante.

Capture d’écran d’un chatbot avec des éléments individuels répertoriés et numérotés.

1. En-tête

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

2. Paramètres de hauteur et de largeur

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

3. Fenêtre de l’agent

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

4. Bulle d’un agent

Couleur d’arrière-plan :

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

Couleur du texte :

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

5. Bulle de l’utilisateur

Couleur d’arrière-plan :

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

Couleur du texte :

.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. Paramètres des messages de confidentialité

Couleur d’arrière-plan :

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

Couleur du texte :

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