CSU Library Website Customization

Documentation of CSU Primo and LibGuides customization

Add LibraryH3lp Chat Box

Goal

Add our LibraryH3lp chat box to Primo VE. 

LibraryH3lp chat box in Primo VE

Solution:

We followed this tutorial https://www.npmjs.com/package/primo-explore-libraryh3lp-widget 

To match our library website design, we changed the box to an image. Also make sure you change the institution number to your own number.

s.src = 'https://libraryh3lp.com/js/libraryh3lp.js?11538';

Step 1: Icon File

Upload a png, jpg or for the best result a .svg icon file to the img folder

Step 2: Add JS code 

Add the following code before the end of the custom.js file and before })();
/ *********************************/
var needsJs = document.createElement('div');
needsJs.setAttribute('class', 'needs-js');
var closeChatButton = document.createElement('button');
closeChatButton.innerHTML = '☓';
closeChatButton.setAttribute('style', 'border: 0 none; background: #f5f7fa; font-size: 16px; position: absolute; padding: 5px; right: -5px; top: -15px; border-radius: 50%; width: 30px; font-weight: bold;');
var chatFrameWrap = document.createElement('div');
chatFrameWrap.setAttribute('id', 'chat-frame-wrap');
chatFrameWrap.setAttribute('style', 'display: none; width: 280px; background-color: #f5f5f5; padding: 0; box-shadow: none; position: fixed; top: 200px; right: 10px; border: 0 none; z-index: 200;');
chatFrameWrap.appendChild(closeChatButton);
chatFrameWrap.appendChild(needsJs);
 
var chatButton = document.createElement('button');
chatButton.innerHTML = "<img src=\"custom/01COLSU_INST-01COLSU/img/chat_icon.svg\" width=\"79px\" height=\"112px\">";
chatButton.setAttribute('style', 'position: fixed; top: 200px; padding: 0; right: 10px; border: 0 none; z-index: 200; box-shadow: none;  text-align: center; display: inline-block; text-decoration: none;');
 

var showChat = false;
function toggleChat() {
  chatFrameWrap.style.display = showChat ? 'none' : 'block';
  showChat = !showChat;
}
closeChatButton.addEventListener('click', toggleChat);
closeChatButton.addEventListener('touchend', toggleChat);
chatButton.addEventListener('click', toggleChat);
chatButton.addEventListener('touchend', toggleChat);

var chatWidget = document.createElement('aside');
chatWidget.setAttribute('tabindex', '-1');
chatWidget.setAttribute('style', 'display: block;');
chatWidget.appendChild(chatButton);
chatWidget.appendChild(chatFrameWrap);
document.body.appendChild(chatWidget);

var s = document.createElement('script');
s.id = 'localScript';
s.src = 'https://libraryh3lp.com/js/libraryh3lp.js?11538';
document.body.appendChild(s);

Add LibChat Box

Goal

chat box

If a user doesn't click on the small chat box for 5 seconds, a bigger chat box will pop up. This is the default behavior of LibChat. 

bigger LibChat chat box

 

Solution

Add the following code to the bottom of page and after the last })(); Each institution has different hash code, so make sure you update the code to your own hash code. 

/*----------below is the code for libchat-----------*/
(function() {
         var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = 'true';
         lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'v2.libanswers.com/load_chat.php?hash=93892e99699c3a131597039ab7d24b59';
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
})();
/*---------------libchat code ends here---------------*/

 

URL: https://libguides.colostate.edu/web_customization | Print Page