How to Integrate Lovable with Acuity Scheduling

Log in to your Acuity Scheduling account and navigate to Business Settings (click the gear icon or your business name in the top-right). Look for 'Integrations' in the left sidebar and click on 'API'. You'll see your User ID (a numeric identifier) and the option to generate or view your API key. If no API key exists, click 'Generate API Key'. Copy both the User ID and the API key immediately — save them somewhere safe before leaving the page. Acuity's API key is shown only once in some configurations. Acuity's API uses HTTP Basic Authentication where the User ID is the username and the API key is the password. The API base URL is https://acuityscheduling.com/api/v1. The authentication header is constructed by Base64-encoding 'userId:apiKey' and sending it as 'Authorization: Basic {base64}'. Also note your appointment type IDs. Navigate to Business Settings → Appointment Types, click on an appointment type, and look at the URL — it contains the appointment type ID (e.g., .../appointment-types/12345). You'll need this ID when querying availability for a specific session type.

In Lovable, click the '+' button next to the Preview panel to open the Cloud tab, then navigate to Secrets. Add these secrets: - ACUITY_USER_ID: your Acuity numeric User ID - ACUITY_API_KEY: your Acuity API key The Edge Function constructs the Basic Auth header by Base64-encoding 'userId:apiKey' using btoa(). This is straightforward — no special encoding or token exchange is needed. Acuity's API key provides full access to your Acuity account including all client data, appointments, and business settings. Protect it carefully. Never paste it in the Lovable chat panel or include it in any client-side code. Lovable's security system actively blocks hardcoded credentials, but the Cloud Secrets panel is the safe and correct storage location.

Create the Edge Function that proxies Acuity API calls. The Acuity API is well-documented at developers.acuityscheduling.com and follows standard REST conventions with clean JSON responses. Key Acuity endpoints for a booking integration: GET /availability/dates to find available booking dates for an appointment type and month, GET /availability/times to find available time slots for a specific date and appointment type, POST /appointments to create a new appointment, GET /appointments to list appointments (with optional email, date range, and appointment type filters), GET /appointments/{id} for appointment details, and DELETE /appointments/{id} to cancel. The availability endpoints require appointmentTypeID as a query parameter and return arrays of dates (for /dates) or time slot objects with datetime and slotsAvailable fields (for /times). The appointment creation endpoint requires firstName, lastName, email, datetime, and appointmentTypeID at minimum, plus any form fields your appointment type requires. Build the Edge Function to handle all these operations from a single function to keep the Cloud Functions list clean.

1// supabase/functions/acuity-proxy/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const corsHeaders = {
5  "Access-Control-Allow-Origin": "*",
6  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
7  "Access-Control-Allow-Methods": "POST, OPTIONS",
8};
9
10const ACUITY_BASE = "https://acuityscheduling.com/api/v1";
11
12serve(async (req: Request) => {
13  if (req.method === "OPTIONS") {
14    return new Response("ok", { headers: corsHeaders });
15  }
16
17  try {
18    const userId = Deno.env.get("ACUITY_USER_ID");
19    const apiKey = Deno.env.get("ACUITY_API_KEY");
20    const authHeader = `Basic ${btoa(`${userId}:${apiKey}`)}`;
21
22    const { operation, ...params } = await req.json();
23    let url = ACUITY_BASE;
24    let method = "GET";
25    let body: string | undefined;
26
27    switch (operation) {
28      case "getAvailableDates":
29        url += `/availability/dates?appointmentTypeID=${params.appointmentTypeID}&month=${params.month}&timezone=America/New_York`;
30        break;
31      case "getAvailableTimes":
32        url += `/availability/times?appointmentTypeID=${params.appointmentTypeID}&date=${params.date}&timezone=America/New_York`;
33        break;
34      case "createAppointment":
35        url += "/appointments";
36        method = "POST";
37        body = JSON.stringify(params);
38        break;
39      case "getAppointments":
40        url += "/appointments?" + new URLSearchParams(Object.fromEntries(Object.entries(params).filter(([,v]) => v))).toString();
41        break;
42      case "getAppointment":
43        url += `/appointments/${params.id}`;
44        break;
45      case "cancelAppointment":
46        url += `/appointments/${params.id}`;
47        method = "DELETE";
48        break;
49      default:
50        return new Response(JSON.stringify({ error: "Unknown operation" }), { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } });
51    }
52
53    const response = await fetch(url, {
54      method,
55      headers: { "Authorization": authHeader, "Content-Type": "application/json" },
56      ...(body ? { body } : {}),
57    });
58    const data = await response.json();
59    return new Response(JSON.stringify(data), { status: response.status, headers: { ...corsHeaders, "Content-Type": "application/json" } });
60  } catch (error) {
61    return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
62  }
63});

With the Edge Function working, open Lovable chat and describe the booking flow UI. A good booking experience uses a step-by-step approach that reduces cognitive load — show one decision at a time rather than all booking fields at once. A standard 3-step booking flow: Step 1 — Calendar showing available dates (green dots on available days, grayed out on unavailable). User clicks a date to proceed. Step 2 — Time slot grid showing available appointment times for the selected date. User clicks a time to proceed. Step 3 — Client information form with name, email, phone, and any intake questions. User clicks 'Book' to create the appointment. For the calendar in Step 1, Acuity returns an array of available date strings. Build a monthly calendar component that marks available dates and disables unavailable ones. Include navigation for the current and next 2 months. For the time slots in Step 2, Acuity returns objects with time and slotsAvailable. Display times in the client's local timezone. Group times by morning/afternoon/evening if there are many slots. For the confirmation in Step 3, after a successful appointment creation, display the confirmed date, time, appointment type, and a calendar add link. Send the booking details to the client's email (Acuity handles this automatically if email confirmations are enabled in your Acuity settings).

After the booking flow is working, add Acuity webhook support to enable real-time notifications when appointments are booked, rescheduled, or cancelled. This is valuable for triggering downstream workflows — sending a welcome email, creating a Supabase record, notifying a Slack channel, or updating a CRM. Create a Lovable Edge Function as the webhook receiver. In your Acuity account under Business Settings → Integrations → Webhooks, add the Edge Function URL and select the events you want to receive: booking.scheduled, booking.rescheduled, booking.canceled. Acuity sends a POST request to your webhook URL with appointment data in the body. The webhook body includes the appointment ID, type, client name, email, date, time, and form fields. Your Edge Function should acknowledge receipt with a 200 response quickly, then process the event asynchronously. Acuity does not sign webhooks with an HMAC signature like Stripe does, so you cannot cryptographically verify the origin. Add a secret query parameter to your webhook URL (e.g., ?secret=your_webhook_secret) and verify it in the Edge Function to prevent unauthorized calls.