How to Integrate Bolt.new with Qualtrics

1# .env — add to project root in Bolt
2# Found at: Qualtrics Account → Account Settings → Qualtrics IDs
3QUALTRICS_API_TOKEN=your_api_token_here
4QUALTRICS_DATACENTER=iad1
5# Your survey's ID (found in the survey URL: /survey-builder/SV_xxxxxxxx/...)
6QUALTRICS_SURVEY_ID=SV_xxxxxxxxxxxxxxx
7# For distribution features (found in Contacts → Mailing Lists)
8QUALTRICS_MAILING_LIST_ID=ML_xxxxxxxxxxxxxxx

1// lib/qualtrics-client.ts
2export class QualtricsClient {
3  private baseUrl: string;
4  private apiToken: string;
5
6  constructor() {
7    const datacenter = process.env.QUALTRICS_DATACENTER;
8    const token = process.env.QUALTRICS_API_TOKEN;
9
10    if (!datacenter || !token) {
11      throw new Error('QUALTRICS_DATACENTER and QUALTRICS_API_TOKEN must be set');
12    }
13
14    this.baseUrl = `https://${datacenter}.qualtrics.com/API/v3`;
15    this.apiToken = token;
16  }
17
18  async request<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
19    const url = `${this.baseUrl}${endpoint}`;
20    const res = await fetch(url, {
21      ...options,
22      headers: {
23        'X-API-TOKEN': this.apiToken,
24        'Content-Type': 'application/json',
25        ...options.headers,
26      },
27    });
28
29    if (!res.ok) {
30      const error = await res.json().catch(() => ({ message: res.statusText }));
31      throw new Error(`Qualtrics API error ${res.status}: ${JSON.stringify(error)}`);
32    }
33
34    return res.json();
35  }
36
37  async getSurveys() {
38    const data = await this.request<{ result: { elements: QualtricssurveyItem[] } }>('/surveys');
39    return data.result.elements;
40  }
41
42  async getSurvey(surveyId: string) {
43    const data = await this.request<{ result: QualtricssurveyDetail }>(`/surveys/${surveyId}`);
44    return data.result;
45  }
46
47  async getResponseCounts(surveyId: string) {
48    const data = await this.request<{ result: { auditable: number; generated: number; deleted: number } }>(
49      `/responseexports/${surveyId}/responsecounts`
50    );
51    return data.result;
52  }
53}
54
55interface QualtricssurveyItem {
56  id: string;
57  name: string;
58  ownerId: string;
59  lastModified: string;
60  creationDate: string;
61  isActive: boolean;
62}
63
64interface QualtricssurveyDetail extends QualtricssurveyItem {
65  questions: Record<string, unknown>;
66}
67
68// app/api/qualtrics/surveys/route.ts
69import { NextResponse } from 'next/server';
70import { QualtricsClient } from '@/lib/qualtrics-client';
71
72export async function GET() {
73  try {
74    const client = new QualtricsClient();
75    const surveys = await client.getSurveys();
76
77    return NextResponse.json({
78      surveys: surveys.map(s => ({
79        id: s.id,
80        name: s.name,
81        lastModified: s.lastModified,
82        isActive: s.isActive,
83      })),
84    });
85  } catch (error) {
86    const message = error instanceof Error ? error.message : 'Failed to fetch surveys';
87    return NextResponse.json({ error: message }, { status: 500 });
88  }
89}

