Q. How is the Ask a Librarian widget inserted into OneSearch?

Answer

LibAnswers

A widget is configured in LibAnswers, LibChat - Chat Widgets. In Primo VE we use a "Floating"-type widget. "Floating" means that a chat icon appears on the screen with fixed positioning, i.e. it remains in the same position on the screen despite any scrolling, and expands/opens within the same screen when activated.

By default the floating widget uses a button with text. We use an icon in the widget. We store the image file (files differ per-college) in our LibGuides Image Manager.

Primo VE is a single-page application; in other words, in the course of a session, the page does not reload, so using the floating widget is practical. How exactly each college configures their widget varies.

LibChat widgets provide code in a particular format, namely a script element and a div element. It will tell you to put the following anywhere on the page:

<script src="https://answers.library.losrios.edu/load_chat.php?hash=3ed10430124d950ef2b216a68e1b18b"></script>

The purpose of the above snippet is to load Springshare-hosted JavaScript that will allow the widget to function.

Springshare gives you a second snippet like the following that they say should go where you want the widget to appear:

<div id="libchat_3ed10430124d950ef2b216a68e1b18b"></div>

When the first snippet loads its script, it will look for the above HTML element on the page.

Note that in each snippet a particular hash value (string) is given, in this case, 3ed10430124d950ef2b216a68e1b18b. Each LibChat widget has a unique hash value. We will use this string when we adapt the snippets for Primo VE.

Primo VE customization package

The above widget code will not work as-is in Primo VE, because

  • you can't insert a <script> element into the html files and
  • even if you could, that would only cover the home page, not e.g. search results pages.

So instead we need to adjust it to go into custom.js, and then style it in custom1.css.

custom.js

The following function creates the div and script elements and appends them to the bottom of the DOM (page). Note that even though we normally wouldn't want the widget to show in that place on the page, this doesn't matter, since we will be using CSS to make it show in a consistent spot.

It also delays the loading of the Springshare script by 2 seconds. Primo VE is a rather heavy load for browsers; the intention here is to allow more essential pieces to load before we load Springshare's scripts.

The code should go at the bottom of custom.js.

(function () { // load libchat
  var libchatHash = '3ed10430124d950ef2b216a68e1b18b'; // hash string goes inside quotation marks
  var div = document.createElement('div');
  div.id = 'libchat_' + libchatHash;
  document.getElementsByTagName('body')[0].appendChild(div);
  var scr = document.createElement('script');
  scr.src = 'https://v2.libanswers.com/load_chat.php?hash=' + libchatHash;
  setTimeout(function () {
    document.getElementsByTagName('body')[0].appendChild(scr);
  }, 2000);
}());

Note that our customization file looks slightly different than this, because we declare the value of the libchatHash variable at the top of the file, where we list other college-specific values.

custom1.css

Without further styling, the widget will cover the pager that appears near the bottom right of results screens.

So we add the following:

.s-lch-widget-float {right:80px !important;}

Alternatively, the above could be inserted in the chat widget editor, if we determined this method was easier/more convenient to maintain.

It may also be desirable to hide the widget on phones, since it will take up so much screen real estate. To do that, add a media query to the end of the file.

@media only screen and (max-width: 600px) {
  .s-lch-widget-float {display: none;}
}

  • Last Updated Oct 08, 2020
  • Views 14
  • Answered By Jeff Karlsen

FAQ Actions

Was this helpful? 0   0
Your Question
Your Info
Fields marked with * are required.