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
Improve this question

2 Answers 2

Reset to default
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>
Improve this answer
0
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
Improve this answer
1
  • 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. Commented Jan 24, 2018 at 18:06

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.