Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

In this How To guide, we will be showing you how to embed Appointment booking functionality in CCLE and other pages/apps.

Image Modified

First, you will create a widget in LibCal. From your appointment page, click on "Widget/Embed Code".

Image Modified

Here, you have some options. You can change what the button will say by changing the "Button Text" (it defaults to "Schedule Appointment").

Image Modified

You can also change the default colors (black, grey, and white). You'll see the changes appear on the preview button.

Image Modified

Important: Do not include a jQuery Library if you are embedding this button in a LibGuide. It will break the functionality of your research guide (you won't be able to edit it anymore) and Springshare will have to assist you in fixing it.

Image Modified

Once you have styled your button as you like it, copy the embed code. You can place this embed code in a number of places.

Image Modified

If you would like it to be linked to your account in LibGuides, go to your account box and click the pen in the top right corner.

Image Modified

Scroll down. Copy and paste the embed code into the LibCal Widget Code box. It will now appear in your profile as seen above.

Image Modified

Now, you can simply map this profile box to your LibGuide and it will appear in your guide. Click "Add Box". For the type of box, choose "Profile". Now, type your name. Click save.

Image Modified

Your profile box with Schedule button is now embedded in your LibGuide.

Image Modified

Similarly, you can embed this button in CCLE by switching your editing to Source/HTML instead of regular text editing. (In
CCLE
Canvas, it's called HTML. In LibGuides, it's called Source.) HTML editing is usually represented by the symbol </>. Once you paste your embed code and switch back to regular text, you will see your Schedule Appointment button.

Image Modified

Note: if you're in
CCLE
Canvas, it may not have proper styling at this point.

Image Modified

Once you click "Save and Display", you'll see it properly styled.

For assistance with the LibCal widget, please submit a Jira ticket to the LibApps team. Thank you!