Skip to main content

Gym Website Widgets & Embeds

Embed interactive widgets on your gym website to let visitors browse classes, book appointments, sign up as members, and purchase memberships - all without leaving your site.

Overview​

Finegym provides two integration methods:

  1. Iframe Embeds - Drop-in widgets you paste into your website HTML. No coding required.
  2. JavaScript SDK - Fetch data and open checkout drawers from your own custom UI. Full control over design.

Both methods require public widgets to be enabled.

Location: Settings > Embed Widgets

Prerequisites​

Enable Public Widgets​

  1. Go to Settings > Embed Widgets
  2. Toggle Enable public widgets to on

When disabled, all public-facing widgets, checkout pages, and SDK endpoints will return a 404.

Your Gym Site​

Every gym gets a public site at:

https://<your-tenant>.sites.finegym.io

This site shows your class schedule, membership plans, and appointment types. Visitors can sign up and book directly from this page. Share this link on social media, in emails, or anywhere you want to drive bookings.

Method 1: Iframe Embeds​

Copy and paste these code snippets into your website HTML. Each widget handles signup, login, and checkout automatically.

Class Schedule Widget​

Display your upcoming class schedule with booking:

<iframe
  src="https://<your-tenant>.sites.finegym.io/embed/schedule"
  style="width:100%;border:none;min-height:600px;"
  allow="payment"
></iframe>

Membership Pricing Widget​

Show your membership plans with pricing and a purchase flow:

<iframe
  src="https://<your-tenant>.sites.finegym.io/embed/pricing"
  style="width:100%;border:none;min-height:600px;"
  allow="payment"
></iframe>

Appointment Booking Widget​

Let visitors browse appointment types, pick a date and time, and book online:

<iframe
  src="https://<your-tenant>.sites.finegym.io/embed/appointments"
  style="width:100%;border:none;min-height:600px;"
  allow="payment"
></iframe>

Class Types Widget​

Display class types so visitors can browse and book by type:

<iframe
  src="https://<your-tenant>.sites.finegym.io/embed/class-types"
  style="width:100%;border:none;min-height:600px;"
  allow="payment"
></iframe>
tip

Replace <your-tenant> with your gym's tenant slug. You can find the exact embed code with your tenant pre-filled in Settings > Embed Widgets.

Method 2: JavaScript SDK​

For full control over the look and feel, use the SDK to fetch data and open checkout drawers from your own custom-built UI.

1. Load the SDK​

Add a single script tag to your page:

<script src="https://<your-tenant>.sites.finegym.io/sdk.js"></script>

This exposes a global Finegym object once loaded.

2. Fetch Data​

The SDK provides three read methods that return arrays of your gym's data:

// Fetch membership plans
const plans = await Finegym.plans.list()

// Fetch class types
const classTypes = await Finegym.classTypes.list()

// Fetch appointment types
const appointments = await Finegym.appointments.list()

Use this data to render your own cards, tables, or any UI that matches your brand.

3. Open Checkout Drawers​

When a visitor clicks a button on your page, open a Finegym checkout drawer. The drawer handles account creation, login, and payment in a single flow:

// Open membership checkout
Finegym.checkout.openPlan({
  planId: plan.id,
  onSuccess: (result) => {
    console.log('Membership purchased!', result)
  },
  onClose: () => {
    console.log('Drawer closed')
  },
})

// Open appointment booking
Finegym.checkout.openAppointment({
  appointmentTypeId: appointment.id,
  onSuccess: (result) => {
    console.log('Appointment booked!', result)
  },
  onClose: () => {
    console.log('Drawer closed')
  },
})

// Open class booking (shows upcoming sessions for the class type)
Finegym.checkout.openClassType({
  classTypeId: classType.id,
  onSuccess: (result) => {
    console.log('Class booked!', result)
  },
  onClose: () => {
    console.log('Drawer closed')
  },
})

SDK Reference​

MethodReturnsDescription
Finegym.plans.list()Promise<Plan[]>Fetch all visible membership plans
Finegym.classTypes.list()Promise<ClassType[]>Fetch all class types
Finegym.appointments.list()Promise<AppointmentType[]>Fetch all appointment types
Finegym.checkout.openPlan({ planId, onSuccess?, onClose? })DrawerOpen membership checkout
Finegym.checkout.openClassType({ classTypeId, onSuccess?, onClose? })DrawerOpen class booking
Finegym.checkout.openAppointment({ appointmentTypeId, onSuccess?, onClose? })DrawerOpen appointment booking

Full Example​

<!DOCTYPE html>
<html>
<head>
  <title>My Gym</title>
  <script src="https://<your-tenant>.sites.finegym.io/sdk.js"></script>
</head>
<body>
  <div id="plans"></div>

  <script>
    const plans = await Finegym.plans.list();
    const container = document.getElementById('plans');

    plans.forEach(function(plan) {
      const button = document.createElement('button');
      button.textContent = 'Join ' + plan.name + ' - ' + plan.charge_amount + ' ' + plan.charge_amount_currency;
      button.onclick = function() {
        Finegym.checkout.openPlan({
          planId: plan.id,
          onSuccess: function() { alert('Welcome!'); }
        });
      };
      container.appendChild(button);
    });
  </script>
</body>
</html>

Public Booking Flow​

New Visitor​

  1. Visitor views a widget or clicks a checkout button on your website
  2. Enters their email address
  3. Creates an account (name, password)
  4. Completes payment via Stripe (if applicable)
  5. Receives a welcome email with login details

Existing Member​

  1. Member enters their email
  2. Logs in with their password
  3. Completes payment via Stripe (if applicable)
  4. Membership or booking is activated immediately

Free Memberships​

If a plan has a $0 price, the checkout completes instantly without Stripe - no payment method required.

Controlling Visible Plans​

  1. Go to Memberships > Plans
  2. Edit any membership plan
  3. Toggle Show on website to control whether the plan appears in the widget and SDK

Discount Codes​

Members can apply discount codes during the checkout flow. The widget validates discount codes in real time and shows the adjusted price before payment.

See Creating & Managing Discounts for setting up promotional codes.

Last updated on