Lovable and Doodle integration: Step-by-Step Guide 2025

 

Step 1: Add Axios Dependency in Your Project Configuration

 

Since Lovable doesn’t have a terminal, you need to manually add the dependency to your package.json file. Open your package.json file and add the following line under the "dependencies" section:

{
  "dependencies": {
    "axios": "^0.27.2",
    // ... other dependencies
  }
}

This inclusion tells your Lovable project to use Axios for handling HTTP requests to Doodle’s API.

 

Step 2: Create a Doodle Configuration File

 

Create a new file in your project directory under src/config and name it doodle-config.ts. This file will store important configuration details for integrating with Doodle.

// File: src/config/doodle-config.ts

export const DOODLEAPIENDPOINT = "https://api.doodle.com";
export const DOODLEAPIKEY = "YOURDOODLEAPI_KEY"; // Replace with your actual API key

This file will be used by your service to connect to Doodle’s API using the endpoint and the API key provided.

 

Step 3: Create the Doodle Service File

 

Create a new file in src/services and name it DoodleService.ts. This service file will include functions for calling Doodle’s API.

// File: src/services/DoodleService.ts

import axios from "axios";
import { DOODLEAPIENDPOINT, DOODLEAPIKEY } from "../config/doodle-config";
class DoodleService {
  // Create a new meeting in Doodle
  async createMeeting(data: any): Promise {
    try {
      const response = await axios.post(
        ${DOODLE_API_ENDPOINT}/meetings,
        data,
        {
          headers: {
            "Authorization": Bearer ${DOODLE_API_KEY},
            "Content-Type": "application/json"
          }
        }
      );
      return response.data;
    } catch (error) {
      console.error("Error creating meeting:", error);
      throw error;
    }
  }
  // Get details of a specific meeting by its ID
  async getMeeting(meetingId: string): Promise {
    try {
      const response = await axios.get(
        ${DOODLE_API_ENDPOINT}/meetings/${meetingId},
        {
          headers: {
            "Authorization": Bearer ${DOODLE_API_KEY}
          }
        }
      );
      return response.data;
    } catch (error) {
      console.error("Error fetching meeting:", error);
      throw error;
    }
  }
}
export default new DoodleService();

This file defines two asynchronous functions: one to create a meeting and another to get the details of an existing meeting. The functions use Axios to communicate with Doodle’s API.

 

Step 4: Integrate DoodleService into Your Lovable Project

 

In your main application file (for example, src/app.ts or another entry point in your Lovable project), import and use the DoodleService to utilize Doodle’s functionality. Add the following code snippet where you want to use Doodle’s API features:

// Example: src/app.ts

import DoodleService from "./services/DoodleService";
// Example function to create a new Doodle meeting
async function scheduleNewMeeting() {
  const meetingData = {
    title: "Team Sync Meeting",
    date: "2023-11-01",
    time: "10:00",
    // Add other required fields as per Doodle API documentation
  };
  try {
    const createdMeeting = await DoodleService.createMeeting(meetingData);
    console.log("Meeting created successfully:", createdMeeting);
  } catch (error) {
    console.error("Failed to create meeting:", error);
  }
}
// Invoke the scheduling function
scheduleNewMeeting();

This snippet demonstrates how to call the createMeeting method of the DoodleService to schedule a new meeting. You can similarly call getMeeting to retrieve meeting details.

 

Step 5: Verify the Integration

 

Ensure that all the new files and code snippets you added are saved. Since Lovable projects do not have a terminal, the system will automatically load the dependencies from your modified package.json. Test the integration by triggering the functions that call Doodle’s API (for example, by running your Lovable project and checking the console output).

If there are any errors, verify that your Doodle API key is correct and that all file paths are accurately set.