How to Integrate Bolt.new with SurveyMonkey

1// components/SurveyMonkeyEmbed.tsx
2'use client';
3
4import { useEffect, useRef, useState } from 'react';
5
6interface SurveyMonkeyEmbedProps {
7  surveyUrl: string;
8  userId?: string;
9  onComplete?: () => void;
10  height?: number;
11}
12
13export function SurveyMonkeyEmbed({
14  surveyUrl,
15  userId,
16  onComplete,
17  height = 550,
18}: SurveyMonkeyEmbedProps) {
19  const iframeRef = useRef<HTMLIFrameElement>(null);
20  const [loading, setLoading] = useState(true);
21
22  // Build URL with user context
23  const embedUrl = userId
24    ? `${surveyUrl}${surveyUrl.includes('?') ? '&' : '?'}user_id=${encodeURIComponent(userId)}`
25    : surveyUrl;
26
27  useEffect(() => {
28    const handleMessage = (event: MessageEvent) => {
29      // SurveyMonkey sends completion message from their domain
30      if (
31        event.origin.includes('surveymonkey.com') &&
32        (event.data?.type === 'survey_complete' ||
33          event.data === 'survey_complete')
34      ) {
35        onComplete?.();
36      }
37    };
38
39    window.addEventListener('message', handleMessage);
40    return () => window.removeEventListener('message', handleMessage);
41  }, [onComplete]);
42
43  return (
44    <div style={{ position: 'relative', width: '100%' }}>
45      {loading && (
46        <div style={{
47          position: 'absolute', inset: 0, display: 'flex',
48          alignItems: 'center', justifyContent: 'center',
49          background: '#f9fafb',
50        }}>
51          Loading survey...
52        </div>
53      )}
54      <iframe
55        ref={iframeRef}
56        src={embedUrl}
57        width="100%"
58        height={height}
59        style={{ border: 'none' }}
60        onLoad={() => setLoading(false)}
61        title="Customer Survey"
62        allow="autoplay"
63      />
64    </div>
65  );
66}

1// app/api/auth/surveymonkey/route.ts
2import { NextResponse } from 'next/server';
3
4export async function GET() {
5  const clientId = process.env.SURVEYMONKEY_CLIENT_ID;
6  const redirectUri = `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/surveymonkey/callback`;
7
8  if (!clientId) {
9    return NextResponse.json({ error: 'SurveyMonkey client ID not configured' }, { status: 500 });
10  }
11
12  const params = new URLSearchParams({
13    response_type: 'code',
14    client_id: clientId,
15    redirect_uri: redirectUri,
16  });
17
18  return NextResponse.redirect(
19    `https://api.surveymonkey.com/oauth/authorize?${params.toString()}`
20  );
21}
22
23// app/api/auth/surveymonkey/callback/route.ts
24import { NextResponse } from 'next/server';
25
26export async function GET(request: Request) {
27  const { searchParams } = new URL(request.url);
28  const code = searchParams.get('code');
29
30  if (!code) {
31    return NextResponse.json({ error: 'No authorization code' }, { status: 400 });
32  }
33
34  const redirectUri = `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/surveymonkey/callback`;
35
36  const response = await fetch('https://api.surveymonkey.com/oauth/token', {
37    method: 'POST',
38    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
39    body: new URLSearchParams({
40      grant_type: 'authorization_code',
41      code,
42      redirect_uri: redirectUri,
43      client_id: process.env.SURVEYMONKEY_CLIENT_ID!,
44      client_secret: process.env.SURVEYMONKEY_CLIENT_SECRET!,
45    }).toString(),
46  });
47
48  const data = await response.json() as { access_token?: string; error?: string };
49
50  if (!data.access_token) {
51    return NextResponse.json({ error: data.error ?? 'Token exchange failed' }, { status: 400 });
52  }
53
54  // In production, store the token in a database associated with the user.
55  // For development/personal use, log it and store in .env manually:
56  console.log('SurveyMonkey access token:', data.access_token);
57
58  return NextResponse.redirect(`${process.env.NEXT_PUBLIC_APP_URL}/admin?sm_connected=true`);
59}

