botframework - 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 .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?

.html

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.

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./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./peter-gibb/global-front-end/html/corporate/berzerk.html

Share Improve this question edited Mar 2, 2018 at 5:18 asked Mar 1, 2018 at 13:09 Peter Gibb 811 gold badge1 silver badge3 bronze badges

Can you add the code of the page where you are trying to do this lazy loading? – Nicolas R Commented Mar 1, 2018 at 14:18
Editing the title for clearness – polkduran Commented Mar 1, 2018 at 15:41
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 Commented Mar 2, 2018 at 5:16
Hi @PeterGibb, any updates? Does the reply help you solve the problem? – 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 Commented Mar 13, 2018 at 8:55

| Show 1 more ment

1 Answer 1

Sorted by: Reset to default 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./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./botframework-webchat/latest/botchat.css");
        addScript("https://cdn.botframework./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./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:

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

botframework - Lazy load javascript file - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)