<aside> 💡 In the widget builder, you can generate a widget to display all of your passes. Once you generate a widget for passes, they will be arranged in ascending order based on the pass duration, such as infinite, day pass, 1-month pass, 3-month pass, and so on. If you prefer to reverse the order of the passes, simply toggle on the reverse sort passes? option.

<aside> ⚠️ ATTENTION: If you are using Direct Debit providers such as GoCardless/Square or another particular payment method. Ensure you select the correct payment method from the dropdown, see here Create a pass widget for particular payment methods

When setting up widgets for subscriptions, you must select a payment method from the drop-down list, in order for the online sale to be successful.

</aside>

⤷ Widget generation

<aside>

You can send visitors to your widget in various ways:

1. Embed - select this if you would like to embed your widget directly into your website through an iframe. An inline frame (iframe) is a default HTML element that loads another HTML page within your website.
2. URL - select this if you would like to generate a widget URL, use to send to your customers, for example via email.
3. QR code - select this if you would like to generate a QR code, useful for displaying in your gym for new customers to scan upon arrival. </aside>

⤷ Widget Customisation

› Custom Widget color & styling

<aside>

On the Business Tier and above, you are able to adjust the color of the widget’s header to better fit your brand and website.

For fully customisable widgets, see our Custom Widget color & styling page for Enterprise Tier and above.

</aside>

<aside> <img src="/icons/arrow-northeast_blue.svg" alt="/icons/arrow-northeast_blue.svg" width="40px" /> Looking to learn how to customise your widget styling?

Custom Widget color & styling

</aside>

Example passes widgets

</aside>

<aside> <img src="/icons/arrow-northeast_blue.svg" alt="/icons/arrow-northeast_blue.svg" width="40px" /> Looking to generate a widget, of only specific passes?

Create a pass widget for particular payment methods

</aside>

<aside> <img src="/icons/arrow-northeast_blue.svg" alt="/icons/arrow-northeast_blue.svg" width="40px" /> Looking to gain additional information on booking/purchase?

Booking Forms Explainer

</aside>

FAQs

Customisation

• How do I generate a QR code to print in my gym to link to my widgets?

• How do I change the header color of the widget, or customise other colors on my widgets?

• How do I control the height and width of my iframe widget to work on my website and on mobile?

Troubleshooting

• Why can’t I select an event/pass in the dropdown?

Screen Recording 2024-07-04 at 15.41.35.mov

Related Guides

Create a pass widget for particular payment methods

Related Pages

Passes Guides