Read trending IT updates for cloud businesses, managed service providers, IT pros & what innovation digital transformation is driving in tech industry.

Join a bot to Internet Chat

0 17

This publish exhibits methods to use the Internet Chat channel to permit the consumer to speak with a bot. That is completed by embedding a Internet Chat element  in an internet web page. The Internet Chat element, referred right here, is included within the Internet Chat channel that’s related by default with a bot deployed in Azure. The next image exhibits the parts concerned.

This publish assumes that you have already got a bot deployed in Azure. For details about deployment, see Deploy your bot.

Additionally the publish provides steerage for builders. Because it makes use of a handbook course of to generate a token from a secret it isn’t meant for a manufacturing surroundings.


The channel is the important thing connection mechanism that permits the trade of data between a bot and a communication utility. The Bot Framework Service, configured by means of the Azure portal, connects your bot to the channels and facilitates communication between your bot and the consumer.

Whenever you create a bot , the Internet Chat channel is mechanically configured for you. The Internet Chat channel contains the Internet Chat element , which supplies the power for customers to work together with a bot straight from an internet web page. The Internet Chat element is a highly-customizable web-based shopper for the Bot Framework V4 SDK. For extra info, see Join a bot to channels.

The subsequent sections present methods to embed a bot in an internet web page.

Get the Internet Chat channel secret key

  1. In your browser, navigate to Azure portal.
  2. Choose your bot registration useful resource.
  3. Within the left panel, click on Channels.
  4. In the fitting panel, click on the Edit hyperlink by the Internet Chat channel.
  5. Within the displayed Configure Internet Chat wizard,  within the Secret keys part, click on the Present button by any of the two keys.
  6. Copy a save the Secret key and the Embed code. You’ll use them when embedding the Internet Chat element in an internet web page.
  7. Click on Finished.

Generate token and associated URL

To keep away from safety downside it can be crucial that you don’t use the key, generated above, straight within the iframe aspect. So the very first thing you have to do, is to generate a token based mostly on the key after which construct the URL to assign to the src attribute within the iframe.

IN an internet web page, enter the content material proven beneath. The web page asks you to enter the Internet Chat secret and the identify of the bot as proven within the Azure portal. It then generates a URL to make use of within the iframe in a unique web page.

Discover {that a} token is legitimate for one dialog solely; to start out one other dialog, you have to generate a brand new token. Additionally it is a non-public web page totally different kind the general public web page containing the Internet Chat management.



Generate URL based mostly on token and bot identify

Non-public Web page
This web page generates a URL from the Internet Chat channel secret and the bot App Service identify.
The Internet Chat channel is related to the bot to embed in an internet web page utilizing the iframe aspect.
The usage of a token as an alternative of the key is essential to keep away from safety breaches.

Ensure to have the next info prepared, obtained from the Azure portal:

  1. Bot secret. The Internet Chat channel secret.
  2. .
  3. Bot identify. The bot App Service identify.
  4. .

Enter Bot App Service info

Assign the next URL to the src attribute of the iframe aspect within the internet web page. It permits the consumer to work together with the bot.

URL right here

Add the next script to the earlier web page.

// Create an HTTP request object.
var xhr = new XMLHttpRequest();

  Course of the response. Get the URL.
operate processResponse(e) {
  if (xhr.readyState == 4  && xhr.standing == 200) {
    var token = JSON.parse(xhr.responseText);

    // Get the bot app service identify
    var botname = doc.getElementById('botId').worth

    // Consider the bot url.
    var url = 'https://webchat.botframework.com/embed/' + botname + '?t=' + token

    // alert("The bot url is " + url);

    var elUrl = doc.getElementById('urlId');
    elUrl.innerText = url;


  Request the token based mostly on the bot secret.
operate getToken(formElement)

  var secret = formElement['secretId'].worth;

  // alert("The key is " + secret);

  // Difficulty an HTTP request to generate the token from the key.
  xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
  xhr.setRequestHeader('Authorization', 'BotConnector ' + secret);

  // Course of the response asynchronously.
  xhr.onreadystatechange = processResponse;

  return false;

Copy and save the generated URL. You’re going to assign it to the src attribute within the iframe aspect within the internet web page proven beneath.

Embed the bot in an internet web page

Create an internet web page and add the content material proven beneath.  This web page embeds a bot utilizing the iframe aspect.

Just remember to assign the URL to the src attribute within the iframe aspect.


Internet Chat bot shopper

This web page embeds a bot utilizing the iframe aspect.
Earlier than you lunch the web page, just remember to assign the URL to the src attribute within the iframe aspect.
Seek advice from the associated instance web page to see methods to generate the URL.

The next is an instance of how the web page seems:

You might also like