Iniciar uma conversa de chatbot automaticamente

  • Artigo

Importante

As capacidades e os recursos do Power Virtual Agents agora fazem parte do Microsoft Copilot Studio após investimentos significativos em IA generativa e integrações aprimoradas no Microsoft Copilot.

Alguns artigos e capturas de tela podem fazer referência ao Power Virtual Agents enquanto atualizamos a documentação e o conteúdo do treinamento.

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

Importante

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

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

Por padrão, os chatbots 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 bot inicie automaticamente a conversa quando for carregado. Por exemplo, seu bot pode dizer "Olá, eu sou o Botty, um agente virtual" assim que 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, é possível criar um novo tópico para ser usado como saudação, embora seja necessário 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 bot.

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

  2. Copie e cole o código HTML abaixo e salve-o como index.html.
    Você também pode copiar e colar o código abaixo no editor HTML Tryit Editor w3schools.com. Ainda será necessário 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 bot na tela personalizada.

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

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

Alterar a saudação padrão do bot

O código no arquivo index.html faz com que um tópico seja chamado automaticamente quando o bot é carregado. Por padrão, ele 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, é uma melhor prática incluir algum tipo de identificação de que o usuário está falando com um bot (ou "agente virtual"), para que ele não pense que 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. Publique o bot.

Agora você pode testar seu bot acessando a página da Web em que implantou a tela personalizada do bot. Você 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 bot 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 o tópico Analisar informações de sessões cobradas.

  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 bot para um tópico do usuário, selecione Adicionar nó (+) para adicionar um nó e, em seguida, Acessar 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. Publique o bot.

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