FAQ content

Equipment: Create a booking widget

In this article

Booking widgets allow your patrons to book equipment items from outside of your LibCal bookings page. With just a little embed code, you can add a button to your library website, LibGuide, or just about any other page. You can customize the dimensions, text, and colors of the buttons to help them blend in with the rest of the page. When a patron clicks on the button, a window will pop up allowing them to book items from within a specific location. 

As an alternative to embedding a button, you can also generate a direct link to the widget that can be embedded via an iframe (provided during the setup) or linked to from any page.

equipment booking widget example
The Equipment booking widget can be configured to show items from all categories in a location or a specific category.

Create a button widget

To configure an equipment booking button-based widget:

  1. Click on Equipment in the command bar.
  2. Select the Location you wish to view.
  3. Click on the Widgets tab.
Navigating to the Equipment Widgets page
  1. Select the Button that shows popup/modal option for the Widget Type.
  2. From the Category dropdown, select the equipment category you want to use this widget for. 
    • Select "All Categories" to add a Category selection to the widget.
  3. Use the Width of Popup Window and Height of Popup Window fields to set the dimensions (in pixels) of the booking window.
  4. Use the Button Text field to customize the label that appears on the button.
  5. Use the Button Text ColorButton Background Color, and Button Border Color to customize the colors of the buttons.
    • Click inside the field and use the built-in color pickers to select your color. Or, if you already know the hex code of the colors you want to use, you can enter them into each field.
    • To make sure that your button is accessible, use a text color and background color with an acceptable contrast. There are some helpful free contrast checkers you can use (such as from WebAIM) to find a good combination.
  6. These widgets require the jQuery JavaScript library to work. Select the Include jQuery Library checkbox if you will be embedding your widget in a page that does not include jQuery.
    • NOTE: all Springy tools include jQuery on every page. Do not include jQuery with your widget if you will be embedding it in LibGuides, LibAnswers, etc.
  7. The Preview area will update automatically to reflect your customizations.
    • Click on the button to test the widget.
  8. When you're done customizing your widget, copy the HTML code from the Embed Code text box and paste it into the HTML code of your webpage.
    • Using this in a LibGuide? We recommend pasting the embed code into a Media/Widget asset. These make it easy for others to reuse the widgets in their guides.
  9. If you want to make additional changes to the look and feel of the widget, you can copy the CSS code, make your desired changes to the button style, and paste the updated CSS code alongside the embed code for the widget. Skip this step if you want to keep the default button styling. 🤓
Example of creating a equipment booking button widget

Generate a direct-URL widget

To create an equipment booking widget URL:

  1. Click on Equipment in the command bar.
  2. Select the Location you wish to view.
  3. Click on the Widgets tab.
Navigating to the Equipment Widgets page
  1. Select the URL that can be directly embedded option for the Widget Type.
  2. From the Category dropdown, select the equipment category you want to use this widget for. 
    • Select "All Categories" to add a Category selection to the widget.
  3. Copy the Embed Code text box and paste it into the HTML code of your webpage.
    1. Alternatively, you can copy the Embed URL if you want to configure your embed code or if you want to link directly to the widget.
Example of creating a equipment booking URL widget