How to Integrate Lovable with Mindbody

Go to developers.mindbodyonline.com and create a developer account. Mindbody requires approval for API access — fill in the application form describing your use case (building a custom booking UI for a studio, etc.), your organization, and the Mindbody site(s) you'll integrate with. API access is typically approved within 1-3 business days for legitimate business integrations. Once approved, navigate to your developer portal and create an API application. Mindbody provides you with an API Key — a string that goes in the API-Key request header for all API calls. The API key grants access to the Mindbody API infrastructure; which data you can access is further controlled by the SiteId parameter that identifies the specific gym or studio. Mindbody provides a dedicated sandbox SiteId for testing: -99. This sandbox has pre-populated test data (classes, staff, clients) that you can use to test all API operations without connecting to a real studio. Test client credentials are also provided in the developer documentation. Use the sandbox throughout development and switch to the production SiteId only when deploying for a real client. Mindbody's API base URL is https://api.mindbodyonline.com/public/v6. All endpoints use this base with the specific resource path appended (e.g., /class/classes, /client/clients, /appointment/bookings). Include API-Key and SiteId headers (or SiteId as a query parameter) on every request.

Open your Lovable project, click '+', select 'Cloud', and expand Secrets. Add MINDBODY_API_KEY with your API key value and MINDBODY_SITE_ID with the SiteId for the studio you're integrating with (use '-99' for sandbox testing). Also add MINDBODY_API_BASE with 'https://api.mindbodyonline.com/public/v6'. For multi-site integrations where your app serves multiple Mindbody businesses, you may need to store multiple SiteIds. One approach is storing a default site ID in Cloud Secrets and accepting a dynamic site ID parameter in your Edge Function (validated against an allowed list stored in Supabase). Never allow arbitrary SiteIds from the frontend without validation — unauthorized site access could expose confidential business data. Mindbody API keys are account-level credentials that grant access to any Mindbody site that authorizes your application. Treat them with the same care as database passwords. Lovable's security infrastructure blocks approximately 1,200 hardcoded API keys per day — use Cloud Secrets for proper credential management.

Create a Supabase Edge Function that fetches class schedules and appointment availability from Mindbody. This is typically the first data displayed when users open a booking UI — what classes are available and when. For class schedules, the GET /class/classes endpoint returns classes for a date range with all relevant details: class name, instructor name, start and end times, room name, enrollment capacity, current enrollment count (total minus remaining spots), and class description. Filter by dates using the StartDateTime and EndDateTime query parameters in ISO 8601 format. For appointment availability, the GET /appointment/staffavailabilities endpoint returns open time slots for a specific staff member and service type. Provide staff_id(s), session_type_id, start_date, and end_date parameters. Design the Edge Function to support different actions: action='classes' for the class schedule, action='staff' for staff listings, action='availability' for appointment booking slots. Return structured data with only the fields your UI needs rather than passing through Mindbody's full verbose response.

1// supabase/functions/mindbody-api/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const API_KEY = Deno.env.get("MINDBODY_API_KEY") ?? "";
5const SITE_ID = Deno.env.get("MINDBODY_SITE_ID") ?? "-99";
6const BASE = Deno.env.get("MINDBODY_API_BASE") ?? "https://api.mindbodyonline.com/public/v6";
7const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization" };
8
9const mbFetch = (path: string, params?: Record<string, string>) => {
10  const url = new URL(`${BASE}${path}`);
11  if (params) Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
12  return fetch(url.toString(), { headers: { "API-Key": API_KEY, "SiteId": SITE_ID, "Content-Type": "application/json" } });
13};
14
15serve(async (req) => {
16  if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
17  try {
18    const body = await req.json();
19    const { action } = body;
20
21    if (action === "classes") {
22      const res = await mbFetch("/class/classes", { StartDateTime: body.start_date, EndDateTime: body.end_date });
23      const data = await res.json();
24      const classes = (data.Classes ?? []).map((c: any) => ({
25        class_id: c.Id,
26        name: c.ClassDescription?.Name ?? "",
27        instructor_name: `${c.Staff?.FirstName ?? ""} ${c.Staff?.LastName ?? ""}`.trim(),
28        start_time: c.StartDateTime,
29        end_time: c.EndDateTime,
30        room: c.Location?.Name ?? "",
31        total_spots: c.MaxCapacity ?? 0,
32        available_spots: c.TotalBooked != null && c.MaxCapacity != null ? c.MaxCapacity - c.TotalBooked : null,
33      }));
34      return new Response(JSON.stringify({ classes }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
35    }
36
37    if (action === "staff") {
38      const res = await mbFetch("/staff/staff");
39      const data = await res.json();
40      const staff = (data.StaffMembers ?? []).map((s: any) => ({
41        staff_id: s.Id,
42        first_name: s.FirstName,
43        last_name: s.LastName,
44        bio: s.Bio ?? "",
45        image_url: s.ImageURL ?? "",
46      }));
47      return new Response(JSON.stringify({ staff }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
48    }
49
50    return new Response(JSON.stringify({ error: "Unknown action" }), { status: 400, headers: corsHeaders });
51  } catch (err) {
52    return new Response(JSON.stringify({ error: err.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
53  }
54});

Booking classes in Mindbody requires client authentication — you need a client-specific token to book on behalf of a user. The client token is obtained by calling POST /client/addclienttosession or using the staff token for administrative bookings. For consumer-facing apps where clients book their own classes, implement client login: accept the client's Mindbody email and password in your Lovable app, send them to an Edge Function that calls POST /usertoken/issue (or POST /client/clienttokenissue depending on the API version) to obtain a client token, and store this token with the user's Supabase account for subsequent booking calls. For class booking, call POST /class/addclienttoclass with the class_id, client_id, and the client's access token. For appointment booking, use POST /appointment/bookappointment with staff_id, appointment_type_id, start_date_time, and duration. Handle booking errors gracefully: Mindbody returns specific error codes for 'class is full', 'client already booked', 'insufficient membership credits', and 'outside cancellation window'. Display user-friendly messages for each case rather than showing raw API errors.