How to Integrate Bolt.new with Typeform

1// src/components/TypeformEmbed.tsx
2'use client';
3import { Widget, PopupButton, SliderButton } from '@typeform/embed-react';
4import '@typeform/embed-react/build/css/widget.css';
5import '@typeform/embed-react/build/css/popup.css';
6import '@typeform/embed-react/build/css/slider.css';
7
8interface TypeformEmbedProps {
9  formId?: string;
10  type?: 'inline' | 'popup' | 'slider';
11  height?: number;
12  hiddenFields?: Record<string, string>;
13  onSubmit?: (responseId: string) => void;
14  buttonText?: string;
15  className?: string;
16}
17
18export function TypeformEmbed({
19  formId,
20  type = 'inline',
21  height = 500,
22  hiddenFields,
23  onSubmit,
24  buttonText = 'Open Survey',
25  className = '',
26}: TypeformEmbedProps) {
27  const targetId = formId || process.env.NEXT_PUBLIC_TYPEFORM_FORM_ID;
28
29  if (!targetId) {
30    return (
31      <div className="p-4 border border-dashed border-gray-300 rounded text-gray-500 text-sm">
32        Add NEXT_PUBLIC_TYPEFORM_FORM_ID to your .env file
33      </div>
34    );
35  }
36
37  const handleSubmit = ({ responseId }: { responseId: string }) => {
38    onSubmit?.(responseId);
39  };
40
41  const sharedProps = {
42    id: targetId,
43    hidden: hiddenFields,
44    onSubmit: handleSubmit,
45  };
46
47  if (type === 'popup') {
48    return (
49      <PopupButton
50        {...sharedProps}
51        className={`px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors ${className}`}
52      >
53        {buttonText}
54      </PopupButton>
55    );
56  }
57
58  if (type === 'slider') {
59    return (
60      <SliderButton
61        {...sharedProps}
62        className={`px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors ${className}`}
63      >
64        {buttonText}
65      </SliderButton>
66    );
67  }
68
69  return (
70    <Widget
71      {...sharedProps}
72      style={{ height: `${height}px`, width: '100%' }}
73      className={className}
74    />
75  );
76}

1// app/api/typeform/responses/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4interface TypeformAnswer {
5  field: { id: string; type: string; ref: string };
6  type: string;
7  text?: string;
8  number?: number;
9  boolean?: boolean;
10  email?: string;
11  date?: string;
12  url?: string;
13  file_url?: string;
14  choice?: { label: string; other?: string };
15  choices?: { labels: string[]; other?: string };
16}
17
18interface NormalizedResponse {
19  id: string;
20  submitted_at: string;
21  answers: Record<string, string | number | boolean>;
22}
23
24function normalizeAnswer(answer: TypeformAnswer): string | number | boolean {
25  switch (answer.type) {
26    case 'text':
27    case 'long_text':
28      return answer.text || '';
29    case 'number':
30      return answer.number ?? 0;
31    case 'boolean':
32      return answer.boolean ?? false;
33    case 'email':
34      return answer.email || '';
35    case 'date':
36      return answer.date || '';
37    case 'url':
38      return answer.url || '';
39    case 'file_url':
40      return answer.file_url || '';
41    case 'choice':
42      return answer.choice?.label || answer.choice?.other || '';
43    case 'choices':
44      return (answer.choices?.labels || []).join(', ') + (answer.choices?.other ? `, ${answer.choices.other}` : '');
45    default:
46      return '';
47  }
48}
49
50export async function GET(request: NextRequest) {
51  const { searchParams } = new URL(request.url);
52  const formId = searchParams.get('formId') || process.env.TYPEFORM_FORM_ID;
53  const pageSize = parseInt(searchParams.get('pageSize') || '100', 10);
54  const since = searchParams.get('since') || '';
55
56  if (!formId) {
57    return NextResponse.json({ error: 'No form ID provided' }, { status: 400 });
58  }
59
60  const token = process.env.TYPEFORM_API_TOKEN;
61  if (!token) {
62    return NextResponse.json({ error: 'TYPEFORM_API_TOKEN is not set' }, { status: 500 });
63  }
64
65  const url = new URL(`https://api.typeform.com/forms/${formId}/responses`);
66  url.searchParams.set('page_size', String(Math.min(pageSize, 1000)));
67  if (since) url.searchParams.set('since', since);
68
69  const response = await fetch(url.toString(), {
70    headers: { Authorization: `Bearer ${token}` },
71  });
72
73  if (!response.ok) {
74    const error = await response.json();
75    return NextResponse.json(
76      { error: error.description || 'Typeform API error' },
77      { status: response.status }
78    );
79  }
80
81  const data = await response.json();
82
83  const normalized: NormalizedResponse[] = (data.items || []).map((item: { response_id: string; submitted_at: string; answers?: TypeformAnswer[] }) => {
84    const answers: Record<string, string | number | boolean> = {};
85    for (const answer of item.answers || []) {
86      const key = answer.field?.ref || answer.field?.id;
87      if (key) answers[key] = normalizeAnswer(answer);
88    }
89    return { id: item.response_id, submitted_at: item.submitted_at, answers };
90  });
91
92  return NextResponse.json({
93    total: data.total_items,
94    responses: normalized,
95  });
96}

