How to Integrate Bolt.new with Zocdoc

Before writing a single line of code, decide which of the three integration paths fits your use case. This decision saves significant time. Path 1 — Zocdoc Widget Embed: if you are a verified Zocdoc healthcare provider (a clinic, practice, or individual physician already listed on Zocdoc), log in to your Zocdoc provider portal and look for 'Website Integration' or 'Booking Widget' options. Zocdoc provides embeddable HTML snippets that add their booking interface to your site. This is the only officially supported way to use Zocdoc's booking system outside of zocdoc.com. You cannot access this without an active Zocdoc provider account — there is no self-serve widget for general developers. Path 2 — Link to Zocdoc Profiles: if you are building a healthcare directory or navigation product, you can build the discovery and filtering UI in Bolt while linking to individual Zocdoc profile URLs. Zocdoc profile pages follow a predictable URL pattern (zocdoc.com/doctor/name-NNN). Your Supabase database stores provider details and their Zocdoc profile URL; clicking 'Book' in your app opens that URL in a new tab. This approach requires no API and no partnership agreement. Path 3 — Custom Booking System: if you are building a product for a specific clinic, telehealth startup, or healthcare SaaS, build the entire booking flow from scratch in Bolt with Supabase as the backend. You own the data, control the UX, and have no dependency on Zocdoc's platform or policies. This tutorial focuses on Path 3 as it applies to the widest range of developers and gives the most capability.

A robust appointment booking system needs at minimum three Supabase tables: doctors, availability_slots, and appointments. The doctors table stores provider information — name, specialty, bio, photo URL, and any filtering metadata like accepted insurance or languages spoken. The availability_slots table represents individual bookable time windows — each slot belongs to a doctor, has a start and end time, and an is_booked boolean flag. When a patient books, you update the slot's is_booked field to true and create a record in the appointments table. The appointments table links to the booked slot and stores patient contact information. This normalized structure prevents double-booking: the is_booked flag on the slot is the single source of truth for availability. For real-world applications, also add a Supabase Row Level Security policy so patients can only read their own appointment records and doctors can only read their own schedules. In the Bolt prompt, describe the full schema so the AI generates matching TypeScript types and Supabase queries. Adding a status field to appointments (pending, confirmed, cancelled, completed) enables a full appointment lifecycle workflow. Time zones are a common source of bugs — store all times in UTC in Supabase and convert to the user's local timezone in the frontend using the browser's Intl.DateTimeFormat API.

1// lib/supabase.ts
2import { createClient } from '@supabase/supabase-js';
3
4export type Doctor = {
5  id: string;
6  name: string;
7  specialty: string;
8  bio: string;
9  photo_url: string;
10  is_active: boolean;
11  created_at: string;
12};
13
14export type AvailabilitySlot = {
15  id: string;
16  doctor_id: string;
17  start_time: string;
18  end_time: string;
19  is_booked: boolean;
20  created_at: string;
21};
22
23export type Appointment = {
24  id: string;
25  slot_id: string;
26  patient_name: string;
27  patient_email: string;
28  patient_phone: string;
29  notes: string;
30  status: 'confirmed' | 'cancelled' | 'completed';
31  created_at: string;
32};
33
34const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
35const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
36
37export const supabase = createClient(supabaseUrl, supabaseKey);

The patient-facing booking flow starts with a doctor selection screen. Fetch the active doctors list from Supabase and display them in a filterable grid — specialty, location, and insurance are the most common filter dimensions for healthcare apps. When a patient clicks a doctor, show their profile and a calendar-style availability grid. The availability grid is the most complex UI element: query the availability_slots table for this doctor filtered to is_booked = false and start_time > now(), then group slots by date to render a week or month view. Each available slot appears as a clickable button. Use a date-picker library or build a simple grid that displays the next 7-14 days with time slots organized by hour. Selecting a slot moves the patient to the booking form step. Implement optimistic UI updates — when a patient clicks a slot, immediately show it as selected in the UI while the booking form loads. This prevents the jarring experience of a slot appearing available but being grabbed by another patient between click and form submission. For the actual booking, use a Supabase transaction or RLS policy to handle the race condition: the Supabase update query with a where clause on is_booked = false acts as an optimistic lock — if two patients try to book the same slot simultaneously, only the first one whose UPDATE query executes against is_booked = false will succeed.

