How to Integrate Bolt.new with Calendly

1// components/CalendlyWidget.tsx
2import { useEffect, useRef } from 'react';
3
4interface CalendlyWidgetProps {
5  url: string;
6  prefillName?: string;
7  prefillEmail?: string;
8  height?: number;
9}
10
11export function CalendlyWidget({
12  url,
13  prefillName,
14  prefillEmail,
15  height = 700,
16}: CalendlyWidgetProps) {
17  const containerRef = useRef<HTMLDivElement>(null);
18
19  useEffect(() => {
20    // Build URL with optional prefill parameters
21    let widgetUrl = url;
22    const params = new URLSearchParams();
23    if (prefillName) params.set('name', prefillName);
24    if (prefillEmail) params.set('email', prefillEmail);
25    if (params.toString()) widgetUrl += '?' + params.toString();
26
27    // Load Calendly CSS
28    const link = document.createElement('link');
29    link.href = 'https://assets.calendly.com/assets/external/widget.css';
30    link.rel = 'stylesheet';
31    document.head.appendChild(link);
32
33    // Load Calendly widget script
34    const script = document.createElement('script');
35    script.src = 'https://assets.calendly.com/assets/external/widget.js';
36    script.async = true;
37    script.onload = () => {
38      if (containerRef.current && (window as Window & { Calendly?: { initInlineWidget: (opts: object) => void } }).Calendly) {
39        (window as Window & { Calendly: { initInlineWidget: (opts: object) => void } }).Calendly.initInlineWidget({
40          url: widgetUrl,
41          parentElement: containerRef.current,
42        });
43      }
44    };
45    document.head.appendChild(script);
46
47    return () => {
48      document.head.removeChild(script);
49      document.head.removeChild(link);
50    };
51  }, [url, prefillName, prefillEmail]);
52
53  return (
54    <div
55      ref={containerRef}
56      style={{ minWidth: '320px', height: `${height}px` }}
57      className="w-full rounded-lg overflow-hidden"
58    />
59  );
60}

1// app/api/calendly/event-types/route.ts
2import { NextResponse } from 'next/server';
3
4const CALENDLY_BASE = 'https://api.calendly.com';
5
6interface CalendlyUser {
7  resource: { uri: string; name: string; email: string };
8}
9
10interface CalendlyEventType {
11  uri: string;
12  name: string;
13  active: boolean;
14  scheduling_url: string;
15  duration: number;
16  description_plain: string;
17  color: string;
18  kind: string;
19}
20
21interface CalendlyEventTypesResponse {
22  collection: CalendlyEventType[];
23}
24
25async function calendlyFetch<T>(endpoint: string, token: string): Promise<T> {
26  const res = await fetch(`${CALENDLY_BASE}${endpoint}`, {
27    headers: {
28      Authorization: `Bearer ${token}`,
29      'Content-Type': 'application/json',
30    },
31  });
32  if (!res.ok) {
33    throw new Error(`Calendly API error: ${res.status} ${res.statusText}`);
34  }
35  return res.json();
36}
37
38export async function GET() {
39  const token = process.env.CALENDLY_ACCESS_TOKEN;
40  if (!token) {
41    return NextResponse.json({ error: 'CALENDLY_ACCESS_TOKEN not configured' }, { status: 500 });
42  }
43
44  try {
45    // Step 1: Get current user's URI
46    const user = await calendlyFetch<CalendlyUser>('/users/me', token);
47    const userUri = user.resource.uri;
48
49    // Step 2: Fetch active event types for this user
50    const eventTypesData = await calendlyFetch<CalendlyEventTypesResponse>(
51      `/event_types?user=${encodeURIComponent(userUri)}&active=true`,
52      token
53    );
54
55    const eventTypes = eventTypesData.collection.map((et) => ({
56      uri: et.uri,
57      name: et.name,
58      duration: et.duration,
59      schedulingUrl: et.scheduling_url,
60      description: et.description_plain,
61      color: et.color,
62      kind: et.kind,
63    }));
64
65    return NextResponse.json({ eventTypes });
66  } catch (error) {
67    const message = error instanceof Error ? error.message : 'Unknown error';
68    return NextResponse.json({ error: message }, { status: 500 });
69  }
70}

