CINXE.COM
Chat Support
<html lang="en"> <head> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Chat Support</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> </head> <body id="pagebody"> <script data-apikey="odYiKGXETxKU3zth4xCPJQ" src="https://us01ccistatic.zoom.us/us01cci/web-sdk/zcc-sdk.js"></script> <main class="container"> <img src="https://laurentian.ca/sites/all/themes/newLul/assets/images/laurentian.svg" alt="logo" style="width: 300px;"/> <div class="bg-body-tertiary p-5 rounded mt-3"> <h1>Laurentian Chat Support</h1> <p class="lead">If the chat window does not automatically open, click the button below:</p> <a class="btn btn-lg btn-primary" href="?campaign_id=gKdUsio9S12KZ47JlVnLQA&channel=chat&welcome_screen=on&lang=en" role="button">Toggle Chat</a> </div> </main> <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark" style="background-color: rgb(68, 136, 255);"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="https://laurentian.ca/it">← Return to Laurentian</a> </li> </ul> </div> </div> </nav> <script> const targetNode = document.getElementById("pagebody"); const observer = new MutationObserver(callback); // this will keep track of new message bubbles coming in and when the textbook is generated (if collapsed) observer.observe(targetNode, { childList: true, attributes: true, // Omit (or set to false) to observe only changes to the parent node subtree: true }); var called = false; // to make sure it only triggers the one time its needed var shadow = ""; // shadowroot will go here var hiddenChatButton = false; function callback(mutationList, observer) { mutationList.forEach((mutation) => { if(mutation['type'] == 'attributes' && mutation['attributeName'] && !called) // check to see if our chatbox/button got addeds { $('body').children().each(function(){ if(this.nodeName.includes("LIVESDK")){ // the chatbox will always have "LIVESDK" in it. shadow = targetNode.querySelector(this.nodeName); // get the element const observer2 = new MutationObserver(callback2); // this will keep track of new message bubbles coming in and when the textbook is generated (if collapsed) observer2.observe(shadow.shadowRoot, { childList: true, attributes: true, // Omit (or set to false) to observe only changes to the parent node subtree: true }); called = true; // so it doesn't check again } }); } }); } var editorInit = false; // checks if the text editor is enabled var editor = ''; // editor element will go here var typingTimer; // "typing" timer for the bot side var doneTypingInterval = 1000; // wait 1 sec var agent = false; // if agent is connected function doneTyping(){ // this timeout function checks if the last bot message was // get the last item var last = shadow.shadowRoot.querySelector(".livesdk__msgstack-layout:not(.reverse):last-child"); if(last == null) // enable incase there's no messages yet { enableText(); } else if($(last).find('.livesdk__action-button--item').length == 0) // if there no input option bubbles we want to enable the checkbox { enableText(); } else { disableText(); } } // this function disabled the textbox and hides the emoji/file buttons function disableText() { editor = shadow.shadowRoot.querySelector(".livesdk__texteditor-container"); // find the editor if(editor != null) { editorInit = true; $(editor).find(".livesdk__texteditor--textarea").attr("disabled","disabled"); $(editor).find(".livesdk__texteditor--textarea").val(""); var actionButtons = shadow.shadowRoot.querySelector(".livesdk__texteditor--tools-start"); $(actionButtons).children().hide(); } } // this function enables the textbox and shows the emoji/file buttons function enableText() { editor = shadow.shadowRoot.querySelector(".livesdk__texteditor-container"); if(editor != null) { editorInit = true; $(editor).find(".livesdk__texteditor--textarea").removeAttr("disabled"); var actionButtons = shadow.shadowRoot.querySelector(".livesdk__texteditor--tools-start"); $(actionButtons).children().css("display","flex"); } } function callback2(mutationList, observer) { // oberver for new bubbles mutationList.forEach((mutation) => { if(!editorInit) // inital init of the textbox { editor = shadow.shadowRoot.querySelector(".livesdk__texteditor-container"); if(editor != null) { editorInit = true; disableText(); } } if(mutation['addedNodes'].length != 0) { if($(mutation['addedNodes'][0]).hasClass("livesdk__popover")) { // console.log($(mutation['addedNodes'][0]).html()); if($(mutation['addedNodes'][0]).children().hasClass('livesdk__select')) { var options = $(mutation['addedNodes'][0]).children().children(); var goodOptions = ''; var index = 0; options.each(function(){ if($(this).text() == "French (Canada)" || $(this).text() == 'English (US)') { goodOptions += $(this).prop('outerHTML'); } else { var el = $(mutation['addedNodes'][0]).children().children()[index].style.display ='none'; } index++; }) } } if($(mutation['addedNodes'][0]).hasClass("livesdk__msgstack-layout") && !agent) // when a new message section appears { disableText(); console.log("item added"); clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval); /* var el = $(mutation['addedNodes'][0]); if(el.find('.livesdk__action-button').length > 0) { console.log("has bubbles"); } else { console.log("has no bubbles"); }*/ } else if($(mutation['addedNodes'][0]).hasClass("livesdk__msgstack-item") && !agent) // when a message bubble is added to an existing message {//livesdk__typing-indicator disableText(); clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval); } else { if($(mutation['addedNodes'][0]).hasClass("livesdk__chat-msgsys")) // check for agent join message or end chat button { var text = $(mutation['addedNodes'][0]).text(); console.log("text received :"+text); if(text.includes("joined")) { agent = true; enableText(); } else { agent = false; disableText(); } } } } if(mutation['type'] == 'attributes') // check to change the text on the button { var chatparent = shadow.shadowRoot.querySelector(".livesdk__entry"); if(chatparent != null) { $(chatparent).hide(); } if(shadow.shadowRoot.querySelector(".livesdk__entry--open") == null) { $("#showZoom").text("Open Chat"); } else { $("#showZoom").text("Hide Chat"); } } }); } </script> <script type="text/javascript" src="/_Incapsula_Resource?SWJIYLWA=719d34d31c8e3a6e6fffd425f7e032f3&ns=1&cb=1373516574" async></script></body> </html>