The issue I am facing is I have developed a web chat bot with multiple waterfall dialog's using C# and bot framework V4 and deployed to azure successfully using Visual studio 2019 without any errors with it an HTML file to access the web channel chat bot. This HTML URL gets opened in all the browsers except IE 11 i.e. it works fine in:
Chrome
Edge
Firefox
But when comes to IE 11 it throws error and the chat bot never opens. Some times error like syntax error in JavaScript used in the HTML and so on so forth.
Now, my query is:
How to write or prepare the HTML script file which can work in all type of browsers? How to identify the browser dynamically and call the related script based upon that automatically.
I am using the below HTML file to access my chat bot after publishing in Chrome.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Custom style options</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
or lock down on a specific version with the following format: "/4.1.0/webchat.js".
-->
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
html, body {
height: 100%
}
body {
margin: 0
}
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
(async function () {
// In this demo, we are using Direct Line token from MockBot.
// To talk to your bot, you should use the token exchanged using your Direct Line secret.
// You should never put the Direct Line secret in the browser or client app.
// https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
// Token is found by going to Azure Portal > Your Web App Bot > Channels > Web Chat - Edit > Secret Keys - Show
// It looks something like this: pD*********xI.8ZbgTHof3GL_nM5***********aggt5qLOBrigZ8
const token = 'LxTsWrNC****bPm5awq3DW7hfb*************I2s0nb19f76Xdmm8';
// You can modify the style set by providing a limited set of style options
const styleOptions = {
botAvatarImage: 'https://learn.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
botAvatarInitials: 'BF',
userAvatarImage: 'https://avatars1.githubusercontent.com/u/45868722?s=96&v=4',
userAvatarInitials: 'WC',
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
};
// We are using a customized store to add hooks to connect event
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
// When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
});
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
styleOptions,store,
webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script>
</body>
</html>
I want the same single HTML file to work for IE 11 also how to detect the browser and related script too fire automatically such that it works automatically.
I request you to please provide required modifications step by step in detailed guide manner as I am new to coding, BOT, HTML, CSS, and JavaScript.
I did some Googling around it and they said to remove async function for IE use then.
I have also replaced the below line:
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
With the following:
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
But again it throws error at below part not sure how to solve this for which I couldn't get any proper answer:
const store = window.WebChat.createStore({}, ({
dispatch
}) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
// When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: {
language: window.navigator.language
}
}
});
}
Expected Result:
I want my HTML to open in all browsers and the HTML should contain the code for automatically detect browser and execute related script such that the chat bot opens in all browsers and functions properly without taking any additional time.
Actual Result:
Currently, chat bot not working in IE 11 but working in all other browsers.
Date: 7-June-2019
@tdurnford: Please find my modified HTML script according to the sample provided below:
As tried to explain in my comment, I am not using Token generator instead the easy method provided in the below link and also the BOT is not loading until unless put I-FRAME which i get is wrong way of doing it according to below link:
The reason for not using token generator is also given in the below post itself.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Full-featured bundle with ES5 polyfills</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
or lock down on a specific version with the following format: "/4.1.0/webchat.js".
-->
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main">
</div>
<script>
(function (){
const token = '<<Secret Code>>';
const styleOptions = {
botAvatarImage: 'Ur Image URL',
botAvatarInitials: 'BF',
userAvatarImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXFpBTkKBW7JgYuePzhVoGkDDdZLVKQMZDbgy6j3C0sWvkkH1-',
userAvatarInitials: 'WC',
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
};
var store = window.WebChat.createStore({}, function (_ref) {
var dispatch = _ref.dispatch;
return function (next) {
return function (action) {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
};
};
});
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: token,
styleOptions: styleOptions,
store: store,
webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
})}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
});
</script>
</body>
</html>
can you please verify whether i have done anything wrong in the above script as i have tired to put all the correct values as needed everywhere as per my understanding/knowledge?
Can you please help me resolve the issue of BOT not opening in IE-11? if possible we can have a Skype connect to share screen and discuss it if needed on need basis based on mutually agreeable time.
Thanks & Regards -ChaitanyaNG
You can't use the async/await protocol in IE 11. Also make sure you are you using the es5 bundle. Take a look at this Getting Started wit es5 Bundle Web Chat Sample.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Full-featured bundle with ES5 polyfills</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
or lock down on a specific version with the following format: "/4.1.0/webchat.js".
-->
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main">
</div>
<script>
const token = '<WEB_CHAT_SECRET>';
const styleOptions = {
botAvatarImage: 'Ur Image URL',
botAvatarInitials: 'BF',
userAvatarImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXFpBTkKBW7JgYuePzhVoGkDDdZLVKQMZDbgy6j3C0sWvkkH1-',
userAvatarInitials: 'WC',
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
};
const store = window.WebChat.createStore(
{},
function (_ref) {
const dispatch = _ref.dispatch;
return function (next) {
return function (action) {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
};
};
});
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token: token}),
styleOptions: styleOptions,
store: store,
webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
</script>
</body>
</html>
Hope this helps!