Search code examples
botsbotframeworkdirect-line-botframework

Automatically send a message into the WebChat window in Bot Framework

I am using Microsoft Bot Framework and I created two bots.

I am trying to build a simple HTML page that will show two webchat windows side by side, each for one of the two bots.

The idea is to have an input box in the page, and when someone types into it, the text gets sent into both webchats at the same time.

However, since webchats are basically iframes, there is not much I can do unless I make the webchat iframe expose some methods to the parent frame. This is the expected browser behaviour.

So my question is: is there any way to control the webchat iframes from a parent frame, or the bot framework's webchats cannot support that?

Solution

  • Start with the readme for webchat You do not need to use webchat as an Iframe. you can implement a non Iframe webchat like this:

    <!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
  </head>
  <body>
    <div id="bot"/>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <script>
      BotChat.App({
        directLine: { secret: direct_line_secret },
        user: { id: 'userid' },
        bot: { id: 'botid' },
        resize: 'detect'
      }, document.getElementById("bot"));
    </script>
  </body>
</html>

    This way you will have access to both the Javascript and the CSS so you can customize it to fit your needs. There is a good overview page here