Skip to main content
Can I embed Punchpass on my website?

Add your schedule, purchase a pass page, and content library to your website

Chris avatar
Written by Chris
Updated over 6 months ago

Punchpass lets you keep your class schedule organized in one place and share it with your customers online.  So you only have one place to set up and manage your class list!  This makes it very easy for your customers to see your upcoming classes & click right through your schedule to make a reservation if your Punchpass plan supports them.

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

It’s easy to share your Schedule. You can also embed your Purchase a Pass page. And customize it too.


Ways to share Punchpass on your Website

1. The Simplest Approach: Add a Button

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.

2. Embedding your Schedule on your website

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.

List View Sample

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.

3. Embedding the Purchase a Pass page on your website

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.

4. Add Buttons at the top of your embedded schedule

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.

5. What if I don't have a website or I can't embed on mine?

No website? No problem!

We also provide 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! You can find it by going to Manage Settings > Public Schedule. Navigation buttons are automatically shown to direct your customers between your schedule and pass purchase pages.



Customizing your Embedded Schedule

Adjust the colors

Did you know you can adjust the colors of your Punchpass schedule? When customizing the appearance of your class schedule, your colors selections will carry through to your embedded timetable too! Learn more about customizing the appearance of your schedule here.

Custom code for each of the views is available by going to Manage Settings > Embedding Punchpass.

Add a welcome message and edit the name of your Appointment schedule

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, just add the text you want to display here:

You can also edit the name of your Appointments schedule.


Getting Started with Embedding Code on a Website

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:

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

Wix

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 platforms.

Please check out the demo below and you'll find instructions as well as an example embedded schedule.

Wordpress

We have written a support article specific to Wordpress (see the article list above.) You are able to embed your schedule on Wordpress.org websites - if you use Wordpress.com then there is no way to embed the schedule. Contact us if you aren't sure!

See our Wordpress Embed Article

Squarespace

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.



​Creating Filtered Views of Your Embedded Schedule

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.



Did this answer your question?