Create Custom Class Listings Tables in 4 Steps

If scripting is available in your website editor, you can use the following "JS (Javascript) Method" to work with your Class Listings Tables.

If your WebHost does not allow scripting tags  (such as <script> ), you may still be able to use class listings tables using "Direct Method". See Class Listings Tables Without Javascript to learn more.

Step 1: Enrollment forms are ready to use:

Ensure your Registration Form is completely set up and ready to use, so that new customers can register and enroll in classes via the tables.  See the Online Registration Form sections.  Ensure your Parent Portal is completely set up and ready to use, so that existing customers can enroll via the tables. See the Parent Portal section. (you may skip this step only if you are prohibiting all online enrollments).

Step 2: Classes are ready:

Ensure the following:

  • Classes that you want to be shown in the table have 'Display on Website' set to YES (near the bottom of their Class Summary tab)
  • If you also want them available for online enrollment, they should also have 'Allow Online Registration' and/or 'Allow Portal Enrollment' set to YES (near the bottom of their Class Summary tab).
  • If you want to allow enrollment from the tables, set 'Show "Register" Links' to YES (Gear icon > Settings > Online Registration > Settings > Class Listings Tables on your Website section)
  • If you want Full classes shown, set 'Show Full Classes' to YES (Gear icon > Settings > Online Registration > Settings > Class Listings Tables on your Website section). Note: They will not contain a Register link when they are full.
  • If you want Waitlists links for full classes, also set 'Allow Waitlist When Class Full' to YES (Gear icon > Settings > Online Registration > Settings > Class Search Settings section).
  • If you plan to show the Category columns in the tables, consider relabeling them to more descriptive, meaningful terms. (Gear icon > Settings > Online Registration > Settings > Class Search/Filter Settings). 

Step 3: Start with your "default" table (not yet customized):

Always start with the standard table code which is given below. This code will display all of your active classes in one table, with these headers (later steps will show you how to customize the columns):



If you can copy/paste the code in this gold box into your website editor (in the HTML or Source mode), you can do this! 

The gold box below contains the full script needed to embed a table onto a webpage. The most important part of the code is the src (source). The URL there determines what is shown in the table. 

Refer to Access CMS Source Code - HTML Mode for more detailed information about working in HTML mode.


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

Replace the XXXXXX with your specific Organization ID! (Gear icon > Settings > Online Registration - it is shown in blue).

The table will automatically shrink or stretch to fit within your content area, and it will also automatically take your webpage's background color!

Step 4: Create customized, grouped tables:

After you have successfully completed Step 3 above, you may want to customize this table with the following options: 

  • Split one big table into several smaller tables by "filtering".  See Filter (Group) Your Class Listings Tables.
    Examples include:
    By Program: Suppose you run a Dance school. Perhaps you'd like to show all your Ballet classes on your Ballet webpage, and all your Jazz classes on your Jazz webpage, and your Tap classes on your Tap webpage. Using your Cat1, Cat2, or Cat3 codes, you can easily divide out your classes by Program or Level.
    By Session: You may need or want to show your Fall Classes in a separate table than your Winter classes. You can easily filter by session to do this.
    By Location: If you have multiple Locations (Loc codes) in your database, you can separate your classes by Location easily. You can even do all three of these at the same time: Display only your Ballet classes for the Fall session at location Smithville, for example.
  • Choose from 19 available columns of information to display. See Hide Columns in Your Class Listings Tables and Add Columns to Your Class Listings Tables to learn more.
  • Specify the sort order of the classes going down the page. See Sort Rows in Your Class Listings Tables.
  • Add scroll bars and select custom colors for your tables. See Customize Scroll Bars and Colors in Your Class Listings Tables.


Frequently Asked Questions

Q.  Can I see which classes will show up in my class listings table before I add it to my webpage?

A.  Yes, you should always check the validity of your code first by previewing the URL section of your code in a browser. To view the table results in a browser (outside your website), replace the OpeningsJS part of the code with OpeningsDirect and paste the entire URL (starting with HTTPS) into a browser window. For an example, see the video for filtering.

Q.  Can I use HTML tags in Class Name, Class Description, Event Name, etc?

A.  Can I use HTML tags in Class Name, Class Description, Event Name, etc?

Q.  I use a CMS editor and need a plug-in or an API, is this available with Jackrabbit?

A.  Sorry, Jackrabbit does not offer plug-ins. However, we do offer a class listings JSON API. This will provide your website programmer the raw class data in JSON format. Your programmer can use the API to build your own custom UI for the class listings (programming is required and is not provided by Jackrabbit).

Q.  Some of my classes are not showing up in the table, or, the code just isn't working, what should I do?

A.  Make sure the class meets all the filter criteria you are using in your code, and that the Class Summary tab has "Display on Website=Yes", and that the class has openings, etc. Make sure your target parameter value names in the code match exactly to those in your database. Make sure the Start and End times are correct format. Make sure the value names don't contain special characters. 

Are you still having a problem? Contact the Integration Specialist from the Integration Assistance page.

Q.  The table is showing, but the Register column is missing - where is it?

A.  Go to the Gear (icon) > Settings >  Online Registration > Settings (left menu) > Class Listings Tables on your Website, set to YES, and click Save Changes. Then refresh your webpage.

Q.  The Register column is showing, but, there are no Register hyperlinks in the column - where are the links?

A.  The links will automatically appear just after midnight, local time, on the "Registration Start Date" listed for each class. Leave the Registration Start Date blank, or using today's date, will make the links show up now.

The register links are a standard blue color (#0000FF). If you want the links to be a different color, you will need to edit the CSS that controls the color of your website links. This rule typically looks like a: link {color: #0000FF;} in your CSS and you will need to edit the hex color. Jackrabbit does not control your web editor settings.

-->