Online Class Listings (Tables)

Online Class Listings display information about your class offerings on your web pages, organized in a user-friendly table format (columns and rows).  

  • Families always see current class information because it is automatically updated in REAL-TIME. There's no need to remember to make manual edits on your website each time you update a class!
  • Customize the listings tables to showcase your classes and increase enrollment. Decide which columns of information are shown, the order classes are sorted, the color of the background...and more.
  • Add a registration link for each class in your listings tables. With just a click, your Online Registration Form opens for your customer with the class preselected for enrollment. 
  • Online Class Listings are mobile-friendly and will responsively transform on mobile devices if your website is optimized for mobile viewing.

We recommend downloading, printing, and reviewing Online Class Listings - Checklist for a Successful Rollout.


Before you Get Started - Settings

Before starting with your Online Class Listings, make sure your Online Registration Form has been set up, your classes are ready to go, and you have set your Online Class Listings Tables settings. 

Online Registration FormIf you allow online enrollment, your customers can access the Online Registration Form from the registration link in your Online Class Listings. Customizing the form before taking your classes online is recommended.
The settings used to customize the form are located under the Gear (icon) > Settings > Online Registration. They include defining what information will display about your classes, whether or not you will allow waitlists, and more. See Customize Your Online Registration Form for details.
Class SettingsThe Summary tab of each Class record contains several settings you should consider before listing your classes online:
  • Class Status = anything EXCEPT Completed, Archived, or Inactive.
  • Class Registration Start Date. This is the day you want to open online registration. If the field is left blank, registration is opened immediately. If the date is in the future, the class will not appear in the class search on the Online Registration Form, and the live Register link will not display in the listing table until that date arrives.
  • Classes you want to be included in your Online Class Listings must have Display on Website set to YES.
  • If you want your classes available for online enrollment, set Allow Online Registration and/or Allow Portal Enrollment set to YES.
Listings Tables SettingsThere are two settings specific to the Online Class Listings to review. They are located in the Class Listings Tables on your Website section of the Online Registration settings (Gear icon >Settings > Online Registration).
  • To allow customers to register directly from your class listings tables, set Show 'Register' Links to YES.
  • If you want full classes to be included in your listings, set Show Full Classes to YES. The classes will appear, but they will not contain a registration link when they are full.

Step 1 - Add the Basic Online Class Listings Table to your Website

The basic (default) Online Class Listings table includes twelve columns of information displayed in this order: Registration, Class, Description, Days, Times, Gender*, Ages, Openings, Class Starts, Class Ends, Session, and Tuition. The column order cannot be changed. 

*If you have gender hidden in Jackrabbit, the Gender column will be automatically omitted from the class listings table.

There are two methods of adding Online Class Listings to your website. 

JavaScript Method

JavaScript embeds the class listings tables directly on your web page. The website builder you use must support JavaScript; most of them do (e.g., GoDaddy, Squarespace, WordPress).
Direct MethodIf your website builder doesn't play nicely with JavaScript, for example, Wix, use the Direct Method.
  • Option A - Link
    The listings table doesn't display directly on your webpage. Instead, a link opens a new page with a blank white background, and the table is located there.
  • Option B - iFrame
    A website address (URL) or HTML code can be added to an inline frame on your web page. The listings table will display in the frame.

Codes for the Basic Online Class Listings Table

Use the corresponding code for the method you'll use to add Online Class Listings to your website. Make it quick and easy by copying and pasting the codes from the boxes below!

Replace the XXXXX with your Organization ID. Your Organization ID can be found under the Gear icon > Settings > Online Registration.

JavaScript code:

<script type="text/javascript" src="https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJS?OrgID=XXXXXX"></script>

Direct code:

https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsDirect?OrgID=XXXXXX

Direct code for a hardcoded website:

<a href="https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsDirect?OrgID=XXXXXX" target="_blank">View our Class Listings</a>

This example uses the text View our Class Listings for the display link, but you can change this to any text phrase.

Visit Website Editor Tutorials to watch short videos demonstrating how to add Online Class Listings to some of the most popular website builders.

Step 2 - Customize your Online Class Listings

