Want to build your own 24/7 FAQ knowledge base?
LibraryH3lp subscriptions include unlimited independent internal or public-facing knowledge bases.


Search the LibraryH3lp Knowledge Base

 

Can I add a LibraryH3lp chat box to ExLibris Primo?

1341 views   |   Last updated on Jan 22, 2020    integrations

 

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:

/*----------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 an 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

FAQ URL:

More Help

Search By Topic

Share this FAQ