Acuity Scheduling

Log in to your Acuity Scheduling account and navigate to Business Settings (top-right menu) → Integrations → API. On the API page you will see two values: your User ID (a numeric string like 12345678) and your API key (a long alphanumeric string). Copy both of them to a safe place — you'll need them in the next step. A common mistake here: founders try to use their Acuity login email as the User ID. The User ID is a separate numeric identifier that only appears on this API credentials page. Using your email as the User ID will always result in a 401 Unauthorized error, so double-check that you're copying the numeric value. Also confirm your plan tier on this page. If you see a message indicating that API access is not available on your current plan, you will need to upgrade to Emerging Entrepreneur or higher before proceeding. Free-plan accounts receive 403 Forbidden responses from the API regardless of credentials.

Acuity's API uses HTTP Basic authentication. The Authorization header value is computed by Base64-encoding the string userId:apiKey (with a colon separator and no spaces). For example, if your User ID is 12345678 and your API key is abc123xyz, you Base64-encode the string 12345678:abc123xyz to get a result like MTIzNDU2Nzg6YWJjMTIzeHl6. To generate the Base64 value, open any online Base64 encoder (search for 'base64 encode online'), paste userId:apiKey into the input, and copy the output. The full Authorization header value will be: Basic MTIzNDU2Nzg6YWJjMTIzeHl6 (with the word 'Basic' and a space before the encoded string). In FlutterFlow, open your project and click the Settings icon in the left sidebar → App Values (App Constants). Click Add Constant, name it ACUITY_AUTH, set the type to String, and paste the full header value (including the word 'Basic'). FlutterFlow will bake this value into the compiled app, which is acceptable for read-only GET calls. For write operations (POST /appointments) you will protect the credential differently in a later step.

In FlutterFlow, click API Calls in the left navigation sidebar. You'll see a panel listing any existing API Groups. Click the + Add button and choose Create API Group. Give the group a name like AcuityScheduling. Set the Base URL to https://acuityscheduling.com/api/v1 — no trailing slash. This base URL will be shared by all API calls in the group, so you only configure it once. Now add the Authorization header. In the API Group settings, scroll to the Headers section and click Add Header. Set the key to Authorization and the value to {{ACUITY_AUTH}} — the double curly braces tell FlutterFlow to substitute the App Constant you created in the previous step. Every child API call inside this group will automatically inherit this header, so you don't need to repeat it per call. Also add a second header: Content-Type with value application/json. This ensures Acuity processes POST request bodies correctly in a later step. Save the API Group. You won't see any calls inside it yet — you'll add those next.

1// API Group configuration reference
2// Base URL: https://acuityscheduling.com/api/v1
3// Headers (group-level, inherited by all child calls):
4// Authorization: {{ACUITY_AUTH}}   (Basic Base64(userId:apiKey))
5// Content-Type: application/json

Inside the AcuityScheduling API Group, click Add API Call. Name it GetAppointments. Set the method to GET and the endpoint path to /appointments. Leave the path as-is — the base URL from the group will be prepended automatically. To filter appointments by date, add a query parameter. Click the Variables tab inside the API Call editor. Add a variable named minDate with type String and a default value of the current date in the format YYYY-MM-DD (e.g., 2026-07-10). Add another variable maxDate similarly. Back in the endpoint field, update the path to /appointments?minDate={{minDate}}&maxDate={{maxDate}} so FlutterFlow substitutes the variables when the call fires. Now click the Response & Test tab. Paste a sample Acuity appointments JSON response into the Sample Response field. A typical appointment object looks like: { "id": 1234, "firstName": "Jane", "lastName": "Doe", "email": "jane@example.com", "datetime": "2026-07-10T09:00:00-0700", "type": "Haircut" }. Click Generate from Response — FlutterFlow will auto-generate JSON Paths for each field. Now click the Test API Call button. If you've connected your real credentials correctly, you should see your actual upcoming appointments in the response panel. If you see a 403 error, your Acuity plan doesn't include API access. If you see a 401, double-check your Base64-encoded auth string.

1// Sample Acuity /appointments response (paste into Response & Test)
2[
3  {
4    "id": 1234567,
5    "firstName": "Jane",
6    "lastName": "Doe",
7    "email": "jane@example.com",
8    "phone": "+15551234567",
9    "datetime": "2026-07-10T09:00:00-0700",
10    "endTime": "2026-07-10T10:00:00-0700",
11    "type": "Haircut",
12    "calendar": "Main Location",
13    "calendarID": 1000001,
14    "notes": "First-time client",
15    "paid": "no",
16    "amountPaid": "0.00"
17  }
18]
19
20// Key JSON Paths to map:
21// Client name:  $[*].firstName  and  $[*].lastName
22// Date/time:    $[*].datetime
23// Service:      $[*].type
24// Calendar:     $[*].calendar
25// Appointment ID: $[*].id