1// app/booking/page.tsx
2'use client';
3import { useState, useEffect } from 'react';
4import { CalendlyWidget } from '@/components/CalendlyWidget';
5import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
6
7interface EventType {
8  uri: string;
9  name: string;
10  duration: number;
11  schedulingUrl: string;
12  description: string;
13  color: string;
14}
15
16export default function BookingPage() {
17  const [eventTypes, setEventTypes] = useState<EventType[]>([]);
18  const [loading, setLoading] = useState(true);
19  const [selectedEvent, setSelectedEvent] = useState<EventType | null>(null);
20
21  useEffect(() => {
22    fetch('/api/calendly/event-types')
23      .then((r) => r.json())
24      .then((data) => { setEventTypes(data.eventTypes ?? []); setLoading(false); })
25      .catch(() => setLoading(false));
26  }, []);
27
28  if (loading) return <div className="p-8 text-center">Loading scheduling options...</div>;
29
30  return (
31    <div className="mx-auto max-w-4xl p-8">
32      <h1 className="mb-2 text-3xl font-bold">Schedule a Meeting</h1>
33      <p className="mb-8 text-gray-500">Choose a time that works for you</p>
34      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
35        {eventTypes.map((et) => (
36          <div
37            key={et.uri}
38            className="rounded-lg border p-5 shadow-sm hover:shadow-md transition-shadow"
39            style={{ borderLeftWidth: '4px', borderLeftColor: et.color }}
40          >
41            <h2 className="font-semibold text-lg">{et.name}</h2>
42            <p className="text-sm text-gray-500 mt-1">{et.duration} min</p>
43            <p className="text-sm text-gray-600 mt-2 line-clamp-2">{et.description}</p>
44            <button
45              onClick={() => setSelectedEvent(et)}
46              className="mt-4 w-full rounded bg-blue-600 py-2 text-sm font-medium text-white hover:bg-blue-700"
47            >
48              Book Now
49            </button>
50          </div>
51        ))}
52      </div>
53      <Dialog open={!!selectedEvent} onOpenChange={() => setSelectedEvent(null)}>
54        <DialogContent className="max-w-2xl">
55          <DialogHeader>
56            <DialogTitle>{selectedEvent?.name}</DialogTitle>
57          </DialogHeader>
58          {selectedEvent && (
59            <CalendlyWidget url={selectedEvent.schedulingUrl} height={600} />
60          )}
61        </DialogContent>
62      </Dialog>
63    </div>
64  );
65}

1// app/api/webhooks/calendly/route.ts
2// NOTE: This webhook handler only works after deployment to Netlify or Bolt Cloud.
3// Bolt's WebContainer has no public URL, so Calendly cannot reach it during development.
4import { NextResponse } from 'next/server';
5import crypto from 'crypto';
6
7function verifyCalendlySignature(
8  signingKey: string,
9  signature: string,
10  body: string
11): boolean {
12  // Signature format: t=timestamp,v1=hmac_signature
13  const parts = Object.fromEntries(signature.split(',').map((p) => p.split('=')));
14  const { t: timestamp, v1: hmacSig } = parts;
15  if (!timestamp || !hmacSig) return false;
16
17  const payload = `${timestamp}.${body}`;
18  const expectedSig = crypto
19    .createHmac('sha256', signingKey)
20    .update(payload)
21    .digest('hex');
22
23  return crypto.timingSafeEqual(
24    Buffer.from(hmacSig, 'hex'),
25    Buffer.from(expectedSig, 'hex')
26  );
27}
28
29export async function POST(request: Request) {
30  const signingKey = process.env.CALENDLY_WEBHOOK_SIGNING_KEY;
31  if (!signingKey) {
32    return NextResponse.json({ error: 'Signing key not configured' }, { status: 500 });
33  }
34
35  const rawBody = await request.text();
36  const signature = request.headers.get('Calendly-Webhook-Signature') ?? '';
37
38  if (!verifyCalendlySignature(signingKey, signature, rawBody)) {
39    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
40  }
41
42  const event = JSON.parse(rawBody);
43  const eventType = event.event;
44  const payload = event.payload;
45
46  if (eventType === 'invitee.created') {
47    const { name, email } = payload.invitee;
48    const startTime = payload.event?.start_time;
49    console.log(`New booking: ${name} (${email}) at ${startTime}`);
50    // TODO: Send confirmation email, update database, etc.
51  } else if (eventType === 'invitee.canceled') {
52    const { name, email } = payload.invitee;
53    console.log(`Booking canceled: ${name} (${email})`);
54    // TODO: Update database, send cancellation email
55  }
56
57  return NextResponse.json({ received: true });
58}