What is a Widget and How do I use it?

A widget allows you to embed fitDEGREE's live schedule, one-on-one services, or announcements directly into your website using HTML. This makes it easier for clients to view schedules and book services without leaving your site.

You can either:

• Use fitDEGREE Widgets to embed specific features, or
• Leverage an iFrame of the fitDEGREE web app to provide a more customized experience.

Available Widgets

Widgets can be used to display:

• Live Schedule (Classes & sessions)
• One-on-One Services
• Announcement Feed

These widgets can be found in the Admin Portal under Setup > Integrations > Widgets.

How to Add a Widget to Your Website

Each platform has its own method for embedding a widget. The general steps are:

1. Add the JavaScript Footer Code

• First, insert the JavaScript code from Step 3 of the widget page into your website’s footer.
• This ensures the widget functions properly on your site.
• Exception: Wix websites do not require this step.

2. Embed the Widget Code

• Take the code from Step 2 of the widget page and embed it into a code block on your desired webpage.

Platform-Specific Instructions

Wix

1. Open your Wix website editor.
2. Click the Add button.
3. Select Embed → HTML.
4. Click Enter Code.
5. Paste Step 2 from the admin.
6. Paste Step 3 from the admin (if needed).
7. Click Apply and the widget will appear.

Squarespace

1. Open Settings → Advanced.
2. Edit the Code Injection section.
3. Scroll down to the footer and paste Step 3 from the widget page.
4. Click Save.
5. Go to the desired page.
6. Add a Code Block to the page.
7. Paste Step 2 from the widget page.

WordPress

1. Install the Insert Headers and Footers plugin.
2. Open the plugin and paste Step 3 from the widget page into the Footer section.
3. Click Save.
4. Go to the desired page.
5. Add a Code Block and paste Step 2 from the widget page.

Alternative: Using an iFrame of the Web App

Instead of embedding widgets, you can embed the fitDEGREE web app directly into your website using an iFrame. This allows for a fully interactive experience without needing multiple widgets.

Pro Tip:To route users to a specific section of your fitDEGREE web app, use the Direct Web App Link in the Widget Section and then navigate to the section of the web app you want to add to your website and copy the link.

• Look for "?f=NUMBER&c=NUMBER" in the web app URL.
• This ensures users land in the correct fitSpot (f) and Company (c).
• If it does not have "?f=NUMBER&c=NUMBER" within the URL, you can locate this information in your direct web app link in the Widget section of your Admin.

Don't Forget Pricing Options!

If you're creating a website, you may want to add pricing options for memberships, class packs, and one-on-one services.

How to Add Pricing Links

1. In the Admin Portal, go to Pricing Options.
2. Click on the membership, class pack, or one-on-one pack you want to share.
3. Click the Share Button.
4. Copy the Share Link.
5. Create a button on your website and hyperlink it to the fitDEGREE purchase link.

Note: Only create buttons for active pricing options that are available for sale in the app and admin.