1// hooks/useAvailability.ts
2import { useState, useEffect } from 'react';
3import { supabase, AvailabilitySlot } from '@/lib/supabase';
4
5export function useAvailability(doctorId: string) {
6  const [slots, setSlots] = useState<AvailabilitySlot[]>([]);
7  const [loading, setLoading] = useState(true);
8
9  useEffect(() => {
10    if (!doctorId) return;
11    const fetchSlots = async () => {
12      const now = new Date().toISOString();
13      const { data, error } = await supabase
14        .from('availability_slots')
15        .select('*')
16        .eq('doctor_id', doctorId)
17        .eq('is_booked', false)
18        .gte('start_time', now)
19        .order('start_time', { ascending: true });
20      if (!error && data) setSlots(data);
21      setLoading(false);
22    };
23    fetchSlots();
24  }, [doctorId]);
25
26  return { slots, loading };
27}
28
29export async function bookAppointment(
30  slotId: string,
31  patient: { name: string; email: string; phone: string; notes: string }
32) {
33  // Mark slot as booked
34  const { error: slotError } = await supabase
35    .from('availability_slots')
36    .update({ is_booked: true })
37    .eq('id', slotId)
38    .eq('is_booked', false); // Optimistic lock — fails if already booked
39
40  if (slotError) throw new Error('This slot was just booked by someone else. Please choose another time.');
41
42  // Create appointment record
43  const { data, error: apptError } = await supabase
44    .from('appointments')
45    .insert({
46      slot_id: slotId,
47      patient_name: patient.name,
48      patient_email: patient.email,
49      patient_phone: patient.phone,
50      notes: patient.notes,
51      status: 'confirmed',
52    })
53    .select()
54    .single();
55
56  if (apptError) throw apptError;
57  return data;
58}

After a successful booking, send a confirmation email to both the patient and the doctor. In Bolt's WebContainer development environment, outbound HTTP calls to email APIs work fine — you can call the Resend or SendGrid API directly from the frontend or via an API route during development. However, during development in Bolt's WebContainer, incoming webhooks cannot reach the browser-based runtime. This matters if you want to set up automated appointment reminders via a scheduled webhook service — those reminders need to fire against your deployed URL, not the Bolt preview. For reminder automation, deploy your app first and then configure the reminder service with your deployed Netlify or Vercel URL. The confirmation email should include the appointment date and time (formatted in the patient's time zone), the doctor's name and specialty, a cancellation link, and the clinic's address or a video meeting link for telehealth. Use Resend for sending emails since it offers a generous free tier and a simple REST API. Store your RESEND_API_KEY in the .env file for development and in Netlify's environment variables for production. When deploying to Netlify via Bolt's Settings → Applications, the Bolt WebContainer's node_modules are rebuilt in Netlify's standard Node.js environment — all packages work normally after deployment.

1// app/api/send-confirmation/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function POST(request: NextRequest) {
5  const { appointment, slot, doctor, patientEmail, doctorEmail } = await request.json();
6
7  const formattedTime = new Date(slot.start_time).toLocaleString('en-US', {
8    weekday: 'long',
9    year: 'numeric',
10    month: 'long',
11    day: 'numeric',
12    hour: '2-digit',
13    minute: '2-digit',
14    timeZoneName: 'short',
15  });
16
17  const resendApiKey = process.env.RESEND_API_KEY;
18
19  // Email to patient
20  await fetch('https://api.resend.com/emails', {
21    method: 'POST',
22    headers: {
23      'Authorization': `Bearer ${resendApiKey}`,
24      'Content-Type': 'application/json',
25    },
26    body: JSON.stringify({
27      from: 'appointments@yourclinic.com',
28      to: patientEmail,
29      subject: `Appointment Confirmed: ${doctor.name} on ${formattedTime}`,
30      html: `<h2>Your appointment is confirmed!</h2>
31             <p><strong>Doctor:</strong> ${doctor.name} (${doctor.specialty})</p>
32             <p><strong>Date & Time:</strong> ${formattedTime}</p>
33             <p><strong>Patient:</strong> ${appointment.patient_name}</p>
34             <p>Reply to this email if you need to reschedule.</p>`,
35    }),
36  });
37
38  // Email to doctor
39  await fetch('https://api.resend.com/emails', {
40    method: 'POST',
41    headers: {
42      'Authorization': `Bearer ${resendApiKey}`,
43      'Content-Type': 'application/json',
44    },
45    body: JSON.stringify({
46      from: 'appointments@yourclinic.com',
47      to: doctorEmail,
48      subject: `New Appointment: ${appointment.patient_name} at ${formattedTime}`,
49      html: `<h2>New appointment booked</h2>
50             <p><strong>Patient:</strong> ${appointment.patient_name}</p>
51             <p><strong>Contact:</strong> ${appointment.patient_email} / ${appointment.patient_phone}</p>
52             <p><strong>Time:</strong> ${formattedTime}</p>
53             <p><strong>Notes:</strong> ${appointment.notes || 'None'}</p>`,
54    }),
55  });
56
57  return NextResponse.json({ success: true });
58}