How to create a space booking widget
To create space booking widgets, go to Spaces > Widgets.
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.
- Go to Spaces > Widgets.
- From the Category dropdown, select the space category you want to use this widget for.
- Use the Width of Popup Window and Height of Popup Window fields to set the dimensions (in pixels) of the booking window.
- Use the Button Text field to customize the label that appears on the button.
- Use the Button Text Color, Button 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.
- 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.
- The Preview area will update automatically to reflect your customizations. You can even click on the widget to try it out!
- 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.