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
– Nicolas R, Commented Mar 1, 2018 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
– Peter Gibb, Commented Mar 2, 2018 at 5:16
Hi @PeterGibb, any updates? Does the reply help you solve the problem? — Fei Han
– Fei Han, Commented Mar 9, 2018 at 6: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
– Peter Gibb, Commented Mar 13, 2018 at 8:55

Fei Han · Accepted Answer · 2018-03-02 05:51:20Z

6

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:

edited Mar 2, 2018 at 5:51

answered Mar 2, 2018 at 5:35

Fei Han

28k1 gold badge35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abandoned Over a year ago

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.

Collectives™ on Stack Overflow

Lazy load javascript file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related