1// src/components/UserSurveyTrigger.tsx
2'use client';
3import { useEffect, useState } from 'react';
4import { PopupButton } from '@typeform/embed-react';
5import '@typeform/embed-react/build/css/popup.css';
6
7interface UserSurveyTriggerProps {
8  formId?: string;
9  userId?: string;
10  userEmail?: string;
11  plan?: string;
12  delaySeconds?: number;
13  onSubmit?: (responseId: string) => void;
14}
15
16export function UserSurveyTrigger({
17  formId,
18  userId,
19  userEmail,
20  plan = 'free',
21  delaySeconds = 30,
22  onSubmit,
23}: UserSurveyTriggerProps) {
24  const [isVisible, setIsVisible] = useState(false);
25  const targetId = formId || process.env.NEXT_PUBLIC_TYPEFORM_FORM_ID;
26
27  useEffect(() => {
28    const timer = setTimeout(() => {
29      setIsVisible(true);
30    }, delaySeconds * 1000);
31    return () => clearTimeout(timer);
32  }, [delaySeconds]);
33
34  if (!targetId || !isVisible) return null;
35
36  const hiddenFields: Record<string, string> = {
37    plan,
38    source: typeof window !== 'undefined' ? window.location.pathname : '',
39  };
40  if (userId) hiddenFields.user_id = userId;
41  if (userEmail) hiddenFields.user_email = userEmail;
42
43  return (
44    <div className="fixed bottom-4 right-4 z-50">
45      <PopupButton
46        id={targetId}
47        hidden={hiddenFields}
48        onSubmit={({ responseId }) => onSubmit?.(responseId)}
49        className="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-full shadow-lg hover:bg-indigo-700 transition-colors"
50      >
51        How are we doing?
52      </PopupButton>
53    </div>
54  );
55}

1// app/api/typeform/webhook/route.ts
2// NOTE: Typeform webhooks require a public URL.
3// This route cannot receive events in Bolt's WebContainer preview.
4// Deploy to Netlify first, then register your *.netlify.app URL in Typeform.
5import { NextRequest, NextResponse } from 'next/server';
6import { createClient } from '@supabase/supabase-js';
7
8const supabase = createClient(
9  process.env.NEXT_PUBLIC_SUPABASE_URL!,
10  process.env.SUPABASE_SERVICE_ROLE_KEY!
11);
12
13export async function POST(request: NextRequest) {
14  const body = await request.json();
15
16  const formResponse = body.form_response;
17  if (!formResponse) {
18    return NextResponse.json({ error: 'Invalid payload' }, { status: 400 });
19  }
20
21  const answers: Record<string, string | number | boolean> = {};
22  for (const answer of formResponse.answers || []) {
23    const key = answer.field?.ref || answer.field?.id;
24    if (!key) continue;
25    switch (answer.type) {
26      case 'text': case 'long_text': answers[key] = answer.text || ''; break;
27      case 'number': answers[key] = answer.number ?? 0; break;
28      case 'boolean': answers[key] = answer.boolean ?? false; break;
29      case 'email': answers[key] = answer.email || ''; break;
30      case 'choice': answers[key] = answer.choice?.label || ''; break;
31      case 'choices': answers[key] = (answer.choices?.labels || []).join(', '); break;
32      default: answers[key] = '';
33    }
34  }
35
36  const hiddenFields = formResponse.hidden || {};
37
38  const { error } = await supabase.from('typeform_responses').upsert({
39    response_id: formResponse.token,
40    form_id: formResponse.form_id,
41    submitted_at: formResponse.submitted_at,
42    answers,
43    hidden_fields: hiddenFields,
44  }, { onConflict: 'response_id' });
45
46  if (error) {
47    console.error('Supabase insert error:', error);
48    // Still return 200 to prevent Typeform retries
49  }
50
51  return NextResponse.json({ received: true });
52}