How do I embed a Web Chat to my Bot?

1
votes

I have a registered and deployed a functional (enough) bot via the Bot Framework management portal. When I test it via the textboxes in the admin portal, it works great. Now I'm trying to add a Web Chat in a web page.

I have gone in and configured Web Chat and for now, I'm just using the IFrame it gives me with the hardcoded secret token. Additionally, I select the "Enable this bot on Web Chat" checkbox in there. And to be clear, I have redeployed my bot after adding the iframe & secret.

When I'm done, "Web Chat" displays above independent of all of the other channels, however, the Published slider is slid to Off.

When I deploy my bot with the Web Chat iframe & secret, I get the Web Chat control where I can type in it but it never responds to me. Still, if I test my bot in the admin panel, it works great.

Other pieces of info:

  • I'm hosting this in Azure with a custom domain and commercial SSL
  • My custom domain is a third-level domain (i.e. https://bot.mydomain.com)
  • The Web Chat neither works in local debug nor online
  • The Bot Emulator works great locally
  • The Bot Emulator works great if I point it to my online-deployed bot

Do I need to do anything else to embed a functional Web Chat control in my site?

2
botframework

2 Answers

2
votes

There was a temporary issue with the service that required changing the query parameter in the iframe from "s" to "t". If you made this change you should switch back to using an "s".

The publish On/Off determines whether that channel will be listed as available in the Bot Directory. As the Bot Directory has not been released yet those buttons are disabled. The WebChat iframe should work regardless of that setting.

0
votes

I had the same issue with v3 of the Bot Framework, web chat was not responding until I updated my Node app.js on Azure and replaced the MicrosoftAppId and MicrosoftAppPassword with appID and appPassword, see below.

var connector = new builder.ChatConnector({
    //MicrosoftAppId: process.env.MICROSOFT_APP_ID,
    //MicrosoftAppPassword: process.env.MICROSOFT_APP_PASSWORD
    appId: process.env.MICROSOFT_APP_ID,
    appPassword: process.env.MICROSOFT_APP_PASSWORD
});

In addition, I did not have to change the query string from "s" to "t", this defect seems to be fixed.