Sharepoint javascript not working AND still script still displaying on web part

Question

I'm attempting to insert a chatbot into a Sharepoint 2010 (or 13 - not sure) page via javascript that:

• waits 3 seconds after page loads then
• pops up a chatbot iframe

It works perfectly as designed in the JS Fiddle - that's what's so frustrating!

The Sharepoint experience on the other hand:

1. the javascript only partly works (only rendering the chatbot window in minimised state) and clicking on the title bar does nothing (that I can see)
2. the text of the script itself is still displaying in the webpart in preview mode

The way I insert code is

1. edit page
2. insert a control for the code: Webpart\Media and Content\Content Editor OR Webpart\Media and Content\Script Editor OR Editing page|Insert\Embed code
3. setting the webpart Appearance\Chrome to None

Only console error in F12 says the following. The code it points to is uglified beyond belief!

SCRIPT5007: Unable to get property 'parse' of undefined or null reference
File: botchat.js, Line: 34, Column: 343685

Answer 1

Make sure the code you are inserting in Content editor webpart is enclosed inside Script tag as given below.

<script>
(function () {

    var div = document.createElement("div");
    document.getElementsByTagName('body')[0].appendChild(div);
    div.outerHTML = "<div id='botDiv' style='height: 38px; position: fixed; bottom: 0; z-index: 1000; background-color: #fff'><div id='botTitleBar' style='height: 38px; width: 400px; position:fixed; cursor: pointer;'></div><iframe width='400px' height='400px' src='https://webchat.botframework.com/embed/Sustainabot?s=C6gwcCAkWgI.cwA.Q8Y.tAWTRkgxeJPdBSgp9eX1kTC3Qox_xP9GiDZ1KxHZSI0'></iframe></div>";


    setInterval(showChatbot, 3000);    

        function showChatbot() {
            document.querySelector('#botDiv').style.height = '400px';
        }


    document.querySelector('body').addEventListener('click', function (e) {
        e.target.matches = e.target.matches || e.target.msMatchesSelector;
        if (e.target.matches('#botTitleBar')) {
            var botDiv = document.querySelector('#botDiv'); 
            botDiv.style.height = botDiv.style.height == '400px' ? '38px' : '400px';
        };
    });
}());

</script>

Answer 2

You Need to follow below steps to make it work:

1. Put the chatbot javascript in a .JS file
2. Upload the JS file in Site Assests library
3. Provide the link to JS file in content editor webpart