We use iFrames to embed Punchpass on your website, and with our iFrames, you can customize some of the information that is displayed.
​
You'll find several prepared options for embedding Punchpass on your website and the iFrame code to copy and paste here: Manage > Settings > Embedding Punchpass.
​
In this guide, you'll find examples of different options for customizing the iFrame code to filter the information from Punchpass that is shared and embedded on your website.
​

Working with iFrames is a relatively straightforward process. You'll customize the iFrame code and then paste this directly into your website. Some web hosts will require you to have "code" access or access to "iFrames." Please review the documentation with your provider before proceeding.
​

With this option, you'll generate the embed code for an iFrame that displays the schedule for only one class.
​
Here's what the resulting iFrame looks like:

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:

​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:

For a filtered schedule the URL becomes:

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:

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

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

Here's how to embed a filtered version of your schedule using the "Locations" filter.

Here's what the resulting iFrame looks like:

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:

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:

For a filtered schedule the URL becomes:

​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:

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

When you're embedding your Punchpass schedule, you might wish to hide the various dropdown menus that appear at the top of the screen.
​

Here's what the resulting iFrame looks like:
​

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 source 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:

You can see this in action by visiting: https://rapidfitness444.punchpass.com/classes?embed=true&hidefilter=true
​​

Here's what the resulting iFrame looks like:

Step 1 - From the public calendar view of your schedule, copy the URLs for each by filtering for each class and noting the course IDs.

In this example, the filtered course URLs are:
​

And the filtered course IDs are:

Step 2 - Create the new combination URL

In the calendar URL for one of them, change the word "calendar" to "classes" and a comma after the first course ID. If using more than two classes, separate each class ID with a comma.

The combined URL becomes:

The resulting source URL to use becomes:

Step 3: Update the iFrame code

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

Update your iFrame embed code to use this new source URL.

Here's what the resulting iFrame looks like:

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:
​