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 LibChat "floating" widgets go at the bottom-right of the page by default, using fixed positioning.

Note that you could use this same approach with a LibChat "button" widget, and then apply fixed positioning in the CSS file to make it "float" at the bottom-right of the page.

We use Alma-D and are excluding the widget from appearing in Alma-D viewer pages.

Our script 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. You will need to edit the values of libchatHash and scr.src.

(() => {
	const libchatHash = 'c5c1abe3b80e070681d3fa045fc19b'; 
	const almaDStr = `https://${location.hostname}/discovery/delivery/`; // indicates Alma-D viewer
	const div = document.createElement('div');
	div.id = 'libchat_' + libchatHash;
	document.getElementsByTagName('body')[0].appendChild(div);
	const scr = document.createElement('script');
	scr.src = 'https://answers.library.losrios.edu/load_chat.php?hash=' + libchatHash;
	setTimeout(() => {
		if (location.href.indexOf(almaDStr) !== 0) {
			// don't include in Alma viewer
			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. (However, here we looked at referrals and found that about 10% of our chats from Primo VE came via mobile, so we are including them. 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 Jun 15, 2023
  • Views 1006
  • Answered By Jeff Karlsen

FAQ Actions

Was this helpful? 9 0

Comments (1)

  1. Thank you for this. It worked!
    by Mark Nelson on Mar 19, 2024