How to Integrate Bolt.new with Acuity Scheduling

1// lib/acuity.ts
2const ACUITY_BASE_URL = 'https://acuityscheduling.com/api/v1';
3
4function getAuthHeader(): string {
5  const userId = process.env.ACUITY_USER_ID;
6  const apiKey = process.env.ACUITY_API_KEY;
7  if (!userId || !apiKey) {
8    throw new Error('ACUITY_USER_ID and ACUITY_API_KEY must be set in .env');
9  }
10  return `Basic ${Buffer.from(`${userId}:${apiKey}`).toString('base64')}`;
11}
12
13export async function acuityFetch<T = unknown>(
14  path: string,
15  params?: Record<string, string | number>
16): Promise<T> {
17  const url = new URL(`${ACUITY_BASE_URL}${path}`);
18  if (params) {
19    Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, String(v)));
20  }
21
22  const response = await fetch(url.toString(), {
23    headers: {
24      Authorization: getAuthHeader(),
25      'Content-Type': 'application/json',
26    },
27  });
28
29  if (!response.ok) {
30    const err = await response.json().catch(() => ({ message: response.statusText })) as { message?: string; error?: string };
31    throw new Error(err.message || err.error || `Acuity API error: ${response.status}`);
32  }
33
34  return response.json() as Promise<T>;
35}
36
37export async function acuityPost<T = unknown>(path: string, body: unknown): Promise<T> {
38  const response = await fetch(`${ACUITY_BASE_URL}${path}`, {
39    method: 'POST',
40    headers: {
41      Authorization: getAuthHeader(),
42      'Content-Type': 'application/json',
43    },
44    body: JSON.stringify(body),
45  });
46
47  if (!response.ok) {
48    const err = await response.json().catch(() => ({ message: response.statusText })) as { message?: string; error?: string };
49    throw new Error(err.message || err.error || `Acuity POST error: ${response.status}`);
50  }
51
52  return response.json() as Promise<T>;
53}

