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 of the public schedule

Filter the schedule for the class and copy the URL.
​

​

In this example, the filtered URL for the Bootcamp 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 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 URL for the filtered view of the public schedule

From the schedule, use the filter 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%5B%5D=Studio+A 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 schedule the URL becomes:

​Step 3 - Replace the URL in the embed code:

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 filter that appears 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:

Here's what the resulting iFrame looks like:

Step 1 - From your schedule, copy the URLs 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

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.

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

Here's what the resulting iFrame looks like:

Step 1 - Copy the embed code for the list view

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

Step 2 - Update the iFrame source link to the specific date range
To show only the classes on a specific date, you'll set from_time= to limit the range of dates shown.
​
For example, to show only the classes on December 1, 2026, you'll set the from_time = 'December 1, 2026' and this will limit the classes.
​
Here is the resulting iFrame code:
​

Here's what the resulting iFrame looks like:
​

​

Step 1 - Copy the embed code for the list view

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

Step 2 - Visit the schedule and filter the schedule for the instructor

Step 3 - Copy the filtered URL from the public schedule

In this example, the schedule link filtered for an instructor is https://btvfit.punchpass.com/classes?instructor%5B%5D=980194348

Step 3 - Update the iFrame source link to include the instructor ID
To show only the classes for a certain instructor, you'll append the instructor ID to the URL.

In this example, we've copied this portion of the URL, instructor%5B%5D=980194348 and are adding that to the iFrame source URL.
​
Here is the updated source link: https://btvfit.punchpass.com/classes?embed=true&instructor%5B%5D=980194348

And the updated iFrame code:

<iframe name="frame2" src="https://btvfit.punchpass.com/classes?embed=true&instructor%5B%5D=980194348" height="700" width="100%" frameborder="0" allowfullscreen></iframe>
​

To create a series landing page on your website, you can embed your series schedule!
​

Step 1 - Copy your URL
To start, identify your series schedule link. This will be [yourbusiness].punchpass.com/series
​

Step 2 - Copy the embed code for your desired view
You'll paste your series link into the iFrame code. Here's an example:

​<iframe name="frame2" src="https://[yourbusiness].punchpass.com/series?embed=true" height="700" width="100%" frameborder="0" allowfullscreen></iframe>

The result will look something like the following example: