This help article specifically covers forms widgets.
⤷ Widget Generation
You can send visitors to your widget in various ways:
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.
URL - select this if you would like to generate a widget URL, use to send to your customers, for example via email.
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.
⤷ Custom Widget Colour & Styling
On the Business Tier and above, you are able to adjust the colour of the widget’s header to better fit your brand and website.
Gyms on the Enterprise Tier and above get access to fully customisable widgets—see our Custom Widget colour & styling page.
⤷ What is the difference between default and custom form widgets
When creating a form widget, you have two options for how forms are included in your widgets:
» Default Form Widget: This option uses the default forms you've set in your Participant Form configuration. These forms are automatically suggested at the end of a purchase in any widget.
The widget link stays the same and always reflects the current default forms, making it easy to manage and maintain across your site or if you have any printed QR codes.
» Custom Form Widget: This allows you to choose specific forms to include in the widget. It’s helpful when you want to tailor the experience — for example, if you only want to show certain forms or need to hide specific forms for a particular audience or use case.
⤷ Create a default form widget
Default forms are forms that have been set to default in the participant forms section, in BETA’s Settings page.
⤷ Create a custom form widget
Create a custom widget link to show any combination of forms together.
On the Form widget, you can add a YouTube video that will play at the beginning of the form signing process. Please ensure you paste the full URL from the address bar into the field in your widget builder.
FAQs
How do I generate a QR code to print in my gym to link to my widgets?
It is possible to generate a unique form QR code to hang up in your gym. To do so, directly from the widget builder you can generate a QR code, and download as a .svg. Do this from the bottom of the widget builder in the BETA dashboard.
How do I change the header colour of the widget, or customise other colours on my widgets?
Header customisation is available on the Business Tier and above, directly in the Widget Builder.
Fully customisable widget styling is available on the Enterprise Tier and above.
How do I add a video to my form widget?
To display a video at the beginning of your form widget, paste the URL of a Youtube video into the form widget builder field. Learn how to add a video to your form widget: Forms Explainer
Can the widgets be displayed in another language?
Yes! When visitors choose the form through your generated widget, they can pick their language from the top-right corner. BETA supports English, Spanish, Portuguese, French, Dutch, Khmer, and Korean.
I use a website builder like Ghost, Squarespace, Wix, Weebly - how do I embed a widget into my website?
Most website builders support html content block, (also referred to as an iFrame) to insert this into your website—please see your provider’s relevant help docs. Iframes are basic html components. Then you will need to embed the html generated by BETA.
You can then customise the HTML to fit your needs.
How do I control the height and width of my iframe widget to work on my website and on mobile?
BETA widgets are Responsive, meaning they change size depending on their <div> container. Iframes are basic html components. Inside of the iframe widget, you can set the Height & Width Attributes, allowing you to determine the sizing that you want » Read more here.
You can control the width and height of the embedded widget. To control the width and height of an iframe in HTML, you can use the width and height properties on the iframe itself, or use the width and height style properties. The values for the width and height properties can be specified in pixels, percentages, or other units.
For mobile devices you should ensure that the iframe’s width is allowed to expand to the full device width. If you need any help configuring the css or html for website embeds, please contact us on your Discord channel.
These are the attributes associated with iframes customisation:
