How to Integrate Doodle with V0

Before working with the Doodle API, use V0 to generate the scheduling interface. Scheduling UIs have specific interaction patterns — time slot selection grids, participant availability matrices, and confirmation flows — that V0 handles well when described clearly. For a poll creation flow, you need: a step to define the meeting title and duration, a step to select proposed time slots (typically a calendar with clickable time blocks), and a step to add participant email addresses. For a poll results view, you need: a grid showing time slots as columns and participant names as rows, with color-coded cells (green = available, red = unavailable, yellow = if need be), and a highlighted best time slot. Ask V0 to generate the time slot selection UI as a responsive calendar grid. Describe the interaction: clicking a date expands time slot options for that day, clicking a time slot toggles it as proposed. Show selected slots in a summary list on the right side. For mobile, collapse the calendar to a vertical list of date + time options. For the availability matrix (showing poll results), a CSS grid or table with color-coded cells works well. Ask V0 to generate this with a 'Most available' badge on the time slot with the highest participant count. The participant names column should be sticky on horizontal scroll for wide tables with many time slots.

Create a Next.js API route at `app/api/doodle/route.ts` that handles Doodle API authentication and proxies poll operations. Doodle uses OAuth2 client credentials flow for server-to-server authentication — exchange your client ID and secret for an access token, then use that token for API calls. Doodle's token endpoint is `https://api.doodle.com/oauth/token` with parameters: `grant_type=client_credentials`, `client_id={your_id}`, `client_secret={your_secret}`. The token response includes `access_token` (valid for a limited time, typically 1 hour) and `token_type: Bearer`. Doodle's REST API v2 base URL is `https://api.doodle.com/api/v2/`. Key endpoints: - `POST /polls` — create a new poll with title, options (time slots), and invitee emails - `GET /polls/{pollId}` — fetch poll details including all options and participant responses - `PUT /polls/{pollId}/participants/{participantId}` — update participant availability - `POST /polls/{pollId}/book` — mark a time slot as the confirmed booking The poll creation payload requires a `type` (standard, book, or signup), `title`, `options` (array of proposed time slots as ISO datetime strings), and `initiator` (name/email of poll creator). Time slot options are structured as `{ start: ISO_datetime, end: ISO_datetime }` objects. Cache the access token with expiry tracking to avoid refreshing it on every API call. Use a module-level variable similar to the Zoho CRM pattern — store the token and its expiry timestamp, check if it's still valid before making a new token request. Note: if you don't yet have Doodle API credentials and are in development, implement mock responses that match the Doodle API response format. This lets you build and test the UI integration before API access is provisioned.

1// app/api/doodle/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const DOODLE_BASE = 'https://api.doodle.com/api/v2';
5const DOODLE_TOKEN_URL = 'https://api.doodle.com/oauth/token';
6const CLIENT_ID = process.env.DOODLE_CLIENT_ID!;
7const CLIENT_SECRET = process.env.DOODLE_CLIENT_SECRET!;
8
9let tokenCache: { token: string; expiresAt: number } | null = null;
10
11async function getToken(): Promise<string> {
12  if (tokenCache && Date.now() < tokenCache.expiresAt - 60_000) {
13    return tokenCache.token;
14  }
15  const res = await fetch(DOODLE_TOKEN_URL, {
16    method: 'POST',
17    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
18    body: new URLSearchParams({
19      grant_type: 'client_credentials',
20      client_id: CLIENT_ID,
21      client_secret: CLIENT_SECRET,
22    }),
23  });
24  if (!res.ok) throw new Error(`Doodle token error: ${res.status}`);
25  const data = await res.json();
26  tokenCache = {
27    token: data.access_token,
28    expiresAt: Date.now() + (data.expires_in || 3600) * 1000,
29  };
30  return data.access_token;
31}
32
33async function doodleFetch(method: string, path: string, body?: object) {
34  const token = await getToken();
35  const res = await fetch(`${DOODLE_BASE}${path}`, {
36    method,
37    headers: {
38      Authorization: `Bearer ${token}`,
39      'Content-Type': 'application/json',
40      Accept: 'application/json',
41    },
42    body: body ? JSON.stringify(body) : undefined,
43  });
44  if (!res.ok) {
45    const error = await res.text();
46    throw new Error(`Doodle API error ${res.status}: ${error}`);
47  }
48  return res.json();
49}
50
51export async function POST(request: NextRequest) {
52  const { action, ...data } = await request.json();
53
54  try {
55    if (action === 'create_poll') {
56      const poll = await doodleFetch('POST', '/polls', {
57        title: data.title,
58        type: 'standard',
59        options: data.options, // [{ start: ISO, end: ISO }]
60        initiator: data.initiator, // { name, email }
61        invitees: data.invitees?.map((email: string) => ({ email })) || [],
62      });
63      return NextResponse.json(poll);
64    }
65    return NextResponse.json({ error: 'Unknown action' }, { status: 400 });
66  } catch (err: any) {
67    return NextResponse.json({ error: err.message }, { status: 500 });
68  }
69}
70
71export async function GET(request: NextRequest) {
72  const { searchParams } = new URL(request.url);
73  const pollId = searchParams.get('pollId');
74
75  if (!pollId) return NextResponse.json({ error: 'pollId required' }, { status: 400 });
76
77  try {
78    const poll = await doodleFetch('GET', `/polls/${pollId}`);
79    return NextResponse.json(poll);
80  } catch (err: any) {
81    return NextResponse.json({ error: err.message }, { status: 500 });
82  }
83}

