How to Integrate Lovable with ScheduleOnce (OnceHub)

Log in to your OnceHub account at app.oncehub.com and navigate to Account Settings (click your profile avatar in the top right). Look for 'Integrations' or 'API' in the settings navigation. OnceHub's API key generation is typically found under Integrations → API → Generate API Key. OnceHub may require a specific account tier for API access — check that your plan includes API integration capabilities. Business and Enterprise plans typically include API access. If you're on a lower tier, contact OnceHub support to inquire about API access. The API key provides access to your OnceHub account data including booking pages, bookings, master pages, and team member information. Store it securely — do not share it or include it in frontend code. Also note your booking page IDs. In OnceHub, navigate to each booking page you want to reference, and note the page's ID from the URL or the page's settings panel. Booking page IDs are the unique identifiers you pass to the API when querying specific pages or creating bookings.

In Lovable, click the '+' button next to the Preview panel to open the Cloud tab, then navigate to Secrets. Add: - ONCEHUB_API_KEY: your OnceHub API key OnceHub's API authentication uses the X-API-Key header (or Authorization: Bearer depending on the API version). The Edge Function adds this header to every OnceHub API request. Verify the exact header format from OnceHub's API documentation for your account. For Lovable apps that serve multiple clients with different OnceHub accounts, store the API key for each client separately — either in separate Lovable projects or as separate Cloud Secrets with descriptive names (e.g., ONCEHUB_API_KEY_CLIENT_A and ONCEHUB_API_KEY_CLIENT_B). The Edge Function can accept a client identifier parameter to select the appropriate key.

Create the Edge Function that handles OnceHub API operations. OnceHub's REST API base URL is https://api.oncehub.com/v2 and supports operations for booking pages, bookings, and team management. Key OnceHub API endpoints: GET /bookingpages to list all booking pages with their IDs, names, and booking URLs; GET /bookingpages/{id} to get a specific booking page's details and availability; POST /bookings to create a new booking with prospect/customer information; GET /bookings to list bookings with date range and booking page filters; GET /bookings/{id} for specific booking details. When creating a booking via the API, OnceHub typically requires: bookingPageId, startTime (the selected meeting time), and booker information (name, email, phone). Some booking pages have custom form fields — check the booking page configuration to understand what additional data to pass. For team routing scenarios, your Edge Function needs to know which booking page to use based on the routing logic. Store a mapping of routing criteria to booking page IDs in your Supabase database, and have the Edge Function query this mapping to select the right page.

1// supabase/functions/oncehub-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
10serve(async (req: Request) => {
11  if (req.method === "OPTIONS") {
12    return new Response("ok", { headers: corsHeaders });
13  }
14
15  try {
16    const apiKey = Deno.env.get("ONCEHUB_API_KEY");
17    const headers = { "X-API-Key": apiKey || "", "Content-Type": "application/json", "Accept": "application/json" };
18    const BASE_URL = "https://api.oncehub.com/v2";
19
20    const { operation, ...params } = await req.json();
21    let response;
22
23    switch (operation) {
24      case "getBookingPages":
25        response = await fetch(`${BASE_URL}/bookingpages`, { headers });
26        break;
27      case "getBookingPage":
28        response = await fetch(`${BASE_URL}/bookingpages/${params.bookingPageId}`, { headers });
29        break;
30      case "createBooking":
31        response = await fetch(`${BASE_URL}/bookings`, {
32          method: "POST",
33          headers,
34          body: JSON.stringify({
35            booking_page_id: params.bookingPageId,
36            starting_time: params.startTime,
37            customer: { name: params.firstName + " " + params.lastName, email: params.email, phone: params.phone },
38            additional_fields: params.additionalFields || {},
39          }),
40        });
41        break;
42      case "getBookings": {
43        const qp = new URLSearchParams();
44        if (params.startDate) qp.set("starting_after", params.startDate);
45        if (params.endDate) qp.set("starting_before", params.endDate);
46        if (params.bookingPageId) qp.set("booking_page_id", params.bookingPageId);
47        response = await fetch(`${BASE_URL}/bookings?${qp}`, { headers });
48        break;
49      }
50      case "getBooking":
51        response = await fetch(`${BASE_URL}/bookings/${params.bookingId}`, { headers });
52        break;
53      default:
54        return new Response(JSON.stringify({ error: `Unknown operation: ${operation}` }), { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } });
55    }
56
57    const data = await response.json();
58    return new Response(JSON.stringify(data), { status: response.status, headers: { ...corsHeaders, "Content-Type": "application/json" } });
59  } catch (error) {
60    return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
61  }
62});

With the Edge Function working, build the qualification and routing flow. This is where Lovable's strength shines — the multi-step form with conditional logic that routes to the right booking page based on answers. The qualification form typically has 3-5 questions that determine routing: company size (determines if enterprise or SMB team), industry or vertical (routes to industry-specialist), product area of interest (routes to product specialist), current tooling (helps the sales rep prepare), and geographic region (routes to territory rep). After the form is completed, the frontend's routing logic (or a call to the Edge Function with a routing table stored in Supabase) selects the appropriate booking page ID. The page ID is then passed to the booking component, which either redirects to OnceHub's booking URL or embeds the OnceHub booking widget inline. OnceHub provides an embed URL format for its booking pages: https://app.oncehub.com/booking/{pageId} — this can be used in an iframe for inline embedding without needing the full API booking flow. The iframe approach is simpler than building a custom time picker and gives you OnceHub's full booking UI including calendar navigation.

OnceHub webhooks send real-time notifications when bookings are created, rescheduled, or cancelled. Create a Lovable Edge Function as the webhook receiver to capture booking events and trigger downstream actions. In OnceHub settings, navigate to Integrations → Webhooks and add your Edge Function URL as a webhook endpoint. Select the events: booking.created, booking.rescheduled, booking.canceled. OnceHub sends POST requests with booking data including the booking page ID, booking time, customer information, and any form field responses. Use webhooks to: store confirmed bookings in a Supabase bookings table, send a Slack notification to the assigned sales rep, trigger a CRM record creation or update, or start a nurture email sequence through your email provider. Build an admin booking dashboard that reads from the Supabase bookings table (populated by webhooks) rather than polling the OnceHub API on every page load. This approach is faster, reduces API usage, and ensures the dashboard works even if OnceHub is temporarily slow to respond. For complex sales scheduling workflows with CRM integration, lead scoring, or sophisticated routing rules, RapidDev's team can help design the complete sales scheduling architecture.