Adding a 3rd party live chat window with javascript

%3CLINGO-SUB%20id%3D%22lingo-sub-1298311%22%20slang%3D%22en-US%22%3EAdding%20a%203rd%20party%20live%20chat%20window%20with%20javascript%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1298311%22%20slang%3D%22en-US%22%3E%3CP%3EMy%20client%20would%20like%20to%20have%20a%20%22live%20chat%22%20window%20on%20a%20Modern%20Team%20SharePoint%20site%20with%20a%20floating%20element.%20The%20third%20party%20the%20client%20wants%20to%20use%2C%20sent%20some%20JavaScript%20and%20HTML%20and%20insists%20it%20will%20work%20if%20placed%20above%20the%20closing%20body%20tag%20of%20a%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%3C!--%20Start%20of%20LiveChat%20(www.livechatinc.com)%20code%20--%3E%20%3CSCRIPT%20type%3D%22text%2Fjavascript%22%3E%20window.__lc%20%3D%20window.__lc%20%7C%7C%20%7B%7D%3B%20window.__lc.license%20%3D%20LicNumber%3B%20(function()%20%7B%20var%20lc%20%3D%20document.createElement('script')%3B%20lc.type%20%3D%20'text%2Fjavascript'%3B%20lc.async%20%3D%20true%3B%20lc.src%3D('https%3A'%20%3D%3D%20document.location.protocol%20%3F%20'https%3A%2F%2F'%20%3A%20'http%3A%2F%2F')%20%2B%20'cdn.livechatinc.com%2Ftracking.js'%3B%20var%20s%20%3D%20document.getElementsByTagName('script')%5B0%5D%3B%20s.parentNode.insertBefore(lc%2C%20s)%3B%20%7D)()%3B%20%3C%2FSCRIPT%3E%20%3C%2FCODE%3E%3CNOSCRIPT%3E%3CCODE%3E%20%3CA%20href%3D%22https%3A%2F%2Fwww.livechatinc.com%2Fchat-with%2F11798958%2F%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3EChat%20with%20us%3C%2FA%3E%2C%20powered%20by%20%3CA%20href%3D%22https%3A%2F%2Fwww.livechatinc.com%2F%3Fwelcome%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3ELiveChat%3C%2FA%3E%20%3C%2FCODE%3E%3C%2FNOSCRIPT%3E%20%3C!--%20End%20of%20LiveChat%20code%20--%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20did%20get%20this%20to%20work%20modified%20and%20in%20an%20iframe%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%3CIFRAME%20src%3D%22https%3A%2F%2Fsecure.livechatinc.com%2Flicence%2F%22%20licensenumber%3D%22%22%3E%0A%3C%2FIFRAME%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhich%20resulted%20in%20a%20fully%20functional%20window%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22rdonp_1-1586532598662.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F183618i83CE27B161B3CF91%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22rdonp_1-1586532598662.png%22%20alt%3D%22rdonp_1-1586532598662.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHowever%2C%20my%20client%20wants%20a%20floating%20element%20such%20as%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22rdonp_2-1586532731643.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F183619i32BC8C02ADDD69A8%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22rdonp_2-1586532731643.png%22%20alt%3D%22rdonp_2-1586532731643.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EAny%20guidance%2Fideas%20for%20implementing%20this%20would%20be%20greatly%20appreciated!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1298311%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1299289%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20a%203rd%20party%20live%20chat%20window%20with%20javascript%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1299289%22%20slang%3D%22en-US%22%3EHi%2C%3CBR%20%2F%3EThe%20better%20way%20to%20implement%20the%20above%20is%20to%20use%20SPFx%20Application%20extension%20and%20target%20the%20footer%20element.%20The%20chatbot%20will%20appear%20on%20all%20the%20pages.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1302804%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20a%203rd%20party%20live%20chat%20window%20with%20javascript%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1302804%22%20slang%3D%22en-US%22%3EOk%20thanks%20for%20pointing%20me%20in%20a%20direction.%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

My client would like to have a "live chat" window on a Modern Team SharePoint site with a floating element. The third party the client wants to use, sent some JavaScript and HTML and insists it will work if placed above the closing body tag of a page.

 

 

<!-- Start of LiveChat (www.livechatinc.com) code --> <script type="text/javascript"> window.__lc = window.__lc || {}; window.__lc.license = LicNumber; (function() { var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true; lc.src=('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s); })(); </script> <noscript> <a href="https://www.livechatinc.com/chat-with/11798958/" rel="nofollow">Chat with us</a>, powered by <a href="https://www.livechatinc.com/?welcome" rel="noopener nofollow" target="_blank">LiveChat</a> </noscript> <!-- End of LiveChat code -->

 

 

I did get this to work modified and in an iframe:

<iframe src="https://secure.livechatinc.com/licence/"LicenseNumber"/open_chat.cgi" width="400px" height="300px">
</iframe>

 

Which resulted in a fully functional window:

 

rdonp_1-1586532598662.png

 

However, my client wants a floating element such as:

 

rdonp_2-1586532731643.png

Any guidance/ideas for implementing this would be greatly appreciated!

2 Replies
Highlighted
Hi,
The better way to implement the above is to use SPFx Application extension and target the footer element. The chatbot will appear on all the pages.
Highlighted
Ok thanks for pointing me in a direction.