1// app/dashboard/surveys/page.tsx
2'use client';
3
4import { useEffect, useState } from 'react';
5
6interface Survey {
7  id: string;
8  name: string;
9  lastModified: string;
10  isActive: boolean;
11}
12
13export default function SurveysDashboard() {
14  const [surveys, setSurveys] = useState<Survey[]>([]);
15  const [loading, setLoading] = useState(true);
16  const [error, setError] = useState('');
17
18  const fetchSurveys = async () => {
19    setLoading(true);
20    try {
21      const res = await fetch('/api/qualtrics/surveys');
22      if (!res.ok) throw new Error('Failed to fetch surveys');
23      const data = await res.json();
24      setSurveys(data.surveys);
25    } catch (err) {
26      setError(err instanceof Error ? err.message : 'An error occurred');
27    } finally {
28      setLoading(false);
29    }
30  };
31
32  useEffect(() => { fetchSurveys(); }, []);
33
34  if (loading) {
35    return (
36      <div className="p-8 max-w-5xl mx-auto">
37        <div className="h-8 bg-gray-200 rounded w-48 mb-6 animate-pulse" />
38        {[...Array(5)].map((_, i) => (
39          <div key={i} className="h-12 bg-gray-100 rounded mb-2 animate-pulse" />
40        ))}
41      </div>
42    );
43  }
44
45  if (error) {
46    return (
47      <div className="p-8 max-w-5xl mx-auto">
48        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
49          Error: {error}
50        </div>
51      </div>
52    );
53  }
54
55  const activeSurveys = surveys.filter(s => s.isActive).length;
56
57  return (
58    <div className="p-8 max-w-5xl mx-auto">
59      <div className="flex items-center justify-between mb-6">
60        <h1 className="text-2xl font-bold">Qualtrics Surveys</h1>
61        <button
62          onClick={fetchSurveys}
63          className="text-sm bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg font-medium"
64        >
65          Refresh
66        </button>
67      </div>
68
69      <div className="grid grid-cols-3 gap-4 mb-8">
70        <div className="bg-white border rounded-xl p-4">
71          <div className="text-2xl font-bold">{surveys.length}</div>
72          <div className="text-sm text-gray-500">Total Surveys</div>
73        </div>
74        <div className="bg-white border rounded-xl p-4">
75          <div className="text-2xl font-bold text-green-600">{activeSurveys}</div>
76          <div className="text-sm text-gray-500">Active</div>
77        </div>
78        <div className="bg-white border rounded-xl p-4">
79          <div className="text-2xl font-bold text-gray-400">{surveys.length - activeSurveys}</div>
80          <div className="text-sm text-gray-500">Inactive</div>
81        </div>
82      </div>
83
84      <div className="bg-white border rounded-xl overflow-hidden">
85        <table className="w-full">
86          <thead className="bg-gray-50 border-b">
87            <tr>
88              <th className="text-left px-4 py-3 text-sm font-medium text-gray-600">Survey Name</th>
89              <th className="text-left px-4 py-3 text-sm font-medium text-gray-600">Status</th>
90              <th className="text-left px-4 py-3 text-sm font-medium text-gray-600">Last Modified</th>
91            </tr>
92          </thead>
93          <tbody>
94            {surveys.map(survey => (
95              <tr key={survey.id} className="border-b last:border-0 hover:bg-gray-50">
96                <td className="px-4 py-3 text-sm font-medium">{survey.name}</td>
97                <td className="px-4 py-3">
98                  <span className={`text-xs px-2 py-1 rounded-full font-medium ${
99                    survey.isActive
100                      ? 'bg-green-100 text-green-700'
101                      : 'bg-gray-100 text-gray-500'
102                  }`}>
103                    {survey.isActive ? 'Active' : 'Inactive'}
104                  </span>
105                </td>
106                <td className="px-4 py-3 text-sm text-gray-500">
107                  {new Date(survey.lastModified).toLocaleDateString()}
108                </td>
109              </tr>
110            ))}
111          </tbody>
112        </table>
113      </div>
114    </div>
115  );
116}

1// app/api/webhooks/qualtrics/route.ts
2import { NextResponse } from 'next/server';
3import { createClient } from '@supabase/supabase-js';
4
5// Qualtrics sends webhooks as application/x-www-form-urlencoded by default
6// Configure your event subscription to use JSON for cleaner handling
7export async function POST(request: Request) {
8  try {
9    const contentType = request.headers.get('content-type') || '';
10
11    let payload: Record<string, unknown>;
12    if (contentType.includes('application/json')) {
13      payload = await request.json();
14    } else {
15      // Handle form-encoded Qualtrics payloads
16      const formData = await request.formData();
17      payload = Object.fromEntries(formData.entries());
18    }
19
20    console.log('Qualtrics webhook received:', JSON.stringify(payload, null, 2));
21
22    // Save to Supabase for analysis
23    const supabase = createClient(
24      process.env.NEXT_PUBLIC_SUPABASE_URL!,
25      process.env.SUPABASE_SERVICE_ROLE_KEY! // Use service role to bypass RLS
26    );
27
28    const { error } = await supabase.from('survey_responses').insert({
29      survey_id: payload.SurveyID || payload.surveyId,
30      response_id: payload.ResponseID || payload.responseId,
31      submitted_at: new Date().toISOString(),
32      raw_payload: payload,
33    });
34
35    if (error) console.error('Supabase insert error:', error);
36
37    // Always return 200 quickly — Qualtrics will retry on non-200 responses
38    return NextResponse.json({ received: true });
39  } catch (error) {
40    console.error('Webhook processing error:', error);
41    // Still return 200 to prevent Qualtrics from retrying
42    return NextResponse.json({ received: true });
43  }
44}