How to Integrate Zocdoc with V0

Start by using V0 to generate the surrounding page layout for the Zocdoc booking widget. The widget itself is a fixed-size embedded element from Zocdoc, but it needs a well-designed page context to feel like a native part of your app. V0 is excellent at building these surrounding layouts: provider bio sections, insurance lists, office hours, map embeds, and review summaries. When prompting V0, describe the full page including a placeholder container for the booking widget. Use a specific placeholder like a gray rounded box with explicit dimensions — Zocdoc booking widgets are typically around 380px wide and 500-600px tall on desktop. This placeholder will be replaced with the actual Zocdoc widget code after V0 generates the page layout. For provider pages, the booking widget container should be prominently placed, typically in a right-side column on desktop and stacked below the provider details on mobile. Ask V0 to make the layout responsive. The booking container should not have any CSS overflow hidden or maximum height constraints — Zocdoc's widget may need to expand to show a multi-step booking form including insurance selection and reason for visit. V0-generated layouts may add overly aggressive box-shadow or border-radius styles to embedded containers that conflict with the Zocdoc widget's own styling. If the widget looks clipped after embedding, ask V0 to remove padding and overflow constraints from the widget container element. The widget works best inside a plain div with only width and height constraints.

Once the page layout is in place, add the actual Zocdoc embedding code. Zocdoc provides embeddable booking widgets to healthcare providers through their provider portal. The embed mechanism depends on your Zocdoc account type: most providers receive either an iframe snippet or a JavaScript widget that renders into a target element. For iframe-based embeds, the integration is straightforward — replace the placeholder div with an HTML iframe element pointing to your Zocdoc booking URL. The URL pattern for direct provider booking pages is https://www.zocdoc.com/practice/{practice-id}/booking and can be embedded directly. In Next.js, you can use an iframe element directly in your React component. For JavaScript widget embeds (available to providers and partners), create a client component in your Next.js app that loads the Zocdoc script after the component mounts. Use a useEffect hook to append the script tag to the document and initialize the widget with your provider or widget configuration. This approach gives Zocdoc's widget access to the DOM element with the correct ID to render into. A V0-specific consideration: if you ask V0 to add the Zocdoc script to the page, it may generate code that tries to load the script in a Server Component using next/script. Because the Zocdoc widget interacts with the DOM and accesses browser APIs, the component loading the script must be a client component with the 'use client' directive at the top. If V0 generates a server component version, add 'use client' at the top of the file and add a useEffect for the script initialization. For healthcare organizations building more complex appointment management systems that integrate Zocdoc with patient records and scheduling back-ends, RapidDev's team can assist with both the V0 UI generation and the API route architecture to connect Zocdoc partner APIs with internal healthcare systems.

1'use client';
2
3import { useEffect } from 'react';
4
5interface ZocdocWidgetProps {
6  providerId?: string;
7  widgetHeight?: number;
8}
9
10export function ZocdocWidget({ providerId, widgetHeight = 520 }: ZocdocWidgetProps) {
11  const resolvedProviderId = providerId || process.env.NEXT_PUBLIC_ZOCDOC_PROVIDER_ID;
12
13  useEffect(() => {
14    if (!resolvedProviderId) {
15      console.warn('ZocdocWidget: No provider ID configured');
16      return;
17    }
18
19    // Load Zocdoc widget script
20    const scriptId = 'zocdoc-widget-script';
21    if (document.getElementById(scriptId)) return; // Prevent duplicate loading
22
23    const script = document.createElement('script');
24    script.id = scriptId;
25    // Use your actual Zocdoc widget script URL from the provider portal
26    script.src = process.env.NEXT_PUBLIC_ZOCDOC_WIDGET_URL || 'https://www.zocdoc.com/widget/js/widget.js';
27    script.async = true;
28    script.onload = () => {
29      // Initialize widget after script loads
30      if (typeof window !== 'undefined' && (window as Record<string, unknown>).ZocdocWidget) {
31        const ZW = (window as Record<string, unknown>).ZocdocWidget as {
32          init: (config: { containerId: string; providerId: string }) => void;
33        };
34        ZW.init({
35          containerId: 'zocdoc-booking-container',
36          providerId: resolvedProviderId,
37        });
38      }
39    };
40    document.body.appendChild(script);
41  }, [resolvedProviderId]);
42
43  return (
44    <div
45      id="zocdoc-booking-container"
46      style={{ minHeight: widgetHeight, width: '100%' }}
47      className="bg-gray-50 rounded-lg"
48    />
49  );
50}

