Lazy load javascript file

Question

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

Can you add the code of the page where you are trying to do this lazy loading? — Nicolas R, Mar 01 '18 at 14:18
The edited title misses the crucial point of the question which is about the working of the MS botframework and whether that can be initiated without being in the page source. — Peter Gibb, Mar 02 '18 at 05:16
Hi @PeterGibb, any updates? Does the reply help you solve the problem? — Fei Han, Mar 09 '18 at 06:15
Thanks @FeiHan, that was helpful. The specific problem I found was a conflict with requireJS and by building the initialisation **into** requireJS instead of trying to work around it solved the issue. I will be implementing the CSS dynamically though JS as you suggested. — Peter Gibb, Mar 13 '18 at 08:55
Hi @PeterGibb, if the reply is helpful, you can mark it as accepted answer, which would help other community members quickly find this thread and solve the similar issues. — Fei Han, Mar 22 '18 at 02:36

Fei Han · Answer 1 · 2018-03-02T05:51:20.003

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:

In the timeout for initializing the BotChat after calling the lazyload of the botchat.js file, it would be helpful to encapsulate it in a `if (typeof BotChat !== "undefined")` call, to avoid a "BotChat is not defined" error in the event the lazyload takes longer than your timeout. Could also put that part in its own function so that if BotChat is still undefined, you could have an `else` part to the if statement I suggested to call another setTimeout if necessary. For the 3000 milliseconds you set in your example, this should rarely be an issue though. — Abandoned, Mar 07 '18 at 01:51

Lazy load javascript file

1 Answers1

Linked