Can I add a LibraryH3lp chat box to ExLibris Primo?

Current Version of Primo

Yes!  We know of a couple ways...

1) Recommended: Add custom code to the custom.js script in Primo to insert your chat snippet. 

IMPORTANT: In both examples below, please take care to update the code sample to reference your chat snippet ID instead of ##### and adjust the libraryh3lp URL if you use a regional LibraryH3lp server and not the main, US server. Also note that ##### doesn't necessarily mean your snippet ID consists of 5 numbers, it may be 4 or even fewer.

When using a chat snippet with either a pop-out or follow-me chat box:

Note: To create a button or tab that floats in the lower right corner, make sure your chat snippet contains CSS for fixed positioning.  Our floating button and floating tab docs are good starting places.

/*----------below is the code for LibraryH3lp-----------*/
var needsJs = document.createElement('div');
needsJs.setAttribute('class', 'needs-js');
document.body.appendChild(needsJs);

var s = document.createElement('script');
s.id = 'localScript';
s.src = 'https://libraryh3lp.com/js/libraryh3lp.js?#####';
document.body.appendChild(s);
/*---------------LibraryH3lp code ends here---------------*/

When using a chat snippet with an embedded chat box:

/*----------below is the code for LibraryH3lp-----------*/
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: -5px -5px 20px 5px rgba(0, 0, 0, 0.3); position: fixed; bottom: 0; right: 10px; border: 0 none; z-index: 200;');
chatFrameWrap.appendChild(closeChatButton);
chatFrameWrap.appendChild(needsJs);

var chatButton = document.createElement('button');
chatButton.innerHTML = 'Chat with us 💬';
chatButton.setAttribute('style', 'background: #555555; color: #ffffff; padding: 10px 10px 8px; font-size: 14px; border-radius: 3px 3px 0 0; position: fixed; bottom: 0; right: 10px; border: 0 none; z-index: 200; box-shadow: none; font-weight: 400; 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?#####';
document.body.appendChild(s);
/*---------------LibraryH3lp code ends here---------------*/

Note: To update the color of the chat button, change the background style (default is #555555) of the chatButton. You may also need to adjust the width of the chatFrameWrap to fit your chat box.

2) Alternatively and once you've installed and are using Primo Explore Dev, you can add a LibraryH3lp embedded chat box to the bottom-right of the page

PrimoVE NDE (new)

We are currently developing a hosted add-on for use in PrimoVE NDE. Please email our support address if you are interested in being notified when it is available.

FAQ URL: