Partager via

Démarrer automatiquement une conversation de l’agent

  • Article

Vous pouvez configurer votre agent pour démarrer une conversation avec un utilisateur. Vous pouvez également combiner le message d’accueil personnalisé avec la personnalisation de l’apparence de l’agent.

Important

Lorsque l’agent démarre la conversation, cela apparaît dans les analyses et augmente votre nombre de sessions.

Si l’utilisateur de votre agent n’interagit pas avec l’agent (par exemple, il charge la page mais ne demande rien à l’agent), la session est marquée comme une session non engagée. Cela peut avoir un impact sur vos analyses.

Par défaut, les agents créés avec Copilot Studio et publiés sur un site web se chargent sans message d’accueil et attendent passivement que l’utilisateur démarre la conversation.

Cependant, vous pouvez utiliser du code CSS et JavaScript personnalisé pour que l’agent démarre automatiquement la conversation lorsqu’il se charge. Par exemple, vous pouvez demander à votre agent de dire « Salut, je suis Botty, un agent virtuel » dès qu’il se charge.

Tout d’abord, vous devez déployer un canevas personnalisé qui inclut des arguments qui déclenchent le message d’accueil. Par défaut, le canevas personnalisé appelle la rubrique d’accueil système par défaut. Cependant, vous pouvez créer une nouvelle rubrique à utiliser comme message d’accueil. Vous devez détourner la rubrique d’accueil système par défaut vers une nouvelle rubrique.

Important

Vous pouvez installer et utiliser l’exemple de code inclus dans cette documentation uniquement pour une utilisation avec le produit Copilot Studio. L’exemple de code est concédé sous licence « en l’état » et est exclu de tout accord de niveau de service ou service d’assistance. Vous êtes seul responsable de leur utilisation.

Microsoft n’offre aucune garantie expresse ou conditions et décline expressément toute garantie implicite, y compris en matière de qualité marchande, d’adéquation à un usage particulier et de non-violation de la loi.

Extraire le point de terminaison du jeton

Pour personnaliser votre canevas, qu’il s’agisse du canevas par défaut ou d’un canevas personnalisé auquel vous vous connectez, vous devez récupérer les détails de votre agent.

  1. Dans le menu de navigation, sous Paramètres, sélectionnez Canaux.

  2. Sélectionnez Application mobile.

    Capture d’écran de la vignette du canal de l’application mobile.

  3. En regard de Point de terminaison de jeton, sélectionnez Copier.

    Capture d'écran de l'identifiant du token du point de terminaison.

Personnaliser le canevas par défaut (simple)

Configurez l’apparence du canevas de conversation avec quelques options de mise en forme CSS et JavaScript simples.

Tout d’abord, vous devez configurer l’endroit où vous déployez votre canevas de bot.

  1. Créez et publiez un agent.

  2. Copiez et collez le code HTML affiché ici et enregistrez-le en tant que index.html.
    Vous pouvez également copier et coller le code dans l’éditeur d’essai HTML w3schools.com. Vous devez toujours ajouter le point de terminaison de votre jeton.

    <!DOCTYPE html>
<html>
<head>
    <title>Contoso Sample Web Chat</title> 
    <!-- This styling is for the Web Chat demonstration purposes. It is recommended that style is moved to a separate file for organization in larger projects -->
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        h1 {
            font-size: 16px;
            font-family: Segoe UI;
            line-height: 20px;
            color: whitesmoke;
            display: table-cell;
            padding: 13px 0px 0px 20px;
        }

        #heading {
            background-color: black;
            height: 50px;
        }

        .main {
            margin: 18px;
            border-radius: 4px;
        }

        div[role="form"]{
            background-color: black;
        }

        #webchat {
            position: fixed;
            height: calc(100% - 50px);
            width: 100%;
            top: 50px;
            overflow: hidden;
        }

    </style>

