Zocdoc

Before writing any FlutterFlow code, you need approved Zocdoc partner credentials. Visit zocdoc.com and navigate to their provider or partner resources — the specific URL for partner API applications may change, so search for 'Zocdoc API integration partner program' and use the official contact form or provider portal. When applying, be specific about your use case: whether you're a healthcare provider practice syncing your schedule, a software vendor building practice management tools, or a concierge healthcare service. Zocdoc evaluates partners based on their US healthcare context and data handling practices. The more clearly you describe how you'll handle PHI and what HIPAA safeguards you have in place, the smoother the approval process. Once approved, you'll receive partner API credentials — these may take the form of an OAuth client ID and secret (for a client credentials flow), an API key, or a combination. The exact credential format is provided by Zocdoc and may vary by partner tier. You will NOT be issuing these credentials yourself — they come from Zocdoc's partnership team. During the wait for approval, you can begin building the FlutterFlow UI screens and the Cloud Function scaffold — just use mock data for testing. When credentials arrive, you'll configure them as environment variables in the Cloud Function and replace mock responses with real API calls.

Your Zocdoc partner credentials are secrets. Putting them in a FlutterFlow API Call header compiles them into your app binary and exposes them to anyone who downloads and decompiles the APK. Beyond security, appointment and patient data is PHI — keeping credentials server-side is a basic HIPAA hygiene requirement for any US healthcare application. Deploy a Firebase Cloud Function that holds your credentials and proxies requests to api.zocdoc.com/v1. The function receives requests from your FlutterFlow app, adds authentication headers, and forwards to Zocdoc. It also sets CORS headers so the integration works when your FlutterFlow app is published to web. Here's a scaffold for the proxy function: ```javascript const functions = require('firebase-functions'); const axios = require('axios'); exports.zocdocProxy = functions.https.onRequest(async (req, res) => { res.set('Access-Control-Allow-Origin', '*'); if (req.method === 'OPTIONS') { res.set('Access-Control-Allow-Methods', 'GET,POST'); res.set('Access-Control-Allow-Headers', 'Content-Type,Authorization'); return res.status(204).send(''); } const path = req.query.path || '/'; const zocdocBase = 'https://api.zocdoc.com/v1'; try { const response = await axios({ method: req.method, url: `${zocdocBase}${path}`, headers: { 'Authorization': `Bearer ${process.env.ZOCDOC_API_TOKEN}`, 'Content-Type': 'application/json' }, data: req.body }); return res.json(response.data); } catch (err) { return res.status(err.response?.status || 500).json({ error: err.message, details: err.response?.data }); } }); ``` Set `ZOCDOC_API_TOKEN` (or whatever credential format Zocdoc provides) as a Cloud Function environment variable in the Firebase console. If Zocdoc issues an OAuth client credentials flow, add a token-minting step before the proxied request. Deploy the function and note its HTTPS URL.

1const functions = require('firebase-functions');
2const axios = require('axios');
3
4exports.zocdocProxy = functions.https.onRequest(async (req, res) => {
5  res.set('Access-Control-Allow-Origin', '*');
6  if (req.method === 'OPTIONS') {
7    res.set('Access-Control-Allow-Methods', 'GET,POST');
8    res.set('Access-Control-Allow-Headers', 'Content-Type,Authorization');
9    return res.status(204).send('');
10  }
11  const path = req.query.path || '/';
12  const zocdocBase = 'https://api.zocdoc.com/v1';
13  try {
14    const response = await axios({
15      method: req.method,
16      url: `${zocdocBase}${path}`,
17      headers: {
18        'Authorization': `Bearer ${process.env.ZOCDOC_API_TOKEN}`,
19        'Content-Type': 'application/json'
20      },
21      data: req.body
22    });
23    return res.json(response.data);
24  } catch (err) {
25    return res.status(err.response?.status || 500).json({
26      error: err.message,
27      details: err.response?.data
28    });
29  }
30});

Open your FlutterFlow project, click API Calls in the left navigation panel, click + Add → Create API Group. Name it 'Zocdoc'. In the Base URL field, paste your Cloud Function URL — e.g. `https://us-central1-YOUR_PROJECT.cloudfunctions.net`. This is the only URL that appears in FlutterFlow; Zocdoc's actual domain never appears in the client. Now add individual API Calls to the group: **getAvailability** — GET, endpoint `/zocdocProxy?path=/providers/{providerId}/availability`. Add `providerId` and `date` as Variables (Strings). Add a `date` variable and use it as a query parameter. **getAppointments** — GET, endpoint `/zocdocProxy?path=/appointments` with a `date` query param for today's date. **createAppointment** — POST, endpoint `/zocdocProxy?path=/appointments`. Body: JSON with `providerId`, `patientId`, `slotId`, `reasonForVisit` as Variables. For each API Call, go to Response & Test, paste a sample Zocdoc response JSON (use mock data while waiting for credentials), and click Generate JSON Paths. For availability, key paths include `$.slots[*].startTime`, `$.slots[*].slotId`, `$.slots[*].isAvailable`. For appointments: `$.appointments[*].id`, `$.appointments[*].patientName`, `$.appointments[*].startTime`, `$.appointments[*].status`.