Navigate to your Vercel project → Settings → Environment Variables. Add the credentials for your Doodle API application. Add `DOODLE_CLIENT_ID` — the Client ID from your registered Doodle API application. Doodle provides this when you register as a partner or receive sandbox access through their developer program. Add `DOODLE_CLIENT_SECRET` — the Client Secret for your application. This is used with the Client ID to obtain OAuth2 access tokens. Store this as a server-only variable (no `NEXT_PUBLIC_` prefix) — it must never be exposed in the browser. To get Doodle API credentials, visit Doodle's developer documentation at doodle.com/api or contact Doodle's partner team. Doodle's API is not open to general public sign-up — you need to register as a technology partner. For development, Doodle typically provides sandbox credentials with limited functionality for testing your integration before going live. For Vercel Preview environments (used for pull request previews), use the same sandbox credentials. Only use production API credentials in the Production environment to avoid polluting your live account with test polls. After adding the environment variables, trigger a redeployment and test the token acquisition by checking your server logs — a successful token response means the credentials are correct. If you're building this integration before receiving Doodle API access, add placeholder values and implement a `DOODLE_DEMO_MODE=true` environment variable. When demo mode is on, your API route returns hardcoded mock data instead of calling the Doodle API.

Wire the V0-generated scheduling wizard to your Doodle API route. When the user completes the final step of the wizard and clicks 'Create Poll', POST the collected data to `/api/doodle` with `action: 'create_poll'`. The key data transformation is converting selected time slots from your UI's format to Doodle's ISO datetime format. Your UI likely stores selected slots as date strings and time ranges ('2026-04-15 afternoon'). Convert these to specific ISO start and end times: `{ start: '2026-04-15T14:00:00', end: '2026-04-15T16:00:00' }`. After successful poll creation, Doodle returns the created poll object including a `participationUrl` — the link for participants to respond. Display this URL prominently as a copyable link. Also show a QR code of this URL using a library like `qrcode.react` so it can be shared in presentations or printed. For displaying poll results, poll regularly using the `/api/doodle?pollId={id}` endpoint or use a 'refresh' button. Doodle's poll response object includes `participants` (array of respondents with their availability choices) and `options` (the time slots). Map this to your availability matrix component — create a 2D structure where rows are participants and columns are time slots. To determine the 'best time', count votes per option and highlight the option with the most 'yes' responses. Handle ties by showing all tied options as equally highlighted. RapidDev's team can help implement more sophisticated scheduling logic like 'required attendees vs optional' if your use case requires it. For the embedded Doodle approach (alternative to the custom UI): Doodle provides an embed URL format where you can iframe a Doodle poll directly into your page. The embed URL is `https://doodle.com/poll/{pollId}` in an iframe — this is simpler but gives you less control over the visual design.

1// Helper: convert UI time selection to Doodle ISO format
2export function slotsToISOOptions(
3  selections: { date: string; hour: number; duration: number }[]
4): { start: string; end: string }[] {
5  return selections.map(({ date, hour, duration }) => {
6    const start = new Date(`${date}T${hour.toString().padStart(2, '0')}:00:00`);
7    const end = new Date(start.getTime() + duration * 60 * 1000);
8    return {
9      start: start.toISOString(),
10      end: end.toISOString(),
11    };
12  });
13}
14
15// Helper: compute best time from poll response
16export function getBestSlot(poll: {
17  options: { id: string; start: string; end: string }[];
18  participants: { preferences: { optionId: string; availability: string }[] }[];
19}): string | null {
20  const voteCounts: Record<string, number> = {};
21  poll.options.forEach(opt => { voteCounts[opt.id] = 0; });
22  poll.participants.forEach(p => {
23    p.preferences.forEach(pref => {
24      if (pref.availability === 'yes') voteCounts[pref.optionId] = (voteCounts[pref.optionId] || 0) + 1;
25    });
26  });
27  const maxVotes = Math.max(...Object.values(voteCounts));
28  if (maxVotes === 0) return null;
29  return Object.entries(voteCounts).find(([, v]) => v === maxVotes)?.[0] || null;
30}