Online Class Listings are highly customizable. You can control what class information is shown, add a background color, create separate listings tables using filters, sort the listings in a particular order... You get the idea!

Things in this section can start to seem very 'techie', so let's use this analogy. Think of the code for the basic Online Class Listings table as a bowl of ice cream. The parameters and targets that are used to customize the class listings are the toppings you can add to your ice cream. You can use as many toppings as you like, adding them until your bowl of ice cream looks and tastes the way you want.

The parameters and targets (toppings) are added to the end of the basic Online Class Listings table code (ice cream) directly after your Organization ID without any spaces between.

Example

In this example, we'll take the basic class listings table code and filter it to show only one instructor (Ms. Livy - ID #580421). We'll also hide the class description column and show the instructor column. The Organization ID is 555555.

Basic Listings Code
JavaScript Method
<script type="text/javascript" src="https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJS?OrgID=555555"></script>
Filter Parameter&InstructorID=580421
Hide Column Target&hidecols=Description
Show Column Target&showcols=Instructors
Custom Listings Code
JavaScript Method
<script type="text/javascript" src="https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJS?OrgID=555555&InstructorID=580421&hidecols=Description&showcols=Instructors"></script>


Use the links below to find instructions for the customizations you want to make to your Online Class Listings.  

TIP: To view live examples of Online Class Listings, go to Client Website Examples and follow the instructions for getting to the registration pages for each website.

Filter (Group) Your Online Class ListingsUse filters to show only a specific group of classes. This should be done before any other customizations.
Example: You have enrollment open in the current Session and want to open enrollment for the upcoming Session, and you'd like to keep the tables separate. You can create two listings tables and use a filter to show a particular Session in each one.
Show Columns in your Online Class ListingsSeven columns of information can be added to the twelve columns included in the basic Online Class Listings table. They are Location, Category 1, Category 2, Category 3, Instructors, Duration, and Room.
Hide Columns in your Online Class ListingsHide any of the twelve columns of information that are included in the basic Online Class Listings table.
Sort Rows in your Online Class ListingsOnce you have customized the information that will be included in your class listings, you can specify the sort order of the classes.
Customize Scroll Bars and Colors
Advanced
If you are familiar with using <div> rules, there are a few you can apply to your scripted tables.
Tricks for Query Strings
Advanced
There are a few special tricks that can be achieved by adding these advanced parameters to the end of a query string.
We have compiled a list of talented developers with experience working with Jackrabbit integrations if you need help with your website customizations. Check out our Website Developer Referrals.

Frequently Asked Questions

Q.  How does the new registrant add Class #2, Class #3, etc., when using the Online Class Listings?

A.  The class listings will pre-fill the selected class into the Registration Form in the Class #1 position.  To enroll in additional classes at the same time, the new registrant must use the Select Another Class button on the Registration Form (under the class previously selected). It is not possible to select multiple classes directly from the class listings tables. See Modify the Online Registration Form Class Search Page page for more details.

Q.  Can I have waitlists and make-ups reflected in the number of openings in my Online Class Listings?

A.  Yes! Go to the Gear icon > Settings > Online Registration > Settings (left menu) > Class Search Settings (section), and you can choose to allow a waitlist when the class is full. Also, you decide which conditions should be taken into consideration when the system is determining the remaining number of openings shown for new enrollees.  

  • Set Allow Waitlist When Class Full to Yes.
  • What impacts the number of Class Openings? Set the Waitlist and Makeups rows to Yes for Online Registration to have waitlists and makeups considered when new families register online.  

Q.  How do I access the HTML in my Content Management System?

A.  See Access CMS Source Code - HTML Mode for examples of how to toggle to HTML mode in several CMS systems.

Q.  I have a Wix website, and the class listings tables are not displaying correctly on mobile devices. What should I do?

A.  Wix editors automatically place our class listings table code into an iframe (this is outside of Jackrabbit's control). You must use the Direct Method and add that code to the iframe in Wix. Watch a short video tutorial.

Please reach out to our Integration Assistance team for further assistance!


Our Online Integration Specialists are here to help! See Integration Assistance for their contact options.

-->