Add a javascript-based chat widget to Primo

Written by

Nick Budak, Lewis & Clark College

Description

This a general how-to for adding a chat widget embed script to primo-explore.

System components

Package Manager/PBO

Skill set requirements

PBO, code/text editor

Accessibility

widget dependent

Mobile support

widget dependent

Implementation steps:

Link to code on GitHub

  1. Copy the above snippet into your local view package’s custom.js file. Let’s make some changes.
  2. Chances are, you already have the first line (var app=) we just copied in your custom.js. If so, make sure yours includes ‘chat’ in its list of dependencies (the part of the line in square brackets). Then, delete the one we copied over.
  3. Replace the fake url to your chat script (‘https://my.chat.site/chat.js’) with a real one. This will depend on the particular chat implementation you are using: slaask, for example, is https://cdn.slaask.com/chat.js, which LibChat widgets start with https://v2.libanswers.com/load_chat.php.
  4. Some chat scripts need to call a “startup” function after the embed code has been loaded. If you know you need to do this, read on for more information. If not, you’re done! Your code is ready to upload using the PBO package manager.

Extended implementation

The angularLoad service returns a promise which we can use to execute code after the script is finished loading. This is useful if, as in the case of a slaask chat, we need to call a “startup” function and bind the script to a particular unique id identifying the chat widget. Here’s an example using that technique, where we call the init()function once the script is loaded and pass it a unique ID.

Link to example code on GitHub