Embed a bot in a website

  • Article

APPLIES TO: SDK v4

Although bots commonly exist outside of websites, they can also be embedded within a website. For example, you may embed a knowledge bot within a website to enable users to quickly find information that might otherwise be challenging to locate within complex website structures. Or you might embed a bot within a help desk website to act as the first responder to incoming user requests. The bot could independently resolve simple issues and handoff more complex issues to a human agent.

This article explores how to integrate bots with websites and the process of using the backchannel mechanism to facilitate private communication between a web page and a bot.

Microsoft provides two different ways to integrate a bot in a website: the Skype web control and an open source web control.

Open source web control

The open source Web Chat control is based upon ReactJS and uses the Direct Line API to communicate with the Bot Framework. The Web Chat control provides a blank canvas for implementing the Web Chat, giving you full control over its behaviors and the user experience that it delivers.

The backchannel mechanism enables the web page that is hosting the control to communicate directly with the bot in a manner that is entirely invisible to the user. This capability enables a number of useful scenarios:

  • The web page can send relevant data to the bot, such as GPS location.
  • The web page can advise the bot about user actions, such as "user just selected Option A from the dropdown".
  • The web page can send the bot the auth token for a logged-in user.
  • The bot can send relevant data to the web page, such as the current value of user's portfolio.
  • The bot can send "commands" to the web page, such as a change to the background color.

Using the backchannel mechanism

The open source WebChat control communicates with bots by using the Direct Line API, which allows activities to be sent back and forth between client and bot. The most common type of activity is message, but there are other types as well. For example, the activity type typing indicates that a user is typing or that the bot is working to compile a response.

You can use the backchannel mechanism to exchange information between client and bot without presenting it to the user by setting the activity type to event. The Web Chat control will automatically ignore any activities where type="event".

Sample code

The open source Web Chat control is available via GitHub. For details about how you can implement the backchannel mechanism using the open source Web Chat control and the Bot Framework SDK for Node.js, see Use the backchannel mechanism.

Additional resources