1{
2  "api_group": "Zocdoc",
3  "base_url": "https://us-central1-YOUR_PROJECT.cloudfunctions.net",
4  "calls": [
5    {
6      "name": "getAvailability",
7      "method": "GET",
8      "endpoint": "/zocdocProxy",
9      "query_params": {
10        "path": "/providers/{{ providerId }}/availability",
11        "date": "{{ date }}"
12      },
13      "json_paths": {
14        "slotIds": "$.slots[*].slotId",
15        "startTimes": "$.slots[*].startTime",
16        "available": "$.slots[*].isAvailable"
17      }
18    },
19    {
20      "name": "createAppointment",
21      "method": "POST",
22      "endpoint": "/zocdocProxy",
23      "query_params": {
24        "path": "/appointments"
25      },
26      "body": {
27        "providerId": "{{ providerId }}",
28        "slotId": "{{ slotId }}",
29        "patientId": "{{ patientId }}",
30        "reasonForVisit": "{{ reasonForVisit }}"
31      }
32    }
33  ]
34}

With the API Group in place, build the patient-facing or staff-facing booking screens. For a scheduling UI, add a new page called 'Book Appointment'. Add a DatePicker widget at the top so the user can select a date, and a variable `selectedDate` to store it. On the same page, add a ListView widget. Set its data source to a Backend/API Call using the `getAvailability` call, passing the provider's ID (from App State or the page's route parameter) and `selectedDate` as variables. Bind each list tile to display the slot's `startTime` and an 'Available' / 'Booked' badge based on `isAvailable`. For each available slot tile, add a 'Book' button. On the button's action: first show a BottomSheet widget with a form asking for reason for visit (a TextField). Then trigger the `createAppointment` API Call, passing `providerId`, `slotId`, `currentUser.uid` as `patientId`, and the text field value as `reasonForVisit`. After success, show a SnackBar confirmation and re-trigger the availability call to refresh the list. For the appointment list screen (staff view), trigger `getAppointments` on page load using an On Page Load action. Bind a ListView to the results, showing patient name, time, and status. Add a pull-to-refresh by connecting a RefreshIndicator widget to re-trigger the API Call. Important: writes (creating appointments) need idempotency handling. If the same booking is submitted twice (e.g. double-tap or network retry), you should not create duplicate appointments. Send a unique idempotency key in the `createAppointment` call body — generate it from a UUID custom function in FlutterFlow.

Zocdoc pushes appointment change events (cancellations, reschedules, new bookings from the Zocdoc consumer app) to a webhook URL you register in the partner portal. FlutterFlow has no server endpoint, so the webhook receiver must be a separate Cloud Function that Zocdoc calls directly. Deploy a second Cloud Function named `zocdocWebhook` that receives POST requests from Zocdoc, validates the payload (check any signature header Zocdoc provides to confirm authenticity), and writes the appointment update to a Firestore collection. Your FlutterFlow app then listens to that Firestore collection using a real-time StreamBuilder/Firestore backend query — when the Cloud Function writes, the app updates instantly. Here is the webhook receiver scaffold: ```javascript exports.zocdocWebhook = functions.https.onRequest(async (req, res) => { if (req.method !== 'POST') return res.status(405).send('Method Not Allowed'); const event = req.body; // Validate Zocdoc signature if provided (check partner docs for header name) const db = admin.firestore(); await db.collection('appointmentUpdates').add({ appointmentId: event.appointmentId, status: event.status, providerId: event.providerId, updatedAt: admin.firestore.FieldValue.serverTimestamp(), raw: event }); return res.status(200).json({ received: true }); }); ``` Register this function's HTTPS URL in your Zocdoc partner portal as the webhook destination. In FlutterFlow, add an On Page Load action that queries the `appointmentUpdates` collection ordered by `updatedAt` descending to surface the latest changes to staff. You can also use Firestore's real-time snapshot listener (FlutterFlow supports this natively via the Firestore backend query with streaming enabled).

1const admin = require('firebase-admin');
2const functions = require('firebase-functions');
3
4exports.zocdocWebhook = functions.https.onRequest(async (req, res) => {
5  if (req.method !== 'POST') return res.status(405).send('Method Not Allowed');
6  const event = req.body;
7  // Validate Zocdoc signature if provided (check partner docs for header name)
8  const db = admin.firestore();
9  await db.collection('appointmentUpdates').add({
10    appointmentId: event.appointmentId,
11    status: event.status,
12    providerId: event.providerId,
13    patientId: event.patientId || null,
14    updatedAt: admin.firestore.FieldValue.serverTimestamp(),
15    raw: event
16  });
17  return res.status(200).json({ received: true });
18});