Lovable and Acuity Scheduling integration: Step-by-Step Guide 2025

 

Step 1: Setting Up Acuity API Configuration

 

• Create a new file in your Lovable project’s src folder and name it config.ts.
• Copy and paste the following code into config.ts. Replace the placeholder text with your actual Acuity Scheduling API credentials.

export const ACUITYAPIUSERID = "YOURACUITYAPIUSER_ID";
export const ACUITYAPIKEY = "YOURACUITYAPI_KEY";
export const ACUITYAPIURL = "https://acuityscheduling.com/api/v1";

 

Step 2: Creating the Acuity Service File

 

• Create a new folder named services inside your src folder if it does not already exist.
• Create a new file in src/services named acuityService.ts.
• Copy and paste the following code into acuityService.ts. This TypeScript class uses Acuity’s API to fetch and create appointments.

import { ACUITYAPIUSERID, ACUITYAPIKEY, ACUITYAPI_URL } from "../config";

interface Appointment {
  id: number;
  datetime: string;
  firstName: string;
  lastName: string;
  email: string;
}

export class AcuityService {
  private headers: HeadersInit;

  constructor() {
    const auth = Buffer.from(${ACUITY_API_USER_ID}:${ACUITY_API_KEY}).toString('base64');
    this.headers = {
      "Authorization": Basic ${auth},
      "Content-Type": "application/json"
    };
  }

  async getAppointments(): Promise {
    const response = await fetch(${ACUITY_API_URL}/appointments, {
      method: 'GET',
      headers: this.headers
    });
    if (!response.ok) {
      throw new Error('Failed to fetch appointments');
    }
    return response.json();
  }

  async createAppointment(appointmentData: Partial): Promise {
    const response = await fetch(${ACUITY_API_URL}/appointments, {
      method: 'POST',
      headers: this.headers,
      body: JSON.stringify(appointmentData)
    });
    if (!response.ok) {
      throw new Error('Failed to create appointment');
    }
    return response.json();
  }
}

• Note: Since Lovable does not have a terminal, this example uses the built-in fetch API. If fetch isn’t available in your project environment, you may need to include a polyfill by adding the polyfill’s code directly into your project.

 

Step 3: Integrating Acuity Service into the Lovable Application

 

• Open the file where you want to use Acuity Scheduling functions (for example, src/app.ts).
• Import the AcuityService class and instantiate it. Then call its methods as needed in your application.
• Copy and paste the following code snippet into your application file to test the integration.

import { AcuityService } from "./services/acuityService";

const acuityService = new AcuityService();

// Example function to fetch and log appointments
async function showAcuityAppointments() {
  try {
    const appointments = await acuityService.getAppointments();
    console.log("Acuity Appointments:", appointments);
  } catch (error) {
    console.error("Error fetching appointments:", error);
  }
}

showAcuityAppointments();

 

Step 4: Testing the Integration

 

• Ensure that your config.ts file contains your valid Acuity Scheduling credentials.
• Save all changes and run your Lovable project in your usual way.
• Trigger the code that calls the AcuityService (for example, by refreshing your web application) and check the browser’s console for the appointment data or error messages.

 

Step 5: Additional Customizations

 

• You can expand the AcuityService class by adding more methods for other Acuity Scheduling endpoints, following the same pattern as in getAppointments and createAppointment.
• Customize error handling and logging according to your project’s requirements.