</head>
<body>
    <div>
        <div id="heading">
            <!-- Change the h1 text to change the bot name -->    
            <h1>Contoso Bot Name</h1>
        </div>
        <div id="webchat" role="main"></div>
    </div>    

  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

  <script>
        const styleOptions = {

           // Add styleOptions to customize Web Chat canvas
           hideUploadButton: true
        };

        // Add your BOT token endpoint below
        var theURL = "<BOT TOKEN ENDPOINT>";

        var environmentEndPoint = theURL.slice(0,theURL.indexOf('/powervirtualagents'));
        var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
        var regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`; 

        var directline;
            fetch(regionalChannelSettingsURL)
                .then((response) => {
                    return response.json();
                    })
                .then((data) => {
                    directline = data.channelUrlsById.directline;
                    })
                .catch(err => console.error("An error occurred: " + err));

      fetch(theURL)
            .then(response => response.json())
            .then(conversationInfo => {
                window.WebChat.renderWebChat(
                    {
                        directLine: window.WebChat.createDirectLine({
                            domain: `${directline}v3/directline`,
                            token: conversationInfo.token,
                        }),
                        styleOptions
                    },
                    document.getElementById('webchat')
                );
            })
            .catch(err => console.error("An error occurred: " + err));

    </script>
  </body>
</html>

  3. Dans le fichier index.html que vous avez créé, entrez le point de terminaison de jeton à la ligne var theURL = "<YOUR TOKEN ENDPOINT>";.

  4. Ouvrez index.html à l’aide d’un navigateur moderne (par exemple, Microsoft Edge) pour ouvrir l’agent dans le canevas personnalisé.

  5. Testez l’agent pour vous assurer de recevoir des réponses de votre agent et que l’agent fonctionne correctement.

    Si vous rencontrez des problèmes, vérifiez que vous avez publié votre agent et que le point de terminaison de votre jeton est inséré au bon endroit. Le point de terminaison du jeton doit être placé après le signe égal (=) sur la ligne var theURL = "<YOUR TOKEN ENDPOINT>" et être entouré de guillemets doubles (").

Modifier la rubrique d’accueil par défaut de l’agent

Le code dans le fichier index.html provoque l’appel automatique d’une rubrique lorsque l’agent est chargé. Par défaut, le code appelle la rubrique d’accueil système. Vous pouvez également créer une nouvelle rubrique et détourner la rubrique d’accueil système par défaut en cette nouvelle rubrique.

Dans les deux cas, vous devez apporter des modifications au rubrique que vous souhaitez appeler comme vous le feriez normalement.

Si vous modifiez ou créez une nouvelle rubrique de message d’accueil, vous devez inclure une sorte d’indication que l’utilisateur parle à un agent (ou « agent virtuel »). Cette indication aidera l’utilisateur à comprendre qu’il ne parle pas à un humain.

Nous vous recommandons de modifier la rubrique d’accueil système de manière à ne pas avoir à modifier le code index.html.

  1. Dans le menu de navigation, sélectionnez Sujets, puis sélectionnez la ligne du sujet Accueil.

    Capture d’écran de la page Rubriques avec la rubrique Message d’accueil mise en évidence.

  2. Modifiez le texte à l’intérieur des nœuds Message. Vous pouvez également ajouter ou supprimer des nœuds.

  3. Sélectionnez Enregistrer.

  4. Publiez votre agent.

Vous pouvez maintenant tester votre agent en vous rendant sur la page web où vous avez déployé le canevas personnalisé de votre agent. Vous pouvez voir le bot démarrer la conversation en affichant automatiquement la rubrique d’accueil.

Créer une rubrique utilisateur

Avertissement

L’utilisation d’une rubrique utilisateur pour démarrer les conversations augmentera le nombre de sessions facturées. Une session facturée est une interaction entre un client et un agent et représente une unité de consommation. La session facturée commence lorsqu’une rubrique utilisateur est déclenchée. Pour plus d’informations, consultez Gérer la capacité de messages.

  1. Dans le menu de navigation, sélectionnez Rubriques.

  2. Sélectionnez Nouveau rubrique et donnez-lui un nom.

  3. Ajoutez due texte à l’intérieur du nœud Message.

  4. Sélectionnez Enregistrer une fois que vous avez terminé de modifier le message.

  5. Dans le menu de navigation, sélectionnez Sujets, puis sélectionnez la ligne du sujet Accueil.

  6. Supprimez des nœuds de message dans la rubrique Message d’accueil.

  7. Pour détourner automatiquement l’agent vers une rubrique utilisateur, sélectionnez Ajouter un nœud (+) pour ajouter un nœud, puis Passer à un autre rubrique.

  8. Dans le menu volant, sélectionnez la rubrique utilisateur que vous avez créé ci-dessus.

  9. Sélectionnez Enregistrer une fois que vous avez terminé de modifier le message.

  10. Publiez votre agent.

Vous pouvez maintenant tester votre agent en vous rendant sur la page web où vous avez déployé le canevas personnalisé de votre agent. Vous pouvez voir l’agent démarrer la conversation en affichant automatiquement la nouvelle rubrique.