Skip to main content

Gym Website Widgets & Embeds

Add booking and signup widgets to your website.

Put your class schedule, membership plans and booking into a website you already have, so visitors never leave it.

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.

Neither needs switching on. Both are available to every gym.

Location: Settings > Embed Widgets

What These Embed​

The widgets show parts of your gym site inside your own website — the same schedule, plans and booking, rendered in a frame on your page. Everything they display comes from there.

If you do not have a website of your own, you may not need any of this: your gym site already works on its own. See Your Gym Site & Member Sign-in.

Keeping something off the public web is a per-item decision: the Show on website toggle on a membership plan controls whether that plan appears on your gym site, in these widgets and in the SDK.

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>
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