Conectar um bot ao WebchatConnect a bot to Web Chat

Observação

Este tópico é para a versão mais recente do SDK (v4).This topic is for the latest release of the SDK (v4). Você pode encontrar conteúdo sobre a versão mais antiga do SDK (v3) aqui.You can find content for the older version of the SDK (v3) here.

Quando você cria um bot com o Serviço de Bot, o canal de Webchat é configurado automaticamente para você.When you create a bot with Bot Service, the Web Chat channel is automatically configured for you. O canal de Webchat inclui o controle de Webchat, que fornece a capacidade de os usuários interagirem com o bot diretamente em uma página da Web.The Web Chat channel includes the web chat control, which provides the ability for users to interact with your bot directly in a web page.

Amostra de Webchat

O canal de Webchat no Portal do Bot Framework contém tudo o que você precisa para inserir o controle de Webchat em uma página da Web.The Web Chat channel in the Bot Framework Portal contains everything you need to embed the web chat control in a web page. Basta usar o controle de Webchat para inserir a chave secreta do bot e o controle em uma página da Web.All you have to do to use the web chat control is get your bot's secret key and embed the control in a web page.

Considerações de Webchat e Direct LineWeb Chat and Direct Line considerations

Importante

Tenha em mente estas importantes Considerações de segurança.Please, keep in mind these important Security considerations.

Obtenha sua chave secreta do botGet your bot secret key

  1. Abra o bot no portal do Azure e clique na folha Canais.Open your bot in the Azure Portal and click Channels blade.

  2. Clique em Editar no canal de Webchat.Click Edit for the Web Chat channel.
    Canal de WebchatWeb chat channel

  3. Em Chaves secretas, clique em Mostrar para a primeira chave.Under Secret keys, click Show for the first key.
    chave secretaSecret key

  4. Copie a Chave secreta e o Código de inserção.Copy the Secret key and the Embed code.

  5. Clique em Concluído.Click Done.

Inserir o controle de Webchat no siteEmbed the web chat control in your website

Você pode inserir o controle de Webchat em seu site usando uma das duas opções.You can embed the web chat control in your website by using one of two options.

Opção 1 – Manter o segredo oculto, trocar o segredo por um token e gerar a inserçãoOption 1 - Keep your secret hidden, exchange your secret for a token, and generate the embed

Use essa opção se puder executar uma solicitação de servidor para servidor para trocar o segredo do Webchat por um token temporário e se desejar dificultar para outros desenvolvedores inserirem o bot em seus sites.Use this option if you can execute a server-to-server request to exchange your web chat secret for a temporary token, and if you want to make it difficult for other developers to embed your bot in their websites. Embora o uso dessa opção não impeça por completo que outros desenvolvedores insiram o bot em seus sites, essa opção dificulta que eles façam isso.Although using this option will not absolutely prevent other developers from embedding your bot in their websites, it does make it difficult for them to do so.

Para trocar o segredo por um token e gerar a inserção:To exchange your secret for a token and generate the embed:

  1. Emita uma solicitação GET para https://webchat.botframework.com/api/tokens e passe o segredo do Webchat por meio do cabeçalho Authorization.Issue a GET request to https://webchat.botframework.com/api/tokens and pass your web chat secret via the Authorization header. O cabeçalho Authorization usa o esquema BotConnector e inclui o segredo, conforme mostrado na solicitação de exemplo abaixo.The Authorization header uses the BotConnector scheme and includes your secret, as shown in the example request below.

  2. A resposta à solicitação GET conterá o token (entre aspas) que pode ser usado para iniciar uma conversa pela renderização do controle de Webchat dentro de um iframe.The response to your GET request will contain the token (surrounded with quotation marks) that can be used to start a conversation by rendering the web chat control within an iframe. Um token é válido apenas para uma conversa; para iniciar outra conversa, você precisa gerar um novo token.A token is valid for one conversation only; to start another conversation, you must generate a new token.

  3. Dentro do Código de inserção do iframe copiado do canal de Webchat no Portal do Bot Framework (conforme descrito em Obter a chave secreta do seu bot acima), altere o parâmetro s= para t= e substitua "YOUR_SECRET_HERE" pelo token.Within the iframe Embed code that you copied from the Web Chat channel within the Bot Framework Portal (as described in Get your bot secret key above), change the s= parameter to t= and replace "YOUR_SECRET_HERE" with your token.

Observação

Os tokens serão renovados automaticamente antes de expirarem.Tokens will automatically be renewed before they expire.

Solicitação de exemploExample request
requestGET https://webchat.botframework.com/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE
Exemplo de respostaExample response
"IIbSpLnn8sA.dBB.MQBhAFMAZwBXAHoANgBQAGcAZABKAEcAMwB2ADQASABjAFMAegBuAHYANwA.bbguxyOv0gE.cccJjH-TFDs.ruXQyivVZIcgvosGaFs_4jRj1AyPnDt1wk1HMBb5Fuw"
iframe de exemplo (usando o token)Example iframe (using token)
<iframe src="https://webchat.botframework.com/embed/YOUR_BOT_ID?t=YOUR_TOKEN_HERE"></iframe>
Código HTML de exemploExample html code
<!DOCTYPE html>
<html>
<body>
  <iframe id="chat" style="width: 400px; height: 400px;" src=''></iframe>
</body>
<script>

    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
    xhr.setRequestHeader('Authorization', 'BotConnector ' + 'YOUR SECRET HERE');
    xhr.send();
    xhr.onreadystatechange = processRequest;

    function processRequest(e) {
      if (xhr.readyState == 4  && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);
        document.getElementById("chat").src="https://webchat.botframework.com/embed/lucas-direct-line?t="+response
      }
    }

  </script>
</html>

Opção 2 – Inserir o controle de Webchat no site usando o segredoOption 2 - Embed the web chat control in your website using the secret

Use essa opção se desejar permitir que outros desenvolvedores insiram o bot em seus sites com facilidade.Use this option if you want to allow other developers to easily embed your bot into their websites.

Aviso

Se você usar essa opção, outros desenvolvedores poderão inserir o bot em seus sites apenas copiando o código de inserção.If you use this option, other developers can embed your bot into their websites by simply copying your embed code.

Para inserir o bot no site especificando o segredo na marcação iframe:To embed your bot in your website by specifying the secret within the iframe tag:

  1. Copie o Código de inserção do iframe do canal de Webchat no Portal do Bot Framework (conforme descrito em Obter a chave secreta do seu bot acima).Copy the iframe Embed code from the Web Chat channel within the Bot Framework Portal (as described in Get your bot secret key above).

  2. Dentro desse Código de inserção, substitua "YOUR_SECRET_HERE" pelo valor de Chave secreta copiado da mesma página.Within that Embed code, replace "YOUR_SECRET_HERE" with the Secret key value that you copied from the same page.

iframe de exemplo (usando o segredo)Example iframe (using secret)
<iframe src="https://webchat.botframework.com/embed/YOUR_BOT_ID?s=YOUR_SECRET_HERE"></iframe>

Alterar o estilo do controle de WebchatStyle the web chat control

Altere o tamanho do controle de Webchat usando o atributo style do iframe para especificar height e width.You may change the size of the web chat control by using the style attribute of the iframe to specify height and width.

<iframe style="height:480px; width:402px" src="... SEE ABOVE ..."></iframe>

Cliente de controle de chat

Recursos adicionaisAdditional resources

Baixe o código-fonte do controle de Webchat no GitHub.You can download the source code for the web chat control on GitHub.