Embed Widgets | FitConnect Help Center

Overview

Embed widgets allow you to display live timetables, booking forms, and membership signups directly on your own website. Visitors can view schedules and book classes without leaving your site, creating a seamless experience.

Timetable Widget

Live class schedule with booking capability

Signup Widget

Membership signup forms for new members

Custom Widgets

Class lists, instructor profiles, and more

Available Widgets

Class Timetable

Membership Signup

Let visitors sign up for memberships directly:

Display available membership plans
Collect member information
Process payments via Stripe
Automatic account creation
Promotional code support

Class List

Showcase your class offerings:

Class descriptions and images
Duration and difficulty levels
Instructor information
Link to booking page

Instructor Profiles

Feature your team:

Photos and bios
Qualifications and specialties
Classes they teach
Social links

Generating Embed Code

Access Widget Settings

Navigate to Settings → Integrations → Embed Widgets in your gym dashboard.

Choose Widget Type

Select the widget you want to embed from the available options.

Configure Appearance

Customize the widget to match your website:

Theme: Light, dark, or auto (matches user's system)
Colours: Primary and accent colours
Size: Width and height (or responsive)
Fonts: Match your website's typography

Set Content Options

Choose what to display:

Which locations to include (multi-location gyms)
Which class types to show
Default view (day, week, month)
Whether to show prices

Copy Embed Code

Click Generate Code to create your embed snippet. Copy the code to use on your website.

Embed Code Examples

Basic Timetable Widget

<div id="fitconnect-timetable"></div>
<script src="https://widgets.fitconnect.app/timetable.js"></script>
<script>
  FitConnectTimetable.init({
    gymId: 'YOUR_GYM_ID',
    container: '#fitconnect-timetable',
    theme: 'light'
  });
</script>

Iframe Embed (Simpler)

<iframe 
  src="https://embed.fitconnect.app/timetable/YOUR_GYM_ID"
  width="100%" 
  height="600"
  frameborder="0"
  style="border: none; border-radius: 8px;">
</iframe>

Signup Widget

<div id="fitconnect-signup"></div>
<script src="https://widgets.fitconnect.app/signup.js"></script>
<script>
  FitConnectSignup.init({
    gymId: 'YOUR_GYM_ID',
    container: '#fitconnect-signup',
    membershipIds: ['mem_123', 'mem_456'], // Optional: specific memberships
    promoCode: 'SUMMER2024' // Optional: pre-apply promo
  });
</script>

The JavaScript widget offers more customization options and better integration with your site. The iframe embed is simpler but has limited styling options.

Customization Options

Visual Styling

• Primary colour (buttons, highlights)

• Background colour/transparency

• Border radius (rounded corners)

• Font family override

• Show/hide header and footer

Behaviour Options

• Enable/disable booking

• Show prices or hide them

• Redirect after booking

• Open links in new tab

• Mobile-first or desktop-first layout

Timetable Options

• Default view (day/week/month)

• Start day of week

• Time format (12h/24h)

• Show past classes

• Highlight today

Multi-Location

• Show location selector

• Default to specific location

• Location-specific branding

• Combined or separate timetables

Adding to Your Website

WordPress

Edit the page where you want the widget
Add an HTML block (in Gutenberg) or use a Custom HTML widget
Paste the embed code
Save and preview

Tip: Some page builders (Elementor, Divi) have dedicated HTML modules.

Wix

Open the Wix Editor
Click Add (+) → Embed → Custom Embeds → Embed a Widget
Paste your embed code in the HTML field
Resize and position as needed

Squarespace

Edit your page
Add a Code Block
Paste the embed code
Set display options and save

Custom HTML/React Site

Simply paste the embed code in your HTML file or component. For React/Vue/Angular, use the provided npm package for better integration:

npm install @fitconnect/widgets

Troubleshooting

Widget not loading

• Check your gym ID is correct in the embed code
• Ensure the script URL is not blocked by ad blockers
• Verify the container element ID matches
• Check browser console for JavaScript errors

Styling conflicts

• Use the iframe embed if your site's CSS conflicts
• Add CSS specificity to override widget styles
• Contact support for custom CSS options

Booking not working

• Ensure your gym's booking settings allow public booking
• Check that the classes shown are bookable
• Verify membership requirements for the classes

Widgets require your gym to have an active subscription. Free trial gyms have limited widget functionality.

Frequently Asked Questions

Do widgets update automatically?

Yes! Widgets fetch live data from your gym account. Any changes you make to classes, schedules, or memberships are reflected immediately.

Can I track conversions from widgets?

Yes, widgets support Google Analytics and Facebook Pixel integration. You can also view widget-specific analytics in your dashboard under Marketing → Widget Analytics.

Is there a limit to how many widgets I can use?

No limit! You can embed widgets on as many pages as you like. Each widget can be configured differently (e.g., different class filters per page).