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 Form | If 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 Settings | The Summary tab of each Class record contains several settings you should consider before listing your classes online:
|
| Listings Tables Settings | There 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).
|
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 Method | If your website builder doesn't play nicely with JavaScript, for example, Wix, use the Direct Method.
|
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!
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 Listings | Use 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 Listings | Seven 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 Listings | Hide any of the twelve columns of information that are included in the basic Online Class Listings table. |
| Sort Rows in your Online Class Listings | Once 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. |
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.
