Condividi tramite

Avviare automaticamente una conversazione con copilota

  • Articolo

Puoi configurare il tuo copilota per avviare una conversazione con un utente. Puoi anche combinare il saluto personalizzato con la personalizzazione dell'aspetto del copilota.

Importante

Il copilota che avvia la conversazione appare nelle tue analisi e aumenta il conteggio delle sessioni.

Se l'utente del copilota non interagisce con il copilota (ad esempio, carica la pagina ma non chiede nulla al copilota), la sessione sarà contrassegnata come non impegnata. Ciò potrebbe influire sull'analisi.

Per impostazione predefinita, i copiloti creati con Microsoft Copilot Studio e pubblicati su un sito Web vengono caricati senza un saluto e attendono passivamente che l'utente inizi la conversazione.

Tuttavia, puoi utilizzare il codice personalizzato CSS e JavaScript per fare in modo che il copilota avvii automaticamente la conversazione quando viene caricato. Ad esempio, potresti chiedere al tuo copilota di dire "Ciao, sono Betty, un agente virtuale" non appena viene caricato.

Innanzitutto, è necessario distribuire un canvas personalizzato che includa argomenti che attivano il saluto. Per impostazione predefinita, il canvas personalizzato chiama l'argomento saluto di sistema predefinito. Puoi, tuttavia, creare un nuovo argomento da utilizzare come saluto. È necessario deviare l'argomento di saluto di sistema predefinito a quel nuovo argomento.

Importante

È possibile installare e utilizzare il codice di esempio incluso in questa documentazione solo per l'utilizzo con il prodotto Microsoft Copilot Studio. Il codice di esempio è concesso in licenza "così com'è" ed è escluso da qualsiasi accordo sul livello di servizio o servizi di supporto. L'utente si assume tutti i rischi derivanti dal suo utilizzo.

Microsoft non riconosce garanzie o condizioni espresse ed esclude le garanzie implicite di commerciabilità, idoneità a uno scopo specifico e non violazione.

Recupera endpoint token

Per personalizzare il canvas, predefinito o personalizzato al quale ti connetti, devi recuperare i dettagli del tuo copilota.

  1. Nel menu di navigazione, in Impostazioni seleziona Canali.

  2. Seleziona App per dispositivi mobili.

    Schermata del riquadro del canale dell'app per dispositivi mobili.

  3. Accanto a Endpoint token, seleziona Copia.

    Screenshot dell'ID token dell'endpoint.

Personalizzare il canvas predefinito (semplice)

Configura l'aspetto della canvas di chat con alcuni semplici opzioni di stile CSS e JavaScript.

Innanzitutto, devi configurare dove stai distribuendo il canvas del bot.

  1. Crea e pubblica un copilota.

  2. Copia e incolla il codice HTML mostrato qui e salvalo come index.html.
    Puoi anche copiare e incollare il codice in w3schools.com HTML try it editor. Dovrai comunque aggiungere l'endpoint del token.

    <!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. Nel file index.html che hai creato, inserisci il tuo endpoint del token alla riga var theURL = "<YOUR TOKEN ENDPOINT>";.

  4. Apri index.html utilizzando un browser moderno (ad esempio, Microsoft Edge) per aprire il copilota nel canvas personalizzato.

  5. Testa il copilota per assicurarti di ricevere le risposte dal tuo copilota e che funzioni correttamente.

    In caso di problemi, assicurati di aver pubblicato il copilota e che l'endpoint del token sia stato inserito nella posizione corretta. L'endpoint del token deve essere inserito dopo il segno di uguale (=) sulla riga var theURL = "<YOUR TOKEN ENDPOINT>" e racchiuso tra virgolette doppie (").

Modifica il saluto predefinito del copilota

Il codice nel file index.html fa sì che un argomento venga chiamato automaticamente quando viene caricato il copilota. Per impostazione predefinita, il codice chiama l'argomento di saluto di sistema. Puoi anche creare un nuovo argomento e deviare l'argomento di saluto di sistema predefinito a quel nuovo argomento.

In entrambi i casi, apporta le modifiche all'argomento che desideri chiamare come faresti normalmente.

Se modifichi o crei un nuovo argomento di saluto, dovresti includere una sorta di indicazione che l'utente sta parlando con un copilota (o "agente virtuale"). Tale indicazione aiuterà l'utente a capire che non sta parlando con un essere umano.

Ti consigliamo di modificare l'argomento di saluto di sistema in modo da non dover modificare il codice index.html.

  1. Nel menu di spostamento, seleziona Argomenti, quindi seleziona la riga dell'argomento Formula di apertura.

    Screenshot della pagina Argomenti con l'argomento di saluto evidenziato.

  2. Modifica il testo all'interno dei nodi Messaggio. Puoi anche aggiungere o eliminare nodi aggiuntivi.

  3. Seleziona Salva.

  4. Pubblicare il copilota.

Ora puoi testare il tuo copilota accedendo alla pagina Web in cui hai distribuito il canvas personalizzato del copilota. Lo vedrai iniziare la conversazione mostrando automaticamente l'argomento di saluto.

Crea un nuovo argomento di utente

Avviso

L'uso di un argomento di utente per iniziare una conversazione aumenta le sessioni fatturate. Una sessione fatturata è un'interazione tra un cliente e un copilota e rappresenta un'unità di consumo. La sessione fatturata inizia quando viene attivato un argomento per l'utente. Per ulteriori informazioni, vedi Visualizzare le sessioni fatturate (anteprima).

  1. Seleziona Argomenti nel menu di spostamento.

  2. Seleziona Nuovo argomento e assegna un nome.

  3. Aggiungi il testo all'interno del nodo Messaggio.

  4. Dopo aver finito di modificare il messaggio fai clic su Salva.

  5. Nel menu di spostamento, seleziona Argomenti, quindi seleziona la riga dell'argomento Formula di apertura.

  6. Elimina i nodi del messaggio nell'argomento Formula di apertura.

  7. Per far spostare automaticamente il copilota in un argomento di utente, seleziona Aggiungi nodo (+) per aggiungere un nodo e quindi Vai a un altro argomento.

  8. Nel menu a comparsa, seleziona l'argomento di utente che hai creato sopra.

  9. Dopo aver terminato di modificare il messaggio, fai clic su Salva.

  10. Pubblicare il copilota.

Ora puoi testare il tuo copilota accedendo alla pagina Web in cui hai distribuito il canvas personalizzato del copilota. Vedrai il copilota iniziare la conversazione mostrando automaticamente il nuovo argomento.