1

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
0

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>
0

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 webpartenter image description here
  • I agree pointing directly to the JS file should work, but I've seen it cause weird issues. I have better luck pointing CEWPs to HTML files that include all of the script references I need. An added benefit is you can add other script dependencies to the HTML file if needed. – Chris Romp Jan 24 '18 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.