Punchpass lets you keep your class schedule organized in one place and share it with your customers online. You can embed your schedule and also embed your Purchase a Pass page. And customize it too.

No website? No problem! Share your schedule via Facebook or email.​

We recommend adding a Button on your site and linking it to your custom URL. That way your customers can just click the button to buy a pass and/or see your schedule. One button handles both your schedule and your pass purchases, so it's easy peasy for you to set up & for your customers to navigate.
​

To find your custom URL, just go to Manage Settings > Public Schedule.

Every web host is a little different; some will make it easy, some won't.

In general, you are going to be adding an iFrame to your site. Think of that as a little box that can display content from another website. The code looks like this:

If you are using Wix.com to host/build your website, we have created a demo site to show you what Punchpass schedules and calendars look and act like when embedded on the platform.

We have a demo Wix site with instructions and an example of an embedded schedule: https://punchpass.wixsite.com/punchpass-example/

You're able to embed Punchpass on Wordpress.org websites. If you use Wordpress.com, there's no way to embed the schedule. Contact us if you're not sure which one you have.
​

See our Wordpress Embed Article for step-by-step instructions.

The trick with Squarespace is you want to add a Code block (NOT an Embed block).
​
After identifying where you'd like to add your schedule to your web page, select the code block option to add it to your page. You'll then paste your custom embed code into the block settings.

You have multiple schedule views to choose from: the class list, class calendar, or a list of your appointments. Choose the one that works best for your needs, the list view is mobile-friendly.

All of the embedding options for Punchpass can be found in the Manage Settings > Embedding Punchpass section.

Calendar View Sample

Appointments View Sample

​

A Filtered View of Your Schedule

You can also create an embedded schedule that is filtered to show a specific class, instructor, or location.
​

Check out our guide to creating filtered views of your embedded schedule
​
Here's an example of an embedded schedule, filtered to show only one class:
​

​​Your Upcoming Series Schedule

To create a series landing page on your website, you can embed your series schedule!
​
To start, identify your series schedule link. This will be [yourbusiness].punchpass.com/series and you'll paste that into the following iFrame code:
​
<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:
​

Click on Manage Settings > Embedding Punchpass to find your custom code for your business.
​
To embed your entire Purchase a Pass page on your website, you'll want to copy the embed code from the Your Passes for Purchase section.
​

If you would prefer to allow pass purchases right from your embedded schedule, you can add buttons to the top of your schedule. This will allow you to create a single web page where your customers can access the schedule AND purchase passes.

Depending on what features you offer, these additional buttons will automatically show: Schedule, Calendar, Purchase a Pass, Appointments, Sign In, Create Account.

To add these buttons, you will place additional embed code ABOVE the schedule embed code. Your custom embed code for these buttons is shown on Manage Settings > Embedding Punchpass.
​

Did you know you can adjust the colors of your Punchpass schedule? When customizing the appearance of your class schedule, your color selections will carry through to your embedded timetable too!
​
Visit Manage Setting > Public Web Pages, and click the Customize Your Theme button to adjust the colors of your Punchpass theme.
​

​

By default, an embedded schedule will follow the visitor's device or browser color scheme. If your website uses a light theme, this can cause a problem: a visitor with dark mode enabled will see a dark-themed embed on your light-themed page (or vice versa), which can look mismatched.

To avoid this, you can force the embed to always display in a specific theme by adding &color_theme= to the end of your iframe link, followed by one of:

For example:

This works on any of the embed types described above (schedule, calendar, appointments, series, or Purchase a Pass).
​
​

​

You can change the text that appears above your schedule by going to Manage Settings > Public Schedule.
​

To add a welcome message to your schedule, your appointments page, and purchase a pass page, just add the text you want to display in each section:
​

​
You can also edit the name of your Appointments and Instructor tabs in the main navigation, if you're using those features.
​

No website? No problem!
​

Your subscription includes a Punchpass-hosted online schedule & payments pages with your logo. You can direct your customers to this page from your Facebook page, from a button on your website...or even from an email!
​
Personalize your Punchpass link by visiting Manage Settings > Public Schedule. Navigation buttons are automatically shown to direct your customers between your schedule and pass purchase pages.
​

Click here to learn more about giving your customers access to Punchpass from your Facebook page.