Set up the environment variables that control which provider or widget configuration is loaded. For basic widget embedding, these are public-facing identifiers (safe to include in client-side code with NEXT_PUBLIC_) — they identify which provider's booking interface to show, not any secret credentials. In Vercel Dashboard → Settings → Environment Variables, add: NEXT_PUBLIC_ZOCDOC_PROVIDER_ID: Your Zocdoc provider or practice ID. This is a public identifier visible in your Zocdoc booking URLs — for example, in zocdoc.com/doctor/james-wilson-md-123, the identifier is embedded in the path. Get the canonical ID from your Zocdoc provider portal. NEXT_PUBLIC_ZOCDOC_WIDGET_URL: The URL of the Zocdoc widget JavaScript file. Zocdoc provides this in your provider portal when you set up the web embedding option. This is a public CDN URL. For Zocdoc Partner API access (if you have a partnership agreement), also add: ZOCDOC_API_KEY: Your partner API key without any NEXT_PUBLIC_ prefix — this is a server-side secret that must only be used in Next.js API routes. ZOCDOC_API_BASE_URL: The partner API base URL provided by Zocdoc's developer program. The distinction between NEXT_PUBLIC_ variables (widget identifiers, OK to be public) and server-only variables (API keys) is critical. Your provider ID appearing in HTML is expected and harmless — your API key appearing in HTML would allow anyone to make authenticated API calls on your behalf.

1# .env.local — local development
2# Public identifiers (safe in browser)
3NEXT_PUBLIC_ZOCDOC_PROVIDER_ID=your_provider_id
4NEXT_PUBLIC_ZOCDOC_WIDGET_URL=https://www.zocdoc.com/widget/js/widget.js
5
6# Partner API credentials — server-only, no NEXT_PUBLIC_ prefix
7ZOCDOC_API_KEY=your_partner_api_key
8ZOCDOC_API_BASE_URL=https://api.zocdoc.com

If you have been approved for the Zocdoc Partner API program, you can build a Next.js API route that queries provider availability, searches for doctors, and initiates the booking process programmatically — giving you much more UI flexibility than the embedded widget. Create app/api/zocdoc/search/route.ts to handle doctor search queries. The Zocdoc partner API (available at the base URL provided by Zocdoc) accepts parameters like specialty, insurance_carrier, location (latitude/longitude or zip code), and date range. The API returns provider listings with availability slots that you can display in your custom V0-generated UI. Authentication for the partner API uses your API key, typically as an Authorization header or as an x-api-key header — the exact mechanism depends on your partnership agreement and the API version you have access to. Store the key in ZOCDOC_API_KEY (server-side only, no NEXT_PUBLIC_ prefix) and include it in the Authorization header of each API call. Because Zocdoc's partner API returns real-time availability data that changes frequently, do not cache responses for more than 60 seconds — a cached 'available' slot could already be booked by another patient. Use Next.js route segment config with export const revalidate = 0 to ensure fresh data on every request. Note that as of 2026, Zocdoc's public API access is restricted to approved partners. If you are building a consumer healthcare app and need broader provider data, the widget embed approach is the path of least resistance while you work through the partnership application process.

1import { NextRequest, NextResponse } from 'next/server';
2
3export const revalidate = 0; // Always fetch fresh availability data
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const specialty = searchParams.get('specialty');
8  const location = searchParams.get('location');
9  const insurance = searchParams.get('insurance');
10  const date = searchParams.get('date');
11
12  if (!specialty || !location) {
13    return NextResponse.json(
14      { error: 'specialty and location are required' },
15      { status: 400 }
16    );
17  }
18
19  try {
20    const params = new URLSearchParams({
21      specialty,
22      location,
23      ...(insurance && { insurance }),
24      ...(date && { date }),
25    });
26
27    const response = await fetch(
28      `${process.env.ZOCDOC_API_BASE_URL}/providers/search?${params}`,
29      {
30        headers: {
31          Authorization: `Bearer ${process.env.ZOCDOC_API_KEY}`,
32          'Content-Type': 'application/json',
33        },
34        cache: 'no-store',
35      }
36    );
37
38    if (!response.ok) {
39      return NextResponse.json(
40        { error: `Zocdoc API error: ${response.status}` },
41        { status: response.status }
42      );
43    }
44
45    const data = await response.json();
46    return NextResponse.json(data);
47  } catch (error) {
48    console.error('Zocdoc search error:', error);
49    return NextResponse.json(
50      { error: 'Failed to search providers' },
51      { status: 500 }
52    );
53  }
54}