Skip to main content

Widgets: Events List

Using the Events List Widget in CourtReserve

Mari Bern avatar
Written by Mari Bern
Updated over 3 weeks ago

INTRODUCTION

Feature Summary: The Events List widget allows clubs to display a scrollable list of upcoming events directly on their website or other platforms, such as a front desk smart TV. This widget offers players and visitors a simple way to view event details, check availability, and register — all without logging into the full member portal.

Note: Widgets are designed to run in a web browser. For example, system users can copy and paste a widget link onto their website or display it on a front desk smart TV. If a widget link is tapped inside the CourtReserve mobile app or branded mobile app, it will open in the device’s default browser, where players will interact with the widget.

Use Cases:

  • Display a list-style view of all upcoming events for easy browsing on the club website.

  • Allow players to register directly for classes, clinics, and social events.

  • Embed the list on front desk monitors to showcase upcoming activities to walk-ins and visitors.

  • Highlight registration availability and remaining spots to help drive participation.

Note: Widgets can be configured with multiple filters to control which events are displayed. If you're unsure why a specific event isn't appearing, verify that the "Public Embed Codes/Widget" option is enabled on the event’s Event Setup tab.


For a high-level overview of how widgets work in CourtReserve, start with this article.


NAVIGATION

Log in to the admin dashboard.

  1. Click SETTINGS on the side menu.

  2. Scroll down to the WIDGET row heading.

  3. Select the Events List.​


Create an Events List Widget

Click the green Create Widget button to get started.

  • Widget Type: Defaults to Events List.

  • Name: The internal name for the widget. Helps identify and organize your widgets inside the admin portal.

  • Filter Calendar by Categories: Allows you to filter the calendar display by event categories or event filters, showing only selected types of events.

  • Hide Title Bar: Option to remove the widget’s title bar entirely from the display.

  • Title Bar Label: The text that will display on the title bar.

  • Main Background Color: Sets the background color for the entire widget display area.

  • Title Bar Background Color: Sets the background color for the widget’s title bar.

  • Title Bar Font Color: Sets the font color of the text displayed in the title bar.

  • Allow Filtering: If enabled, users can select to apply filters within the widget. In this widget, the filters are standard event filters (categories, tags, etc.).

  • Show SignUp Button: Displays the registration or sign-up buttons for eligible events or bookings directly within the widget.

  • Show Event Cost: Displays the cost for each event, so players can see the pricing information before registering.

  • Show Remaining Spots: Shows how many remaining spots are available for each event, giving players visibility into event capacity.

  • Hide Full Events (No Remaining Spots): Hides events that are already full (i.e., no remaining spots available), so players only see events that still have availability.

  • Show Featured Only: When selected, the widget will display only the events marked as "Featured" in your event setup.

  • Event List Display Type: Controls how events are visually displayed in the list:

    • Grouped (Show Upcoming Dates Link): Groups recurring events together as a single entry on the list. Instead of listing every individual session, players will see one grouped event with a link to view all upcoming dates.
      Best for simplifying long lists and reducing clutter when events repeat regularly.

    • Expanded (Show Each Occurrence on the List): Displays every individual occurrence of the event as its own separate entry on the list.
      Best for clubs that want players to see all available dates and times at a glance.

  • Custom CSS: Optional field where custom CSS styling can be applied to further customize the widget’s appearance. Learn more here.

  • Test Your Widget (Link): Provides a direct link to preview and test how the widget will display live.

  • Widget Code: Auto-generates the embeddable code that can be copied and inserted into your website to activate the widget.

  • Copy Widget Code (Button): Quick button to copy the full embed code to your clipboard for easy website placement.​


USER PERSPECTIVE

Example of Events List widget with Event List Display Type of Grouped. Recurring events show "View Upcoming Dates" link.

Example of Events List widget with Event List Display Type of Expanded. It displays every instance of upcoming events.


Related Videos

Did this answer your question?