Tech Blog

Embedding SpringShare LibChat Widget into the Primo NU

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 (called a Slide-out in SpringShare’s documentation) 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


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)

My code is specific to the SpringShare “Slide-out” type of Widget.  It does not work with the “Embed” widget (according to an expert colleague).

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

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=""></script>


These instructions will not help you.  This is because you generated you code using the LibAnswers > Admin > Widgets & API “Create Widget” mechanism and I could not get that code to work here.  if you manage to do that, let me know.


If it looks like this (LibChat widget created using LibAnswers > LibChat > Chat Widgets):

<script src=""></script>


or this (Systems Status Management widget created using LibAnswers > Admin > Systems Status Management):

<script src=""></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=""></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://') + '';

                                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.


                "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://') + '';
                                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','');


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.

5 Replies to “Embedding SpringShare LibChat Widget into the Primo NU”

  1. We have been using the System Status Widget successfully in the new UI for many months. However, we are about to showcase our digital collections (Collection Discovery) and despite support cases with both parties, have not been able to resolve a conflict between the Systems Status widget and the gallery view in Collection Discovery.
    At this stage, it looks like we will have to revert back to using the standard pop-up widget before we can promote our digital collections. If a user chooses gallery view, the items in the collection disappear.

    We would love to hear from any sites that have the system status widget working with collection discovery.

    By Peta Hopkins on November 2, 2018 at 02:19 AM

  2. If you have a sidetab widget you created using the LibAnswers > Admin > Widgets & API “Create Widget” mechanism, you can still use the code generated there, but you will have to add the activator code to the end of it. For example, a right-sidetab requires the additional code ‘?activator=sidetab&sidetab_loc=right’.

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

    The CSS code for this is (according to Springshare):

    top: 40%!important;

    replacing XXX with the number your widget has in the widget overview (not the hash; a 4 digit Id number).

    But if I put this in custm1.css, nothing happens.

  4. Hello! I’m very new to this platform and to working with Alma/Primo VE. I’d like some clarification the steps. Do I drop the div code into my homepage_en.html file, and then add the chat button code into my js file?

  5. Hi Crystal.

    I am no longer at the institution where I developed this code and not really in a position to support it any longer.

    I recommend you post a question to the Primo Listserv and include the link to this blog post. Maybe someone at a current site can assist you. Also, it is possible there may be an easier way to do this integration now (again, I am not in a position to say).


Leave a Reply