Menu
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
764
Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.
Optimize Javascript Placement Place your javascript at the end of your HTML file if possible. Notice how Google analytics and other stat tracking software wants to be right before the closing </body> tag. This allows the majority of page content (like images, tables, text) to be loaded and rendered first.
The benefits of lazy loading include: Reduces initial load time – Lazy loading a webpage reduces page weight, allowing for a quicker page load time. Bandwidth conservation – Lazy loading conserves bandwidth by delivering content to users only if it's requested.
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:
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