Navigate to the page in your FlutterFlow project where you want to show appointments (or create a new page). Add a ListView widget to the page canvas by clicking the + (Add Widget) button and searching for ListView. With the ListView selected, open the Backend Query panel on the right side. Set the Query Type to API Call, choose the AcuityScheduling group, and select GetAppointments. FlutterFlow will fetch this data when the page loads and pass the response items as children to the ListView. Inside the ListView, add a child widget (a Column or Card works well for each appointment row). Add Text widgets for the fields you want to display. For each Text widget, set the value using Set from Variable → API Response → GetAppointments → [the JSON Path for that field]. For example: - Client name: bind to $[*].firstName and $[*].lastName (combine them in a Text widget using string concatenation) - Date/time: bind to $[*].datetime (you may want a Custom Function to reformat the ISO datetime into a human-readable string like '10 Jul 2026, 9:00 AM') - Service type: bind to $[*].type Preview the page in Test Mode by clicking the Run button (top right). You should see your actual Acuity appointments listed. If the list is empty, check that you have appointments within the minDate/maxDate range you configured.

The GET /appointments call is read-only, and storing the auth credential in App Constants is acceptable for that use case. However, creating an appointment (POST /appointments) involves sending client personal information and writes data to Acuity using a write-capable API credential. If you include this call directly in FlutterFlow's client-side API Calls, the Base64 credential ships inside the compiled app and can be extracted by decompiling the APK or examining network traffic. The secure approach is to deploy a Firebase Cloud Function that holds the credential in server-side environment variables and proxies the booking request. Here's how to set it up: 1. In your Firebase project console, go to Functions → Write a new function (or use the Firebase Functions editor). Deploy a simple HTTPS callable function that accepts the appointment parameters, attaches the Authorization header server-side, and calls Acuity's POST /appointments on your behalf. 2. Back in FlutterFlow, create a new API Call (you can put it in a separate API Group if you prefer). Set the base URL to your Firebase Function URL (e.g., https://us-central1-your-project.cloudfunctions.net/createAcuityAppointment). This call has NO Authorization header — your FlutterFlow app just sends the appointment data and the Cloud Function handles the Acuity authentication. 3. In your booking form page (a Page with text fields for client name, email, and desired time), add an Action to the Submit button. Choose Backend/API Call → your Cloud Function proxy call. Pass the form field values as request body parameters. This pattern keeps your API credential fully server-side and also solves the CORS problem for web builds: browser-based FlutterFlow apps can't call acuityscheduling.com directly due to CORS restrictions, but they can call your Firebase Cloud Function which returns proper CORS headers.

1// Firebase Cloud Function: createAcuityAppointment/index.js
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4
5exports.createAcuityAppointment = functions.https.onRequest(async (req, res) => {
6  // Set CORS headers for FlutterFlow web builds
7  res.set('Access-Control-Allow-Origin', '*');
8  res.set('Access-Control-Allow-Methods', 'POST, OPTIONS');
9  res.set('Access-Control-Allow-Headers', 'Content-Type');
10
11  if (req.method === 'OPTIONS') {
12    res.status(204).send('');
13    return;
14  }
15
16  const ACUITY_USER_ID = process.env.ACUITY_USER_ID;
17  const ACUITY_API_KEY = process.env.ACUITY_API_KEY;
18  const basicAuth = Buffer.from(`${ACUITY_USER_ID}:${ACUITY_API_KEY}`).toString('base64');
19
20  try {
21    const acuityResponse = await fetch(
22      'https://acuityscheduling.com/api/v1/appointments',
23      {
24        method: 'POST',
25        headers: {
26          'Authorization': `Basic ${basicAuth}`,
27          'Content-Type': 'application/json'
28        },
29        body: JSON.stringify(req.body)
30      }
31    );
32    const data = await acuityResponse.json();
33    res.status(acuityResponse.status).json(data);
34  } catch (error) {
35    res.status(500).json({ error: error.message });
36  }
37});
38
39// Set env vars in Firebase:
40// firebase functions:config:set acuity.user_id="YOUR_USER_ID" acuity.api_key="YOUR_API_KEY"