How to Integrate ScheduleOnce with V0

The fastest way to add ScheduleOnce booking to a V0 app is the direct embed. ScheduleOnce provides several embedding options: an iframe, a JavaScript pop-up button, and an inline page embed. For integration into V0-generated React pages, the iframe approach is the most reliable since it does not depend on third-party script loading timing. In your ScheduleOnce (OnceHub) account, navigate to your booking page and click the Embed / Share button. Copy the embed code. For iframe embedding, the URL follows the pattern https://go.oncehub.com/YourBookingPageName. In your V0 project, create a client component that renders the iframe. The component must have 'use client' at the top because it uses browser-specific rendering. Set the iframe src to your OnceHub booking page URL. Configure the height to at least 600px to ensure the full scheduling interface is visible without scrolling inside the iframe. For the JavaScript-based embed (which renders inline rather than in a separate iframe context), ScheduleOnce provides a script tag and a target div with an id matching your booking page. In a Next.js component, you load this script inside a useEffect hook to ensure it runs only in the browser. This approach gives a more seamless appearance than an iframe but is slightly more complex to implement in a React component. One V0-specific consideration: V0 may generate an iframe component without the 'use client' directive. If you see hydration errors or the iframe fails to render, ensure the component is marked as a client component or wrapped in a Suspense boundary with SSR disabled using Next.js dynamic imports.

1'use client';
2
3interface ScheduleOnceEmbedProps {
4  bookingPageUrl?: string;
5  height?: number;
6  title?: string;
7}
8
9export function ScheduleOnceEmbed({
10  bookingPageUrl = process.env.NEXT_PUBLIC_SCHEDULEONCE_URL || 'https://go.oncehub.com/your-booking-page',
11  height = 650,
12  title = 'Schedule a Meeting',
13}: ScheduleOnceEmbedProps) {
14  return (
15    <div className="w-full overflow-hidden rounded-lg border border-gray-200">
16      <iframe
17        src={bookingPageUrl}
18        width="100%"
19        height={height}
20        frameBorder="0"
21        title={title}
22        style={{ border: 'none', minWidth: '320px' }}
23        allow="camera; microphone"
24        loading="lazy"
25      />
26    </div>
27  );
28}

To access booking data programmatically, you need an OnceHub API key. Unlike some services that use OAuth for all access, OnceHub supports simple API key authentication for server-to-server use — a static key tied to your account that you include in API request headers. Log into your OnceHub account and navigate to the Account section. Look for Developer settings or API access — the exact menu location varies by account type but is typically under your account profile in the top-right corner → Developer settings → API keys. Click Create API key and give it a descriptive label like 'V0 Dashboard Integration'. Copy the generated key immediately. OnceHub API keys provide full read access to your account's booking data including booking pages, scheduled meetings, and team member information. For production use, note that OnceHub may have different API access tiers depending on your subscription — verify your plan includes API access if this feature is not visible in your settings. The API base URL for OnceHub is https://api.oncehub.com/v2. All requests require an api-key header with your key value. The API follows REST conventions with JSON request and response bodies. Note an important difference from Calendly: ScheduleOnce's API is primarily read-focused. Complex write operations like creating or modifying booking pages are done through the OnceHub dashboard, not the API. The API is well-suited for pulling booking data into your V0 dashboard or triggering actions via webhooks.

Build the server-side Next.js API route that fetches booking data from OnceHub. Create app/api/scheduleonce/route.ts. This serverless function runs on Vercel, authenticates with your OnceHub API key from environment variables, and returns booking data to your V0-generated dashboard components. The OnceHub v2 API uses a consistent pattern: GET requests to /bookings returns a paginated list of bookings across your account. Each booking record includes the booking ID, status (confirmed, canceled, rescheduled), the booking page it came from, the scheduled start and end time, and the booker's details (name and email from the qualification form). For a meeting dashboard, you will want to filter bookings by date range. The OnceHub API supports query parameters for filtering by starting_after and ending_before timestamps. Pass ISO 8601 datetime strings to restrict results to a specific time window — for example, the current week's meetings. OnceHub pagination uses a cursor-based approach. The response includes a next_page_token when there are more results. For typical dashboard use cases (showing one week of meetings), you are unlikely to hit pagination limits, but for historical reporting you should implement cursor-based iteration. One V0-specific limitation to understand: V0 cannot interact with ScheduleOnce's routing configuration or booking page settings through the API. If you need to adjust routing rules, qualification questions, or team assignments, you must do so in the OnceHub dashboard. The API only exposes read access to the resulting booking data.

1import { NextRequest, NextResponse } from 'next/server';
2
3const ONCEHUB_BASE_URL = 'https://api.oncehub.com/v2';
4
5interface OnceHubBooking {
6  id: string;
7  status: string;
8  starting_time: string;
9  ending_time: string;
10  booker: {
11    name: string;
12    email: string;
13  };
14  booking_page: {
15    label: string;
16    id: string;
17  };
18  owner: {
19    name: string;
20    email: string;
21  };
22}
23
24export async function GET(request: NextRequest) {
25  const apiKey = process.env.ONCEHUB_API_KEY;
26
27  if (!apiKey) {
28    return NextResponse.json(
29      { error: 'ONCEHUB_API_KEY is not configured' },
30      { status: 500 }
31    );
32  }
33
34  try {
35    const { searchParams } = new URL(request.url);
36    const daysAhead = parseInt(searchParams.get('days') || '7');
37
38    const now = new Date();
39    const future = new Date(now);
40    future.setDate(future.getDate() + daysAhead);
41
42    const params = new URLSearchParams({
43      starting_after: now.toISOString(),
44      ending_before: future.toISOString(),
45      status: 'BOOKED',
46      limit: '100',
47    });
48
49    const response = await fetch(
50      `${ONCEHUB_BASE_URL}/bookings?${params}`,
51      {
52        headers: {
53          'api-key': apiKey,
54          'Content-Type': 'application/json',
55        },
56      }
57    );
58
59    if (!response.ok) {
60      const errorBody = await response.text();
61      console.error('OnceHub API error:', response.status, errorBody);
62      return NextResponse.json(
63        { error: `OnceHub API returned ${response.status}` },
64        { status: response.status }
65      );
66    }
67
68    const data = await response.json();
69    const bookings = (data.data || []).map((b: OnceHubBooking) => ({
70      id: b.id,
71      status: b.status,
72      startTime: b.starting_time,
73      endTime: b.ending_time,
74      bookerName: b.booker?.name || '',
75      bookerEmail: b.booker?.email || '',
76      bookingPageName: b.booking_page?.label || '',
77      assignedTo: b.owner?.name || '',
78    }));
79
80    return NextResponse.json({ bookings, total: bookings.length });
81  } catch (error: unknown) {
82    console.error('ScheduleOnce API error:', error);
83    return NextResponse.json(
84      { error: 'Failed to fetch bookings' },
85      { status: 500 }
86    );
87  }
88}

Configure the environment variables your app needs in Vercel so they are available to your serverless functions and client components. Open Vercel Dashboard → your project → Settings → Environment Variables. Add two variables: First, ONCEHUB_API_KEY with the API key you generated. Set the scope to Production, Preview, and Development. Do not add the NEXT_PUBLIC_ prefix — API keys must remain server-side only in Next.js API routes. Second, NEXT_PUBLIC_SCHEDULEONCE_URL with your ScheduleOnce booking page URL (e.g., https://go.oncehub.com/your-booking-page-name). This URL is not sensitive and the NEXT_PUBLIC_ prefix is appropriate here because the iframe embed component in the browser needs to read it. After saving both variables, trigger a redeployment. Either push any commit to your GitHub repository or click Redeploy in the Vercel Dashboard. Environment variable changes are frozen into the build at deployment time and require a new deployment to activate. For local development, create or update your .env.local file with both variables. The non-NEXT_PUBLIC_ variable will only be accessible in server-side code locally as well, matching the production behavior.

For applications that need to react immediately when a meeting is booked — triggering a CRM entry, sending a Slack notification, or creating a follow-up task — OnceHub supports webhooks that POST event data to your API route when bookings are created, canceled, or rescheduled. Create a webhook handler at app/api/scheduleonce/webhook/route.ts. OnceHub webhook payloads contain the booking details including the booker's name and email, the assigned team member, meeting time, and qualification question answers. To register your webhook URL in OnceHub, navigate to Account Settings → Integrations → Webhooks (or API settings depending on your OnceHub version). Add your Vercel deployment URL: https://your-project.vercel.app/api/scheduleonce/webhook. Select the events you want to receive: booking.created, booking.canceled, and booking.rescheduled are the most important ones. OnceHub may require webhook URL verification — it sends a GET request to your URL first to confirm it is reachable and returns a 200 response. Make sure your webhook handler exports both a GET and a POST function, with GET returning a 200 for verification. For security, OnceHub can include a custom header or shared secret in webhook requests that you configure in the webhook settings. Verify this value in your handler before processing the payload. This prevents malicious actors from sending fake booking events to your endpoint. For complex post-booking workflows — like automatically creating HubSpot deals, sending personalized email sequences, or assigning tasks to team members — RapidDev can help design the complete webhook-driven automation architecture.

1import { NextRequest, NextResponse } from 'next/server';
2
3interface OnceHubWebhookEvent {
4  event_type: string;
5  created_at: string;
6  booking: {
7    id: string;
8    status: string;
9    starting_time: string;
10    ending_time: string;
11    booker: {
12      name: string;
13      email: string;
14    };
15    booking_page: {
16      label: string;
17    };
18    owner: {
19      name: string;
20      email: string;
21    };
22  };
23}
24
25// Verification GET handler required by some webhook platforms
26export async function GET() {
27  return NextResponse.json({ status: 'webhook endpoint active' });
28}
29
30export async function POST(request: NextRequest) {
31  try {
32    const body: OnceHubWebhookEvent = await request.json();
33
34    console.log('OnceHub webhook received:', body.event_type);
35
36    switch (body.event_type) {
37      case 'booking.created': {
38        const { booking } = body;
39        console.log(
40          `New booking: ${booking.booker.name} (${booking.booker.email})`,
41          `for ${booking.booking_page.label} at ${booking.starting_time}`,
42          `assigned to ${booking.owner.name}`
43        );
44        // TODO: Create CRM record, send Slack notification, trigger email sequence
45        break;
46      }
47
48      case 'booking.canceled': {
49        const { booking } = body;
50        console.log(`Canceled: booking ${booking.id} by ${booking.booker.name}`);
51        // TODO: Update CRM, notify team, free up resources
52        break;
53      }
54
55      case 'booking.rescheduled': {
56        const { booking } = body;
57        console.log(`Rescheduled: ${booking.booker.name} moved to ${booking.starting_time}`);
58        // TODO: Update calendar events and CRM records
59        break;
60      }
61
62      default:
63        console.log('Unhandled OnceHub event:', body.event_type);
64    }
65
66    return NextResponse.json({ received: true });
67  } catch (error: unknown) {
68    console.error('OnceHub webhook error:', error);
69    return NextResponse.json(
70      { error: 'Webhook processing failed' },
71      { status: 500 }
72    );
73  }
74}