1'use client';
2// components/BookingWidget.tsx
3import { useEffect, useRef, useState } from 'react';
4
5interface BookingWidgetProps {
6  appointmentTypeId?: number;
7  height?: number;
8  prefillEmail?: string;
9  prefillFirstName?: string;
10  prefillLastName?: string;
11  onBooked?: (appointment: Record<string, unknown>) => void;
12}
13
14export function BookingWidget({
15  appointmentTypeId,
16  height = 800,
17  prefillEmail,
18  prefillFirstName,
19  prefillLastName,
20  onBooked,
21}: BookingWidgetProps) {
22  const [isLoaded, setIsLoaded] = useState(false);
23  const ownerId = process.env.NEXT_PUBLIC_ACUITY_OWNER_ID;
24
25  const src = new URL('https://app.acuityscheduling.com/schedule.php');
26  if (ownerId) src.searchParams.set('owner', ownerId);
27  if (appointmentTypeId) src.searchParams.set('appointmentType', String(appointmentTypeId));
28  if (prefillEmail) src.searchParams.set('email', prefillEmail);
29  if (prefillFirstName) src.searchParams.set('firstName', prefillFirstName);
30  if (prefillLastName) src.searchParams.set('lastName', prefillLastName);
31
32  useEffect(() => {
33    function handleMessage(event: MessageEvent) {
34      // Only accept messages from Acuity's domain
35      if (!event.origin.includes('acuityscheduling.com')) return;
36
37      if (event.data === 'acuity.scheduling.loaded') {
38        setIsLoaded(true);
39      }
40
41      if (typeof event.data === 'object' && event.data?.action === 'acuity.scheduled') {
42        onBooked?.(event.data.data as Record<string, unknown>);
43      }
44    }
45
46    window.addEventListener('message', handleMessage);
47    return () => window.removeEventListener('message', handleMessage);
48  }, [onBooked]);
49
50  return (
51    <div className="relative w-full" style={{ height }}>
52      {!isLoaded && (
53        <div className="absolute inset-0 flex items-center justify-center bg-gray-50 rounded-lg animate-pulse">
54          <p className="text-gray-400">Loading scheduling widget...</p>
55        </div>
56      )}
57      <iframe
58        src={src.toString()}
59        title="Schedule an appointment"
60        width="100%"
61        height={height}
62        frameBorder="0"
63        className={`rounded-lg transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
64      />
65    </div>
66  );
67}

1// app/api/acuity/appointments/route.ts
2import { NextResponse } from 'next/server';
3import { acuityPost } from '@/lib/acuity';
4
5interface BookingRequest {
6  appointmentTypeId: number;
7  datetime: string;
8  firstName: string;
9  lastName: string;
10  email: string;
11  phone?: string;
12  notes?: string;
13}
14
15interface AcuityAppointment {
16  id: number;
17  datetime: string;
18  duration: number;
19  confirmationPage: string;
20  appointmentType: { name: string; duration: number };
21  calendar: { name: string };
22  firstName: string;
23  lastName: string;
24  email: string;
25}
26
27export async function POST(request: Request) {
28  const body = await request.json() as BookingRequest;
29
30  if (!body.appointmentTypeId || !body.datetime || !body.firstName || !body.lastName || !body.email) {
31    return NextResponse.json(
32      { error: 'appointmentTypeId, datetime, firstName, lastName, and email are required' },
33      { status: 400 }
34    );
35  }
36
37  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(body.email)) {
38    return NextResponse.json({ error: 'Invalid email address' }, { status: 400 });
39  }
40
41  try {
42    const appointment = await acuityPost<AcuityAppointment>('/appointments', {
43      appointmentTypeID: body.appointmentTypeId,
44      datetime: body.datetime,
45      firstName: body.firstName,
46      lastName: body.lastName,
47      email: body.email,
48      ...(body.phone ? { phone: body.phone } : {}),
49      ...(body.notes ? { notes: body.notes } : {}),
50    });
51
52    return NextResponse.json({
53      success: true,
54      appointment: {
55        id: appointment.id,
56        datetime: appointment.datetime,
57        duration: appointment.duration,
58        type: appointment.appointmentType.name,
59        calendarName: appointment.calendar.name,
60        clientName: `${appointment.firstName} ${appointment.lastName}`,
61        confirmationPage: appointment.confirmationPage,
62      },
63    });
64  } catch (err) {
65    const message = err instanceof Error ? err.message : 'Failed to create appointment';
66    const isSlotTaken = message.toLowerCase().includes('not available') || message.toLowerCase().includes('time slot');
67    return NextResponse.json(
68      { error: message, retry: isSlotTaken },
69      { status: isSlotTaken ? 409 : 500 }
70    );
71  }
72}

1// app/api/acuity/webhook/route.ts
2// IMPORTANT: Acuity webhooks require deployment to Netlify or Bolt Cloud.
3// The Bolt WebContainer preview cannot receive incoming POST requests from Acuity.
4//
5// After deploying:
6// 1. Go to Acuity → Business Settings → Integrations → Webhooks
7// 2. Add webhook URL: https://yourapp.netlify.app/api/acuity/webhook
8// 3. Select events: scheduled, rescheduled, cancelled
9import { NextResponse } from 'next/server';
10import { acuityFetch } from '@/lib/acuity';
11
12interface AcuityWebhookBody {
13  action: 'scheduled' | 'rescheduled' | 'cancelled' | 'no_show';
14  id: number;
15  appointmentTypeID: number;
16  calendarID?: number;
17}
18
19export async function POST(request: Request) {
20  const body = await request.json() as AcuityWebhookBody;
21  const { action, id } = body;
22
23  console.log(`[Acuity Webhook] ${action} — appointment ${id}`);
24
25  if (action === 'scheduled') {
26    // Fetch full appointment details asynchronously
27    acuityFetch(`/appointments/${id}`)
28      .then((appt) => {
29        console.log('[Acuity] New appointment:', appt);
30        // Add your logic here: notify via Slack, update CRM, send custom email, etc.
31      })
32      .catch((err) => console.error('[Acuity] Failed to fetch appointment:', err));
33  }
34
35  if (action === 'cancelled') {
36    console.log(`[Acuity] Appointment ${id} cancelled`);
37    // Add cancellation logic: free up resources, notify provider, etc.
38  }
39
40  // Return 200 immediately — process async
41  return NextResponse.json({ received: true });
42}