Implement a chat logo link in the new Primo UI header

Created by

Bill Kelm, Willamette University


This basically drops a graphic after the angular component ‘prmSearchBookmarkFilterAfter’, so you could pick any other component and use the same strategy. Originally we had this on the left side after ‘prmLogoAfter’, but ran into conflicts when creating a clickable logo. This was a simple example from Day 2 of the Primo New UI videos around the 20 minute mark.

Chat logo in the header of Willamette University's Primo

System components

Package Manager/PBO, Javascript

Skill set requirements

PBO, Javascript

Implementation steps

  1. Open the custom.js file in your local package. Found in the js folder.
  2. Insert the “Chat Area” code in this file, replacing the link in quotes with your custom link to reference assistance and the image call to the graphic you would like to be shown. Place the code above after this code which should be at the top of the file.
  3. Insert the code in this file into your custom1.css file, this is found in the css folder. We currently hide it if the screen width is less than 1250px.
  4. Save both your edited files and Zip and upload your local package to the Primo Back Office
  5. After you upload it, deploy your view