Can I add a LibraryH3lp chat box to ExLibris Primo?

 

(Skip to PrimoVE NDE)

 

Current Version of Primo (NOT PrimoVE NDE)

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

You can include a LibraryH3lp chat widget as a PrimoVE NDE add-on.

• Add-on Name: Nubgames-LibraryH3lp
• Add-on URL (choose the one that matches your subscription):
  • Main US: https://libraryh3lp.com/static/libraryh3lp-primo-nde-addon/v1/ 
  • Canada regional: https://ca.libraryh3lp.com/static/libraryh3lp-primo-nde-addon/v1/ 
  • Europe regional: https://eu.libraryh3lp.com/static/libraryh3lp-primo-nde-addon/v1/ 
  • Singapore regional: https://sg.libraryh3lp.com/static/libraryh3lp-primo-nde-addon/v1/
• Configuration Parameters (JSON file):
  • Required:
    • queueName: The name of your chat queue which can be found in the Queues Management page of the admin dashboard (US, CA, EU, SG).
    • snippetId: The ID number of the chat snippet you'd like to use within PrimoVE NDE. We recommend selecting a chat snippet with an "embedded" chat widget style. If you need help creating one, please contact support. The ID number can be found in the Chat Snippets Management page of the admin dashboard (US, CA, EU, SG).
  • Optional: 
    • iconOnlineColor: A color code string describing the color you'd like the chat icon to be when chat is available, e.g. "green" or "#008000". The default color is the primary system color (--sys-primary) set in your PrimoVE NDE theme.
    • iconOfflineColor: A color code string describing the color you’d like the chat icon to be when chat is unavailable, e.g. “black” or “#000000”. The default color is the primary system color (--sys-primary) set in your PrimoVE NDE theme.

    • iconPosition: Use this parameter to move the chat icon up or down on the page via a percentage value (e.g. "50%") or a specific pixel value (e.g. "200px"). By default, the chat widget appears in the middle of the page (“50%”). 

    • iconSize — The dimensions of your chat icon in pixels. The icon is a "60px" square by default.

    • server: The domain of the LibraryH3lp server where your subscription resides. The default is the domain for your add-on URL (see above).
      • Main US: "libraryh3lp.com"
      • Canada regional: "ca.libraryh3lp.com"
      • Europe regional: "eu.libraryh3lp.com"
      • Singapore regional: "sg.libraryh3lp.com"

    • showPresence — By default, a small dot is shown (true) as part of the icon which indicates chat availability. You may hide this presence dot by setting showPresence to false.

    • tooltipContent — Use this parameter to change the tooltip's content shown when hovering over the icon when chat is online. The default content is "Questions? Click to chat with us." HTML is allowed.

Below is an example of how an online chat icon might look. The chat icon is on the far right in the middle of the page.

FAQ URL: