How to Integrate Calendly with V0

The fastest way to add Calendly scheduling to a V0 app is the inline embed — no API routes, no backend setup, just a React component that renders Calendly's hosted booking UI directly in your page. The react-calendly npm package provides React-friendly wrappers around Calendly's widget script. Add react-calendly to your project by including it in package.json dependencies. Then create a client component (it must have 'use client' at the top because it renders browser-based JavaScript) that uses the InlineWidget component from react-calendly. Pass your Calendly scheduling URL as the url prop — this is the link from your Calendly event type, like https://calendly.com/your-name/30min. The InlineWidget renders inside your page as an iframe-based booking experience. It automatically loads the correct event type, shows available time slots, and handles the full booking flow including invitee name and email collection. After the visitor books, Calendly sends them a confirmation email and calendar invite automatically. For V0 integration, you can either hardcode your Calendly URL in the component or make it configurable via an environment variable (NEXT_PUBLIC_CALENDLY_URL). Using an environment variable is useful if you have different scheduling links for different environments or team members. Since the URL is not a secret, using the NEXT_PUBLIC_ prefix is appropriate here. One V0-specific note: V0 may generate the InlineWidget without the 'use client' directive. If you see a 'window is not defined' error after deployment, add 'use client' at the top of the component file or use Next.js's dynamic import with ssr: false to defer loading until the browser.

1'use client';
2
3import { InlineWidget } from 'react-calendly';
4
5interface CalendlyEmbedProps {
6  url?: string;
7  primaryColor?: string;
8  textColor?: string;
9  backgroundColor?: string;
10}
11
12export function CalendlyEmbed({
13  url = process.env.NEXT_PUBLIC_CALENDLY_URL || 'https://calendly.com/your-name/30min',
14  primaryColor = '0066cc',
15  textColor = '4d5055',
16  backgroundColor = 'ffffff',
17}: CalendlyEmbedProps) {
18  return (
19    <div className="w-full">
20      <InlineWidget
21        url={url}
22        styles={{ minWidth: '320px', height: '700px' }}
23        pageSettings={{
24          primaryColor,
25          textColor,
26          backgroundColor,
27          hideLandingPageDetails: false,
28          hideEventTypeDetails: false,
29        }}
30      />
31    </div>
32  );
33}

To fetch booking data through Calendly's v2 API, you need a Personal Access Token (PAT). Unlike OAuth, a PAT is a static credential tied to your Calendly account — simpler for single-user or internal tool use cases where you do not need users to authenticate with their own Calendly accounts. Log into your Calendly account and navigate to Account Settings → Integrations → API & Webhooks. In the Personal Access Tokens section, click Create New Token. Give it a descriptive name like 'V0 App Integration' so you can identify it later. Calendly will generate a long token string — copy it immediately as it is only shown once. This PAT authenticates API requests as your Calendly account, giving you access to your event types, scheduled events, and invitee records. For team use cases where you need to access multiple users' calendars, you would instead use Calendly's OAuth flow — but that requires users to grant permission through a consent screen and is significantly more complex to implement. Calendly's PAT does not have granular permission scopes — it grants full read/write access to your account's data. This is another reason to keep it strictly server-side. Never put it in a NEXT_PUBLIC_ variable, in a V0 chat prompt, or in any file that gets committed to your GitHub repository.

Now build the server-side API route that fetches scheduled events from Calendly's v2 API. Create app/api/calendly/route.ts in your project. This route will run as a Vercel serverless function and proxy Calendly API calls, keeping your PAT out of the browser. Calendly's v2 API uses a two-step pattern for most data fetches: first, get your user URI (your unique Calendly identity) by calling the /users/me endpoint, then use that URI to filter events by their organizer. Without specifying the user URI, the events endpoint returns nothing useful. The scheduled events endpoint supports date range filtering with min_start_time and max_start_time query parameters, which accept ISO 8601 datetime strings. For a dashboard showing this week's meetings, you would pass the start of the current week and the end of the week. The API also paginates results — use the pagination.next_page_token from the response to fetch subsequent pages if you have more events than the per_page limit. For each event, you may want to fetch the associated invitees (the people who booked). This is a separate API call to /scheduled_events/{event_uuid}/invitees. The event UUID appears in the event URI from the scheduled events response — extract it with a simple split('/').pop(). Consider whether you need per-event invitee data or just the event list to avoid making excessive API calls.

1import { NextRequest, NextResponse } from 'next/server';
2
3const CALENDLY_BASE_URL = 'https://api.calendly.com';
4
5async function calendlyFetch(path: string, token: string) {
6  const response = await fetch(`${CALENDLY_BASE_URL}${path}`, {
7    headers: {
8      Authorization: `Bearer ${token}`,
9      'Content-Type': 'application/json',
10    },
11  });
12
13  if (!response.ok) {
14    throw new Error(`Calendly API error: ${response.status} ${response.statusText}`);
15  }
16
17  return response.json();
18}
19
20export async function GET(request: NextRequest) {
21  const token = process.env.CALENDLY_ACCESS_TOKEN;
22
23  if (!token) {
24    return NextResponse.json(
25      { error: 'CALENDLY_ACCESS_TOKEN is not configured' },
26      { status: 500 }
27    );
28  }
29
30  try {
31    // Step 1: Get the current user's URI
32    const userResponse = await calendlyFetch('/users/me', token);
33    const userUri = userResponse.resource.uri;
34
35    // Step 2: Fetch scheduled events for this week
36    const now = new Date();
37    const weekStart = new Date(now);
38    weekStart.setHours(0, 0, 0, 0);
39    const weekEnd = new Date(now);
40    weekEnd.setDate(weekEnd.getDate() + 7);
41    weekEnd.setHours(23, 59, 59, 999);
42
43    const params = new URLSearchParams({
44      user: userUri,
45      min_start_time: weekStart.toISOString(),
46      max_start_time: weekEnd.toISOString(),
47      status: 'active',
48      count: '50',
49    });
50
51    const eventsResponse = await calendlyFetch(`/scheduled_events?${params}`, token);
52
53    const events = eventsResponse.collection.map((event: {
54      uri: string;
55      name: string;
56      status: string;
57      start_time: string;
58      end_time: string;
59      event_type: string;
60      location?: { type: string; join_url?: string };
61    }) => ({
62      id: event.uri.split('/').pop(),
63      name: event.name,
64      status: event.status,
65      startTime: event.start_time,
66      endTime: event.end_time,
67      eventType: event.event_type,
68      location: event.location?.type || 'unknown',
69      joinUrl: event.location?.join_url || '',
70    }));
71
72    return NextResponse.json({
73      events,
74      total: eventsResponse.collection.length,
75    });
76  } catch (error: unknown) {
77    console.error('Calendly API error:', error);
78    return NextResponse.json(
79      { error: 'Failed to fetch Calendly events' },
80      { status: 500 }
81    );
82  }
83}

Your API route reads CALENDLY_ACCESS_TOKEN from environment variables. Add this to Vercel so it is available when your serverless function runs. Open Vercel Dashboard → your project → Settings → Environment Variables. Add CALENDLY_ACCESS_TOKEN with the PAT you generated. Set the scope to Production, Preview, and Development. Do not add the NEXT_PUBLIC_ prefix — this token must remain server-side only. If you are also configuring the embed widget with a Calendly URL, add NEXT_PUBLIC_CALENDLY_URL with your scheduling link (e.g., https://calendly.com/your-name/30min). This one can and should have the NEXT_PUBLIC_ prefix since the URL is not sensitive and your client-side CalendlyEmbed component needs to read it. After saving variables, trigger a redeployment by pushing any commit or clicking Redeploy. Environment variable changes require a new deployment. For local development, add both variables to your .env.local file — the non-NEXT_PUBLIC_ variable will only be accessible server-side, while the NEXT_PUBLIC_ one will be available everywhere.

For applications that need to react immediately when someone books, cancels, or reschedules a meeting, Calendly provides webhooks. When a booking event occurs, Calendly sends a POST request to your specified URL with the event details. Create a dedicated webhook handler at app/api/calendly/webhook/route.ts. Calendly webhooks support four event types: invitee.created (new booking), invitee.canceled (cancellation), routing_form_submission.created (form submission), and invitee_no_show.created. For most use cases, invitee.created and invitee.canceled are the important ones. Calendly webhook payloads include the event URI and invitee URI. To get full details (email, name, answers to custom questions), you may need to make a follow-up API call to Calendly's invitee endpoint using the invitee URI from the webhook payload. To register a webhook subscription, use Calendly's API: POST to https://api.calendly.com/webhook_subscriptions with your webhook URL and the event types you want to subscribe to. Calendly will send a one-time verification request to confirm your endpoint is reachable before activating the subscription. Your webhook handler should respond with a 200 status within 10 seconds. Note that Calendly webhook subscriptions are only available on paid Calendly plans (Standard and above). The free tier does not include webhook access. If your use case is budget-sensitive, an alternative is polling the events endpoint on a schedule using Vercel Cron Jobs.

1import { NextRequest, NextResponse } from 'next/server';
2
3interface CalendlyWebhookPayload {
4  event: string;
5  payload: {
6    event_type: {
7      name: string;
8      slug: string;
9    };
10    invitee: {
11      name: string;
12      email: string;
13      uri: string;
14    };
15    scheduled_event: {
16      uri: string;
17      start_time: string;
18      end_time: string;
19      name: string;
20    };
21    cancel_url?: string;
22    reschedule_url?: string;
23  };
24  created_at: string;
25}
26
27export async function POST(request: NextRequest) {
28  try {
29    const body: CalendlyWebhookPayload = await request.json();
30
31    console.log('Calendly webhook received:', body.event);
32
33    switch (body.event) {
34      case 'invitee.created': {
35        const { invitee, scheduled_event } = body.payload;
36        console.log(`New booking: ${invitee.name} (${invitee.email}) for ${scheduled_event.name}`);
37        console.log(`Start time: ${scheduled_event.start_time}`);
38        // TODO: Send confirmation email, create CRM record, notify Slack, etc.
39        break;
40      }
41
42      case 'invitee.canceled': {
43        const { invitee, scheduled_event } = body.payload;
44        console.log(`Cancellation: ${invitee.name} canceled ${scheduled_event.name}`);
45        // TODO: Update database, send cancellation email, free up resource
46        break;
47      }
48
49      default:
50        console.log('Unhandled Calendly event:', body.event);
51    }
52
53    return NextResponse.json({ received: true });
54  } catch (error: unknown) {
55    console.error('Calendly webhook error:', error);
56    return NextResponse.json(
57      { error: 'Webhook processing failed' },
58      { status: 500 }
59    );
60  }
61}