Service Hours Widget
This widget provides departments with a clear, consistent way to communicate service availability for a variety of needs, including regular business hours, drop-in services, field response services, and other scheduled operations.
It is designed to improve the visitor experience by helping users quickly understand when and how to access a service. The live widget on the right demonstrates how this information appears on a page.
At a glance, the widget provides:
- Current availability and closing time
- Today’s hours
- Weekly schedule
- Upcoming closures and schedule exceptions
- Location or other service details
Setup and Permissions
Initial Setup
To request setup, create a Jira ticket by emailing support@sait.ucla.edu.
Who Can Manage
Users with the Publisher role have full access to Hours widgets.
How to
Create the Widget ⚒️
- Log In. Add /node/add to the end of your website URL. For example: yourwebsite.ucla.edu/node/add
- Select Hours Block. Follow the instructions on the Create Hours Block page to configure your Hours widget. See the Helpful Tips below for additional guidance.
- Review and Publish. Use the “Preview” tab to review your widget and make changes as needed. When ready, select “Published” under “Save as,” then click “Save.”
Your Hours widget is now published and ready to add to a page.
Helpful Tips
- Service Name: The only required field. This is the name used to identify your widget. If you create multiple Hours widgets, use a consistent naming convention, such as “Hours: Regular Hours”. Uncheck “Show the title” if you don’t want the service name displayed on the page.
- Weekly Schedule: Click “+ Add interval” to add another time period. Saturday and Sunday display as closed by default; click “+ Open this day” to add hours.
- Upcoming Exceptions: Check “Close on dates from a calendar” to automatically apply university holidays - no need to enter them manually.
Embed and Edit on a Page 📃
To embed the widget: Open the page and place your cursor where you want the widget to appear. Click the “Custom Embed” icon, select the widget, and complete the embed process. Preview the page to confirm everything looks correct, then save your changes.
To edit the widget: Double-click the widget and select “Edit Custom Embed.” This will open a new browser tab where you can make your edits. When finished, be sure to save both the widget and the page to apply your changes.
Find an Existing Widget 🔎
You can find the widget under the “Content” tab. Look for the widget name with the “Hours Block” content type, or use the content type filter to quickly locate it.
Content Guidelines
- Keep labels short and clear, such as “Regular Hours,” “Drop-In Hours,” or “Walk-in Hours”
- Add date ranges for seasonal or short-term schedules
- Use notes only when extra context is needed
- Review the page where the widget is embedded after saving changes
- Remove expired schedules to avoid confusion