All Collections
Customize the Appearance of your Schedule
Can I embed a filtered view on my website?
Can I embed a filtered view on my website?

Warning - Advanced embedding topic! This is how you can embed a filtered view of your schedule.

Leah avatar
Written by Leah
Updated over a week ago

There are situations where you might want to embed a FILTERED view of your schedule on your website.  

For example, maybe you have a page about a specific class, and you could embed the schedule for that class on that page.  

This takes a little bit of copy/paste URL magic...but is relatively straightforward.  


Examples of filters you can create


Getting Started

Your embed code can be found in Manage Settings > Embedding Punchpass.

A word of warning: Because Punchpass does not have access to your website, we may not be able to help with this. So it's highly recommended you find someone who is comfortable with manipulating the elements of a website.


Embedding a specific class type

Step 1 - Get the URL for the filtered view

From the public calendar view, use the class dropdown menu to select the class. Copy the URL for the resulting view.

In this example, the filtered URL for the Broadway Dance classes is:

https://rapidfitness444.punchpass.com/calendar?course=112560


Step 2 - Add the filter to the source URL


Now add the class filter, the part of the URL that reads: ?course=# where the number is the value copied above, to the iFrame source URL.

Your embed code can be found in Manage Settings > Embedding Punchpass.


For a filtered calendar the URL becomes:

https://rapidfitness444.punchpass.com/calendar?course=112560&embed=true

For a filtered schedule the URL becomes:

https://rapidfitness444.punchpass.com/classes?course=112560&embed=true

Please make sure to retain the &embed=true at the end of the URL, this will hide your logo and the navigation on your website.

Step 3 - Replace the URL in the embed code:

Leave the " " marks - just swap the URL - the highlighted part below:

The updated URL for the filtered schedule view is now:

<iframe name="frame2" src="https://rapidfitness444.punchpass.com/classes?course=112560&embed=true" height="700" width="100%" frameborder="0" allowfullscreen></iframe>


That's it! Now you can take that embed code and put it on your website.

Embedding a specific location type

You may be using your locations filter for class locations or you may have customized it to segment your classes in other ways (so it might have a different name now).

Either way, here's how to embed a filtered version of your schedule using the "Locations" filter:

Step 1 - Get the filter

From the public calendar view, use the class dropdown menu to select the location. Copy the URL for the resulting view.


In this example, the filtered URL for the Studio A location is:

https://rapidfitness444.punchpass.com/calendar?location=Studio+A 

Step 2 - Add the filter to the source URL

Now add the location filter, the part of the URL that reads: ?location=[text] where the text is the name of the location, to the iFrame source URL.

Your embed code can be found in Manage Settings > Embedding Punchpass.

You'll also want to add &embed=true at the end of the URL, this will hide your logo and the navigation for the embedding.

For a filtered calendar the URL becomes:

https://rapidfitness444.punchpass.com/calendar?location=Studio+A&embed=true

For a filtered schedule the URL becomes:

https://rapidfitness444.punchpass.com/classes?location=Studio+A&embed=true


Step 3 - Replace the URL in the embed code:

Leave the " " marks - just swap the URL - the highlighted part below:

The updated URL for the filtered schedule view is now:

<iframe name="frame2" src="https://rapidfitness444.punchpass.com/classes?location=Studio+A&embed=true" height="700" width="100%" frameborder="0" allowfullscreen></iframe>


That's it!  Now you can take that embed code and put it on your website.


Hiding all filter dropdowns from your embedded schedule

When you're embedding Punchpass, you might wish to hide the various dropdown menus. Here's how to set that up:

Step 1 - Copy the embed code for your desired view

Your embed code can be found in Manage Settings > Embedding Punchpass.

Step 2 - Replace the URL in the embed code:

To hide all of the filters, you'll be adding &hidefilter=true to the iFrame source URL.

The updated URL for the filtered schedule view is now:

<iframe name="frame2" src="https://rapidfitness444.punchpass.com/classes?embed=true&hidefilter=true" height="700" width="100%" frameborder="0" allowfullscreen></iframe>


Filtering the schedule to show only the classes on a specific date

Step 1 - Copy the embed code for your desired view

Your embed code can be found in Manage Settings > Embedding Punchpass.

Step 2 - Update the source link to the specific date range

To show only the classes on a specific date, you'll set from_time= and to_time= to limit the range of dates shown.

For example, to show only the classes on July 15, 2023, if I set the from_time = 'July 15, 2023' and the to_time = 'July 16, 2023' this will limit the classes. Please note that the dates should be written as above and the browser may rewrite them to look slightly different.

Here is the resulting source link:

https://rapidfitness444.punchpass.com/classes?hidefilter=true&embed=true&from_time='July 15, 2023'&to_time='July 16, 2023'

Did this answer your question?