Lazy load javascript file
I'm trying to implement a Microsoft botframework chatbot on our site but don't want to burden the users who won't engage with the bot with the 470Kb library unless they choose to start a chat.
When the framework is included in the page source, the bot initialises and launches but when I remove this from the page source and instead write it to the page when the user clicks a button to start the bot, the script is written to the page and can be seen in DevTools sources but does not initialise.
I've tried several methods of delaying the initialisation until after the script has downloaded, but none of these have worked whether the script is hosted locally or from the MS CDN https://cdn.botframework.com/botframework-webchat/latest/botchat.js.
Even manually checking for the BotChat object in console returns BotChat is not defined.
Is it possible to lazy load the framework after page load?
http://demo.icaew.com/peter-gibb/global-front-end/html/corporate/berzerk.html
Answer
You can refer to the following sample code to dynamically add botchat.css and botchat.js files in your webpage, and dynamically initiate botchat.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input id="btninit" type="button" value="startchat" onclick="initiateChat()" />
<br />
<div id="mybot" />
</body>
</html>
<script>
function initiateChat() {
addCSS("https://cdn.botframework.com/botframework-webchat/latest/botchat.css");
addScript("https://cdn.botframework.com/botframework-webchat/latest/botchat.js");
setTimeout(function () {
BotChat.App({
directLine: { secret: 'your_directline_secret' },
user: { id: '1234', firstname: 'firstname_here', lastname: 'lastname_here' },
bot: { id: 'your_bot_id' },
resize: 'detect'
}, document.getElementById("mybot"))
}, 3000);
}
// add CSS file
function addCSS(filename) {
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('link');
style.href = filename;
style.type = 'text/css';
style.rel = 'stylesheet';
head.appendChild(style);
}
// add script file
function addScript(filename) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
head.insertBefore(script, document.getElementsByTagName("script")[0]);
}
</script>
Besides, to load a JavaScript file, you can also use jQuery.getScript() menthod, and then you can initiate botchat in success callback function.
var url = "https://cdn.botframework.com/botframework-webchat/latest/botchat.js";
$.getScript(url, function () {
BotChat.App({
directLine: { secret: 'your_directline_secret' },
user: { id: '1234', firstname: 'firstname_here', lastname: 'lastname_here' },
bot: { id: 'your_bot_id' },
resize: 'detect'
}, document.getElementById("mybot"))
});
Test result:
