How to Integrate GetResponse with V0

Open V0 at v0.dev and describe the marketing form component you need. For a GetResponse integration, this is typically a newsletter signup form, a lead magnet capture form, or an event registration form. Be specific about what fields to collect (email is mandatory for GetResponse; first name is optional but improves personalization), what the call-to-action text should be, and what the user sees after a successful submission. V0 generates React components with Tailwind CSS and shadcn/ui — describe the visual style that matches your app's design system. The form component should post to the API route path you will create in the next step (/api/getresponse/subscribe is a good convention). Include the loading state, success state, and error state in your V0 prompt so you get all the interactive states generated at once rather than adding them in follow-up prompts. Think about what fields you want to capture beyond just email — GetResponse custom fields let you store any data (company name, job title, source URL, plan interest) and use it for segmentation in your email campaigns. Tell V0 to include these additional fields if you want them, and the API route will pass them to GetResponse as custom field values. After generating, push the component to GitHub using V0's Git panel.

Create the Next.js API route at app/api/getresponse/subscribe/route.ts that receives form submissions and calls the GetResponse REST API. The GetResponse API uses a simple API key in the X-Auth-Token header for authentication — no OAuth or token exchange is required. The endpoint to add a contact is POST https://api.getresponse.com/v3/contacts and the request body must include the email address, a campaign object with the campaign ID (your list ID), and optionally name and custom fields. The campaign ID is the GetResponse list ID — it is not the campaign ID used in email campaigns, which is a naming quirk in the GetResponse API. GetResponse returns HTTP 202 Accepted (not 201 Created) when a contact is successfully queued for addition, and returns 409 Conflict if the contact already exists in that list — handle both cases appropriately in your route. If you want to add tags to contacts, include a tags array with tag IDs (not tag names) in the request body. You can find tag IDs by calling GET https://api.getresponse.com/v3/tags with your API key. Custom field values are passed as an array of objects with customFieldId and value properties. Do not hardcode the list campaign ID in the route code — store it as an environment variable so you can change which GetResponse list new subscribers go to without a code deployment.

1// app/api/getresponse/subscribe/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const GETRESPONSE_API_BASE = 'https://api.getresponse.com/v3';
5
6interface SubscribeRequest {
7  email: string;
8  name?: string;
9  tags?: string[]; // GetResponse tag IDs
10  customFields?: Record<string, string>;
11}
12
13export async function POST(request: NextRequest) {
14  const apiKey = process.env.GETRESPONSE_API_KEY;
15  const listId = process.env.GETRESPONSE_LIST_ID;
16
17  if (!apiKey || !listId) {
18    return NextResponse.json(
19      { error: 'GetResponse is not configured' },
20      { status: 500 }
21    );
22  }
23
24  let body: SubscribeRequest;
25  try {
26    body = await request.json();
27  } catch {
28    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
29  }
30
31  const { email, name, tags = [], customFields = {} } = body;
32
33  if (!email || !email.includes('@')) {
34    return NextResponse.json({ error: 'Valid email is required' }, { status: 400 });
35  }
36
37  const contactPayload: Record<string, unknown> = {
38    email,
39    campaign: { campaignId: listId },
40  };
41
42  if (name) {
43    contactPayload.name = name;
44  }
45
46  if (tags.length > 0) {
47    contactPayload.tags = tags.map((id) => ({ tagId: id }));
48  }
49
50  if (Object.keys(customFields).length > 0) {
51    contactPayload.customFieldValues = Object.entries(customFields).map(
52      ([customFieldId, value]) => ({ customFieldId, value: [value] })
53    );
54  }
55
56  try {
57    const response = await fetch(`${GETRESPONSE_API_BASE}/contacts`, {
58      method: 'POST',
59      headers: {
60        'X-Auth-Token': `api-key ${apiKey}`,
61        'Content-Type': 'application/json',
62      },
63      body: JSON.stringify(contactPayload),
64    });
65
66    // GetResponse returns 202 on success, 409 if contact already exists
67    if (response.status === 409) {
68      return NextResponse.json(
69        { success: true, message: 'Already subscribed' },
70        { status: 200 }
71      );
72    }
73
74    if (!response.ok) {
75      const error = await response.json();
76      console.error('GetResponse API error:', error);
77      return NextResponse.json(
78        { error: 'Failed to subscribe', details: error.message },
79        { status: response.status }
80      );
81    }
82
83    return NextResponse.json({ success: true, message: 'Subscribed successfully' });
84  } catch (error) {
85    const message = error instanceof Error ? error.message : 'Unknown error';
86    console.error('GetResponse subscription failed:', message);
87    return NextResponse.json(
88      { error: 'Subscription failed', details: message },
89      { status: 500 }
90    );
91  }
92}

Push your code to GitHub and configure GetResponse credentials in Vercel. Open the Vercel Dashboard, select your project, and navigate to Settings → Environment Variables. Add GETRESPONSE_API_KEY with your API key — this is found in GetResponse Dashboard → Menu → Integrations → API → Your API key. Note that the API key displayed in GetResponse starts with a random string, and you pass it in the X-Auth-Token header as 'api-key YOUR_KEY_HERE' (with the 'api-key' prefix as shown in the code above). Add GETRESPONSE_LIST_ID with the ID of the list you want new subscribers added to. To find your list ID, go to GetResponse Dashboard → Lists, click on the list name, and look at the URL — the list ID appears in the URL as a string like 'abc123'. Neither variable should have the NEXT_PUBLIC_ prefix — both are server-side values. Set all variables for Production, Preview, and Development environments, then click Save and trigger a redeployment. After deployment, test the full flow from your deployed URL: submit the signup form and verify the contact appears in GetResponse Lists within a couple of minutes. GetResponse processes contact additions asynchronously, so there may be a brief delay before the contact appears in the GetResponse dashboard even when the API returns 202.