Ready to Learn?Ex Libris products all provide open APIs

Tech Blog

 

Embedding SpringShare LibChat Widget into the Primo NUI

Laura Guy on November 30th, 2017

Springshare provides several ways to create "widgets" that can be embedded into websites, including Primo, in order to provide access to products like LibAnswers and LibChat.  This is a great way to engage your patrons and provide a high level of service at the point it is needed.

This Tech Blog post would not be possible without the help of numerous Primo customers. I also benefited greatly from Springshare's assistance. Any errors, however, are mine.

This Tech Blog post applies to Version 2 of Springshare products.

As an example, the code in this blog entry can display a sliding tab that looks like the following screenshot on all Primo pages. When you click the tab, it opens a simple Chat form:

Note that you may want to use CSS to control the location of the tab.  That is beyond the scope of this blog entry.

 

This blog entry addresses the embedding of code for Springshare LibChat into the Primo NUI, including Primo VE (the platform here).

It assumes familiarity with the Springshare documentation for creating Chat Widgets via either:

LibAnswers > LibChat > Chat Widgets

or

LibAnswers > Admin > Systems Management Status

(the above are two different ways to generate Widgets to be used in web pages; the first one is easier, the second more complicated)

 

Please see the relevant Springshare documentation before attempting this Primo customization (you will need to login to LibApps to access Springshare documentation). For example:

https://support.springshare.com/libanswers/libchat/widgets

 

This blog post also assumes familiarity with the Primo customization package and its management.  You will be working with the custom.js file in your Primo customization package.

This blog post does not necessarily apply to all the Springshare mechanisms for creating Widgets (of which there are several).  Rather it applies specifically to the LibChat Widgets and to the Systems Management Status Widgets.  You will note that these two kinds of widgets have different advantages and disadvantages, and use different code in Primo as you will see in the following.

The following is an example of the Springshare LibChat Widget creation Window. This is where you create a basic LibChat widget:

 

Note that if your Springshare widget link code looks like this:

<script src="https://api2.libanswers.com/1.0/widgets/7296"></script>

These instructions will not help you.

 

If it looks like this (LibChat widget):

<script src="https://v2.libanswers.com/load_chat.php?hash=55eee157e2491afb8403c71d7c181961"></script>

 

or this (Systems Status Management widget):

<script src="https://api2.libanswers.com/1.0/feedback/widgets/3514?activator=sidetab&sidetab_loc=right"></script>
 
Read on!
 
 

Simple LibChat Widget

 

First, create your Chat Widget using the configuration wizard.  Once that is done you can use the View Widget Code button to copy the code for embedding into your Primo NUI custom.js file:

 

You will only need the first of the two pieces of this code to embed into your custom.js file, for example:

<script src="https://v2.libanswers.com/load_chat.php?hash=55eee157e2491afb8403c71d7c181961"></script>

 

Whereas in a "normal" web page you can paste that code into your HTML directly and have the (in this case) sliding tab work, in Primo the customization file does not accept script tags, so that's why that method will not work. Primo is looking for the actual JavaScript functions.  So you can't simply paste the script code into your custom.js file.

Instead, use the following code example and insert your institution-specific code as generated by the Springshare widget-maker into this:

 

 

 

                // Adds the chat button

                (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=55eee157e2491afb8403c71d7c181961';

                                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);

                })();

// End the chat button

 

(Please do not embed our institution-specific hash code into your script!)

 

You can then embed that institution-specific code into your custom.js file. 

 

 

Please note that the code is placed inside of the “use strict” function in your customization package's custom.js file.
 
(function(){

                "use strict";

                "use strict";

 

 

//code here

 

})();

 

 

Mines decided to put it at the bottom of our file.  So the bottom of our custom.js file looks like this:

 

 

/*----------below is the code for libchat-----------*/
                // Adds the chat button
                (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=55eee157e2491afb8403c71d7c181961';
                                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
                })();

/*---------------libchat code ends here---------------*/

})();

   

 

 

Systems Status Management Widget

 

This method of creating a widget is more complicated.  Its output is far more comprehensive than the more simple LibChat widget.

 

First, create your Systems Status Management Product and its associated widget:

 

 

Then, using the Widget Embed Code at the bottom of the Window:

 

 

 

Modify the following code with your institution-specific code:

 

    // LibAnswers System Status widget
    
(function(s,o,g,a,m){a=s.createElement(o),m=s.head;a.async=1;a.src=g;m.appendChild(a);a.onload=function(){ var x=document.getElementById('s-la-widget-activator-3514');x && x.firstElementChild.removeAttribute('href');};})(document,'script','https://api2.libanswers.com/1.0/feedback/widgets/3514?activator=sidetab&sidetab_loc=right');
 

Follow the previous instructions for placement.

 

Please do not use our institution specific code!

 

In this example, you can have a much more comprehensive Feedback and Help form along withn your Chat function, as opposed to a simple Chat form as in the previous example.

 

 

You can choose which option is best for you.