API + Embed Demo

1) Drop-in Embed Script (fastest)

Paste this on any external site where you want the booking widget to appear.

<div id="fitoa-widget"
  data-studio-slug="iron-republic"
  data-view="member"
  data-theme="light"></div>
<script src="https://fitoa.nicholascabel.com/embed/fitoa-widget.js" defer></script>

4) Bike / Seat Booking (Cycling)

Many cycling studios number their bikes. Here’s a movie-ticket-style selector + example API shape for which bikes are taken and which are open.

{
  "classId": "cls_spin_1",
  "title": "Spin Class",
  "seatCount": 20,
  "layout": { "rows": 10, "left": ["1","3","5","7","9","11","13","15","17","19"], "right": ["2","4","6","8","10","12","14","16","18","20"] },
  "taken": ["2","7","12"],
  "seats": [
    { "label": "1", "status": "open" },
    { "label": "2", "status": "taken" }
  ]
}

2) JSON API Contract

Example payload your API should return for member preview UI.

{
  "studio": { "name": "Iron Republic CrossFit", "slug": "iron-republic" },
  "member": { "name": "Jordan Kim", "classesRemaining": 3, "classesTotal": 10, "creditsRemaining": 6, "creditsTotal": 10 },
  "classes": [
    { "id": "cls_1", "title": "Morning HIIT", "time": "7:00 AM", "instructor": "Coach Sara", "spotsLeft": 2, "signupUrl": "/register" },
    { "id": "cls_2", "title": "Yoga Flow", "time": "9:30 AM", "instructor": "Emma R.", "spotsLeft": 3, "signupUrl": "/register" }
  ]
}

3) Additional API Widget Demos

POST /api/v1/leads
{ "email": "owner@studio.com", "source": "widget" }

POST /api/v1/checkout/session
{ "plan": "10-pack", "memberId": "m_123" }

GET /api/v1/member/credits?memberId=m_123
→ { "classesRemaining":3, "classesTotal":10 }

POST /api/v1/checkin
{ "bookingId": "b_556", "method": "frontdesk" }

GET /api/v1/classes/cls_1
→ { "title":"Morning HIIT", "spotsLeft":2 }

4) Fetch from another site (vanilla JS)

const BASE = "https://fitoa.nicholascabel.com";
const studioSlug = "iron-republic";
const memberId = "demo-member-123";

async function loadMemberPreview() {
  const res = await fetch(
    `${BASE}/api/public/member-preview?studio=${studioSlug}&memberId=${memberId}`,
    { headers: { "Accept": "application/json" } }
  );
  const data = await res.json();

  document.querySelector("#studio-name").textContent = data.studio.name;
  document.querySelector("#classes-left").textContent =
    `${data.member.classesRemaining}/${data.member.classesTotal} classes remain`;
  document.querySelector("#credits-left").textContent =
    `${data.member.creditsRemaining}/${data.member.creditsTotal} credits remain`;
}

5) API Reliability Notes

• Use versioned endpoints, e.g. /api/v1/member-preview.
• Return stable key names so external sites do not break.
• Enable CORS only for approved domains that will embed your UI.
• Cache class lists for short periods (15-60 seconds) to reduce load.