How to create a space booking widget

To create space booking widgets, go to Spaces > Widgets.

Navigating to the Space Widgets page


What are widgets?

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

Example of a space booking widget


Creating widgets

  1. Go to Spaces > Widgets.
  2. From the Category dropdown, select the space category you want to use this widget for. 
  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 in order 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. You can even click on the widget to try it out!
  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 these in a LibGuide? We recommend pasting the embed code in a Media/Widget asset. These make it easy for others to reuse the widgets in their own guides.

Example of creating a space booking widget 

Related Articles