Iniciar automaticamente uma conversa do copiloto

  • Artigo

Você pode configurar seu copiloto para iniciar uma conversa com um usuário. Você também pode combinar a saudação personalizada com a personalização para a aparência do copiloto.

Importante

Fazer com que o copiloto inicie a conversa aparecerá nas suas análises e aumentará sua contagem de sessões.

Se o usuário do seu copiloto não interagir com ele (por exemplo, ele carrega a página, mas não pede nada ao copiloto), a sessão será marcada como uma sessão sem interação. Isso poderá afetar suas análises.

Por padrão, os copilotos criados com Microsoft Copilot Studio e publicados em um site serão carregados sem uma saudação, e aguardarão passivamente o usuário iniciar a conversa.

No entanto, você pode usar código JavaScript e CSS personalizado e para que o copiloto inicie automaticamente a conversa quando for carregado. Por exemplo, seu copiloto pode dizer "Olá, eu sou o Botty, um agente virtual" assim que o copiloto for carregado.

Primeiro, você precisará implantar uma tela personalizada que inclua argumentos que disparem a saudação. Por padrão, a tela personalizada chama o tópico de saudação padrão do sistema. No entanto, você pode criar um novo tópico para ser usado como saudação. Você precisa desviar o tópico de saudação padrão do sistema para um novo tópico.

Importante

Você pode instalar e usar o código de exemplo incluído nesta documentação apenas para o produto Microsoft Copilot Studio. O exemplo de código é licenciado "como está" e é excluído de qualquer contrato de nível de serviço ou serviço de suporte. Você assume o risco de usá-las.

A Microsoft não fornece garantias expressas ou condições e exclui todas as garantias implícitas, inclusive de comercialização, adequação a um fim específico e de não violação.

Recuperar o ponto de extremidade do token

Para personalizar sua tela, seja a tela padrão ou uma personalizada à qual você se conecta, é necessário recuperar os detalhes do copiloto.

  1. No menu de navegação, em Configurações, selecione Canais.

  2. Selecione Aplicativo móvel.

    Captura de tela do bloco de canal do aplicativo móvel.

  3. Ao lado de Ponto de Extremidade do Token, selecione Copiar.

    Captura de tela da ID de token do ponto de extremidade.

Personalizar a tela padrão (simples)

Configure a aparência da tela de conversa com algumas opções simples de estilo de JavaScript e CSS.

Primeiro, você precisa configurar onde está implantando sua tela de bot.

  1. Crie e publique um copiloto.

  2. Copie e cole o código HTML mostrado aqui salve-o como index.html.
    Você também pode copiar e colar o código abaixo no editor HTMLTryit Editor w3schools.com. Você ainda precisará adicionar o ponto de extremidade do 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. No arquivo index.html criado, insira o ponto de extremidade do token na linha var theURL = "<YOUR TOKEN ENDPOINT>";.

  4. Abra index.html usando um navegador moderno (por exemplo, Microsoft Edge) para abrir o copiloto na tela personalizada.

  5. Teste o copiloto para garantir que você esteja recebendo respostas dele e que copiloto esteja funcionando corretamente.

    Se você encontrar problemas, verifique se publicou seu copiloto e se o ponto de extremidade do token está inserido no local correto. O ponto de extremidade do token deve ser depois do sinal de igual (=) na linha var theURL = "<YOUR TOKEN ENDPOINT>" e entre aspas duplas (").

Alterar a saudação padrão do copiloto

O código no arquivo index.html faz com que um tópico seja chamado automaticamente quando o copiloto é carregado. Por padrão, o código chama o tópico de saudação do sistema. Você também pode criar um novo tópico e desviar o tópico de saudação padrão do sistema para esse novo tópico.

Nos dois casos, você realiza as alterações no tópico que deseja chamar como faria normalmente.

Se você modificar ou criar um tópico de saudação, deverá incluir algum tipo de indicação de que o usuário está falando com um copiloto (ou "agente virtual"). Tal indicação ajudará o usuário a entender que não está falando com um humano.

Recomendamos que você modifique o tópico de saudação do sistema para não precisar editar o código de index.html.

  1. No menu de navegação, selecione Tópicos e a linha de tópico Saudação.

    Captura de tela da página Tópicos com o tópico Saudação realçado.

  2. Edite o texto nos nós Mensagem. Você também pode adicionar ou excluir nós adicionais.

  3. Selecione Salvar.

  4. Publicar seu copiloto.

Agora você pode testar seu copiloto acessando a página da Web em que implantou a tela personalizada do copiloto. Você pode ver o bot iniciar a conversa mostrando automaticamente o tópico de saudação.

Criar um novo tópico de usuário

Aviso

O uso de um tópico de usuário para iniciar uma conversa aumentará suas sessões cobradas. Uma sessão cobrada é uma interação entre um cliente e um copiloto e representa uma unidade de consumo. A sessão cobrada começa quando um tópico do usuário é acionado. Para obter mais informações, consulte Exibir sessões faturadas (versão preliminar).

  1. No menu de navegação, selecione Tópicos.

  2. Selecione Novo tópico e dê um nome a ele.

  3. Adicione o texto no nó Mensagem.

  4. Selecione Salvar quando terminar de editar a mensagem.

  5. No menu de navegação, selecione Tópicos e a linha de tópico Saudação.

  6. Exclua os nós de mensagem no tópico Saudação.

  7. Para desviar automaticamente o copiloto para um tópico do usuário, selecione Adicionar nó (+) to add a node, and then Ir para outro tópico.

  8. No submenu, selecione o tópico do usuário que você criou acima.

  9. Selecione Salvar quando terminar de editar a mensagem.

  10. Publicar seu copiloto.

Agora você pode testar seu copiloto acessando a página da Web em que implantou a tela personalizada do copiloto. Você pode ver o copiloto iniciar a conversa mostrando automaticamente o novo tópico.