LibCal Booking Consultations Interface - ucsf-ckm/ucsf-library-ux-and-web-documentation GitHub Wiki

The default approach requires linking to a separate page in LibCal.

NOTE: If someone want to share the default LibCal pages, they are organized by location (Online is a location). Each location must have groups assigned to it and individuals manually added to those groups. This is clunky and can get out of date easily. To edit these areas: LibCal > Admin > Appointments > Manage Locations

We have adapted the LibCal widgets code snippet to present a more elegant appointment pop-up right on the expert page when the user clicks Book a Consultation. This allows the user to see all the relevant context and information.

1. LibCal admin must enable appointments for the individual staff member LibCal > Admin > Accounts
2. That staff member must then set up their personal availability and enable sync with Outlook
3. LibCal admin must copy the ID number now attached to that staff member from Admin > Accounts

Once in the editing screen, the ID number is displayed at the end of the URL

A new code snippet must be created for the new staff member. Everything is the same as for the others except the ID number which must be inserted in a few places.

<!-- for Scott ID 48953 -->

<script>
jQuery(function(){
   let el = jQuery("#mySched48953");
   if (el.length) {
     el.LibCalMySched({ iid: 138, uid: 48953, gid: 0,  width: 500, height: 450, title: "Book a Consultation" });
   }
});
</script>

Those snippets are saved in a hook within the Generate Press theme for WordPress which we are using for the main library site Dashboard > Appearance > Elements > Legacy Hooks > After Content

<script src="https://api3.libcal.com/js/myscheduler.min.js?002"></script>

To get the code snippet to fire, mySched9794 (using the correct ID number for the individual staff member) has to be added to the Book a Consultation button in the CSS ID field (within the editing interface for the Elementor page builder plugin)