How to Integrate Qualtrics with V0

Open V0 at v0.dev and describe the experience management dashboard you want to build. Qualtrics data is rich — survey responses contain answer values for each question, metadata like response timing and completion status, and custom embedded data fields you can pass when distributing surveys. When prompting V0, be specific about the metrics you want to visualize: NPS scores require grouping respondents by their 0-10 rating into promoters (9-10), passives (7-8), and detractors (0-6). Satisfaction metrics are typically displayed as average scores with distribution bars. Verbatim text responses work well as scrollable card lists with sentiment color coding. For organizational dashboards (employee surveys, department breakdowns), hierarchical table views with expandable rows are effective. V0 generates excellent chart components when you reference specific chart types — specify whether you want bar charts, line charts, donut charts, or heat maps for different metrics. The component should call /api/qualtrics/responses for data and accept filter parameters for date range, department, or question group. After generating the initial UI with mock data structures that match Qualtrics's response format, use V0's Git panel to push the code to GitHub before writing the API route.

Create a Next.js API route that fetches survey responses from the Qualtrics REST API. The Qualtrics API base URL includes your data center ID: https://{data_center_id}.qualtrics.com/API/v3/. All requests use the API token in the X-API-TOKEN header. For fetching survey responses, the recommended approach for most use cases is the response export workflow: POST to /surveys/{surveyId}/export-responses to start an export job, poll GET /surveys/{surveyId}/export-responses/{progressId} until the status is 'complete', then GET /surveys/{surveyId}/export-responses/{fileId}/file to download the response file as a ZIP containing a JSON or CSV file. For simpler use cases where you need the most recent responses quickly, the API also supports direct response retrieval via GET /surveys/{surveyId}/responses with query parameters for filtering by start date, end date, and pagination. The direct retrieval returns responses in pages of up to 100 at a time, which is more suitable for real-time dashboards than bulk exports. Qualtrics responses are structured with a values object containing question answers keyed by question ID (like QID1, QID2), plus metadata fields for response timing, IP address (if collected), and custom embedded data. Parse the response values in your API route before returning them to the client — translating question IDs to human-readable question names requires a separate call to GET /surveys/{surveyId} to get the survey schema.

1// app/api/qualtrics/responses/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4function getQualtricsBase() {
5  const dataCenter = process.env.QUALTRICS_DATA_CENTER_ID;
6  if (!dataCenter) throw new Error('QUALTRICS_DATA_CENTER_ID is not configured');
7  return `https://${dataCenter}.qualtrics.com/API/v3`;
8}
9
10async function qualtricsRequest(path: string, options: RequestInit = {}) {
11  const token = process.env.QUALTRICS_API_TOKEN;
12  if (!token) throw new Error('QUALTRICS_API_TOKEN is not configured');
13
14  const response = await fetch(`${getQualtricsBase()}${path}`, {
15    ...options,
16    headers: {
17      'X-API-TOKEN': token,
18      'Content-Type': 'application/json',
19      ...((options.headers as Record<string, string>) || {}),
20    },
21  });
22
23  if (!response.ok) {
24    const error = await response.json().catch(() => ({}));
25    throw new Error(error.meta?.error?.errorMessage || `Qualtrics API error ${response.status}`);
26  }
27
28  return response.json();
29}
30
31export async function GET(request: NextRequest) {
32  const surveyId = request.nextUrl.searchParams.get('surveyId') || process.env.QUALTRICS_SURVEY_ID;
33  const startDate = request.nextUrl.searchParams.get('startDate');
34  const endDate = request.nextUrl.searchParams.get('endDate');
35
36  if (!surveyId) {
37    return NextResponse.json({ error: 'Survey ID is required' }, { status: 400 });
38  }
39
40  try {
41    // Build query params for response retrieval
42    const params = new URLSearchParams({ pageSize: '100' });
43    if (startDate) params.set('startDate', startDate);
44    if (endDate) params.set('endDate', endDate);
45
46    const data = await qualtricsRequest(
47      `/surveys/${surveyId}/responses?${params.toString()}`
48    );
49
50    const responses = (data.result?.elements || []).map((r: Record<string, unknown>) => ({
51      responseId: r.responseId,
52      recordedDate: r.values && (r.values as Record<string, unknown>).recordedDate,
53      duration: r.values && (r.values as Record<string, unknown>).duration,
54      finished: r.values && (r.values as Record<string, unknown>).finished,
55      answers: r.values,
56      embeddedData: r.embeddedData,
57    }));
58
59    return NextResponse.json({
60      responses,
61      nextPage: data.result?.nextPage || null,
62      totalResponses: responses.length,
63    });
64  } catch (error) {
65    const message = error instanceof Error ? error.message : 'Failed to fetch responses';
66    console.error('Qualtrics API error:', message);
67    return NextResponse.json({ error: message }, { status: 500 });
68  }
69}

Update your V0-generated dashboard components to fetch and display real Qualtrics survey responses. The responses returned by your API route contain answer values keyed by Qualtrics question IDs (QID1, QID2, etc.), which need to be mapped to human-readable question names for display. Fetch the survey schema from a second API route at /api/qualtrics/survey-schema that calls GET /surveys/{surveyId} and returns the questions array with their IDs and question text. Use this schema to build a lookup map on the client side. For NPS calculation, identify the NPS question ID in the schema (typically labeled 'How likely are you to recommend...'), group responses by their answer value, and calculate the NPS formula: ((Promoters - Detractors) / Total Responses) * 100. For Likert scale questions (1-5 satisfaction), calculate averages across all responses. For open-text questions, display verbatim responses in a scrollable feed. Test the integration locally by adding QUALTRICS_API_TOKEN, QUALTRICS_DATA_CENTER_ID, and QUALTRICS_SURVEY_ID to your .env.local file and running npm run dev. The data center ID is the subdomain portion of your Qualtrics URL — for example, if your Qualtrics URL is yourorg.co1.qualtrics.com, the data center ID is 'yourorg.co1'. Submit a few test responses to your Qualtrics survey if needed to have data to display.

Push your code to GitHub and configure Qualtrics credentials in the Vercel Dashboard. Navigate to Settings → Environment Variables and add three variables: QUALTRICS_API_TOKEN (the API token generated in Qualtrics Account Settings → Qualtrics IDs → API — a long alphanumeric string), QUALTRICS_DATA_CENTER_ID (the data center portion of your Qualtrics URL — for example if your Qualtrics URL is yourorg.co1.qualtrics.com, enter 'yourorg.co1'; this determines which API server your requests are routed to), and QUALTRICS_SURVEY_ID (the survey ID starting with 'SV_' — visible in the Qualtrics survey URL and in Account Settings → Qualtrics IDs → Survey IDs). None of these should have the NEXT_PUBLIC_ prefix — all are server-side secrets. Set all variables for Production and Preview environments and save. Trigger a redeployment by pushing a commit or clicking Redeploy in the Vercel Dashboard. After deployment, test by loading your dashboard URL and verifying that real survey data appears. If you receive a 400 error with 'Data Center not found', double-check that QUALTRICS_DATA_CENTER_ID is set correctly — the full subdomain format (yourorg.co1) is required, not just 'co1'. If you receive a 401 error, verify your API token is active and has not been revoked. Qualtrics API tokens can be revoked by administrators — if your token suddenly stops working, contact your Qualtrics administrator to verify it is still active.