1// app/api/surveys/responses/route.ts
2import { NextResponse } from 'next/server';
3
4interface SMChoice { id: string; text: string; }
5interface SMAnswer { choice_id?: string; text?: string; row_id?: string; }
6interface SMQuestion { id: string; heading: string; answers?: { choices?: SMChoice[] }; }
7interface SMPage { questions: SMQuestion[]; }
8interface SMSurveyDetails { pages: SMPage[]; }
9
10export async function GET() {
11  const token = process.env.SURVEYMONKEY_ACCESS_TOKEN;
12  const surveyId = process.env.SURVEYMONKEY_SURVEY_ID;
13
14  if (!token || !surveyId) {
15    return NextResponse.json(
16      { error: 'SurveyMonkey credentials not configured' },
17      { status: 500 }
18    );
19  }
20
21  const headers = {
22    Authorization: `Bearer ${token}`,
23    'Content-Type': 'application/json',
24  };
25
26  try {
27    // Fetch survey details to get question/choice mappings
28    const surveyRes = await fetch(
29      `https://api.surveymonkey.com/v3/surveys/${surveyId}/details`,
30      { headers }
31    );
32    const survey = await surveyRes.json() as SMSurveyDetails;
33
34    // Build question id → text map
35    const questionMap: Record<string, string> = {};
36    const choiceMap: Record<string, string> = {};
37    survey.pages?.forEach((page) => {
38      page.questions?.forEach((q) => {
39        questionMap[q.id] = q.heading;
40        q.answers?.choices?.forEach((c) => {
41          choiceMap[c.id] = c.text;
42        });
43      });
44    });
45
46    // Fetch responses
47    const responsesRes = await fetch(
48      `https://api.surveymonkey.com/v3/surveys/${surveyId}/responses/bulk?per_page=50&sort_order=DESC`,
49      { headers }
50    );
51    const data = await responsesRes.json() as {
52      total: number;
53      data: Array<{
54        id: string;
55        date_created: string;
56        pages: Array<{ questions: Array<{ id: string; answers: SMAnswer[] }> }>;
57      }>;
58    };
59
60    const responses = data.data?.map((resp) => ({
61      id: resp.id,
62      date: resp.date_created,
63      answers: resp.pages?.flatMap((page) =>
64        page.questions?.map((q) => ({
65          question: questionMap[q.id] ?? q.id,
66          answer: q.answers?.map((a) =>
67            a.text ?? choiceMap[a.choice_id ?? ''] ?? a.choice_id ?? ''
68          ).join(', ') ?? '',
69        }))
70      ).filter(Boolean),
71    }));
72
73    return NextResponse.json({ total: data.total, responses });
74  } catch (error: unknown) {
75    const e = error as { message: string };
76    return NextResponse.json({ error: e.message }, { status: 500 });
77  }
78}

1# netlify.toml
2[build]
3  command = "npm run build"
4  publish = ".next"
5
6[build.environment]
7  NODE_VERSION = "20"
8
9[[plugins]]
10  package = "@netlify/plugin-nextjs"
11
12# Required environment variables — set in Netlify Dashboard:
13# SURVEYMONKEY_CLIENT_ID        - from developer.surveymonkey.com app settings
14# SURVEYMONKEY_CLIENT_SECRET    - from developer.surveymonkey.com app settings
15# SURVEYMONKEY_ACCESS_TOKEN     - long-lived token (expires 365 days)
16# SURVEYMONKEY_SURVEY_ID        - your survey ID from the URL
17# NEXT_PUBLIC_APP_URL           - your deployed domain (https://yourapp.netlify.app)
18# NEXT_PUBLIC_SUPABASE_URL      - if using Supabase for auth
19# NEXT_PUBLIC_SUPABASE_ANON_KEY - if using Supabase for auth