How to Integrate Eloqua with V0

Open V0 at v0.dev and describe the marketing interface you want to build. For lead capture, describe the form fields matching the Eloqua contact fields you want to populate — common fields include first name, last name, email address, company, title, and phone number. For a reporting dashboard, describe the metrics and charts you want to display. V0 generates clean React form components with built-in validation using shadcn/ui and Tailwind CSS. When prompting V0, be specific about the form submission behavior: what endpoint it calls (POST /api/eloqua/contacts), what happens on success (show a thank you state), and how errors are displayed (inline error messages vs. toast notifications). For marketing dashboards, tell V0 the data shape — what columns to show in tables, what metrics to display in KPI cards, what chart types to use. V0's generated components handle form state, loading states, and error states natively with React hooks. Push the generated code to GitHub using V0's Git panel after you're satisfied with the layout.

Eloqua uses pod-based routing — your specific API base URL depends on which infrastructure pod your organization is hosted on. Before creating API routes, call the discovery endpoint to find your base URL. The discovery endpoint at https://login.eloqua.com/id returns the base URL for your pod when called with your credentials. Once you have the base URL (format: https://secure.p04.eloqua.com for pod 4, for example), all subsequent API calls use this URL. Eloqua's REST API uses Basic authentication with a combined credential string: your site name, a backslash, and your username, all Base64-encoded with your password. In code, this is Buffer.from('siteName\\username:password').toString('base64'). The contact creation endpoint is POST /api/REST/2.0/data/contact and accepts a JSON body with field names matching Eloqua's contact field names. Standard fields are firstName, lastName, emailAddress, company, title, and businessPhone. Custom fields use their field ID in the format C_FieldName. The contact create endpoint returns the created contact object with an ID that you can use for subsequent activity tracking calls.

1// app/api/eloqua/contacts/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const ELOQUA_SITE = process.env.ELOQUA_SITE_NAME;
5const ELOQUA_USER = process.env.ELOQUA_USERNAME;
6const ELOQUA_PASS = process.env.ELOQUA_PASSWORD;
7const ELOQUA_BASE_URL = process.env.ELOQUA_BASE_URL; // e.g., https://secure.p04.eloqua.com
8
9function getAuthHeader(): string {
10  const combined = `${ELOQUA_SITE}\\${ELOQUA_USER}:${ELOQUA_PASS}`;
11  return `Basic ${Buffer.from(combined).toString('base64')}`;
12}
13
14interface ContactRequest {
15  firstName: string;
16  lastName: string;
17  emailAddress: string;
18  company?: string;
19  title?: string;
20  businessPhone?: string;
21}
22
23export async function POST(request: NextRequest) {
24  if (!ELOQUA_SITE || !ELOQUA_USER || !ELOQUA_PASS || !ELOQUA_BASE_URL) {
25    return NextResponse.json(
26      { error: 'Eloqua is not configured' },
27      { status: 500 }
28    );
29  }
30
31  let body: ContactRequest;
32  try {
33    body = await request.json();
34  } catch {
35    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
36  }
37
38  if (!body.emailAddress || !body.firstName || !body.lastName) {
39    return NextResponse.json(
40      { error: 'emailAddress, firstName, and lastName are required' },
41      { status: 400 }
42    );
43  }
44
45  try {
46    const response = await fetch(`${ELOQUA_BASE_URL}/api/REST/2.0/data/contact`, {
47      method: 'POST',
48      headers: {
49        Authorization: getAuthHeader(),
50        'Content-Type': 'application/json',
51        Accept: 'application/json',
52      },
53      body: JSON.stringify({
54        firstName: body.firstName,
55        lastName: body.lastName,
56        emailAddress: body.emailAddress,
57        company: body.company || '',
58        title: body.title || '',
59        businessPhone: body.businessPhone || '',
60      }),
61    });
62
63    if (!response.ok) {
64      const errorText = await response.text();
65      throw new Error(`Eloqua API error ${response.status}: ${errorText}`);
66    }
67
68    const contact = await response.json();
69
70    return NextResponse.json({
71      success: true,
72      contactId: contact.id,
73    });
74  } catch (error) {
75    const message = error instanceof Error ? error.message : 'Unknown error';
76    console.error('Eloqua contact creation failed:', message);
77    return NextResponse.json(
78      { error: 'Failed to create contact', details: message },
79      { status: 500 }
80    );
81  }
82}

For marketing reporting use cases, create a GET route that fetches Eloqua campaign and email send data. Eloqua's REST API v2 provides endpoints for email campaigns at /api/REST/2.0/assets/emails and campaign data at /api/REST/2.0/assets/campaigns. Email send activity and performance metrics (opens, clicks, bounces) are accessed through the Bulk API at /api/bulk/2.0/campaigns — note that Eloqua has two API endpoints: the standard REST API for CRUD operations and the Bulk API for reporting and large data exports. For simple dashboard metrics, the REST API's activity endpoints at /api/REST/2.0/data/activities/contact/{contactId} work well for individual contact activity. For aggregate campaign metrics, use the Bulk API which requires a different flow: create an export definition specifying the fields you want, then sync the export to retrieve the data. This two-step process is more complex but handles large datasets without timeout issues. For most V0-built dashboards that need basic campaign metrics, querying the email assets endpoint and pulling send counts provides a good starting point without needing the full Bulk API flow.

1// app/api/eloqua/campaigns/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const ELOQUA_BASE_URL = process.env.ELOQUA_BASE_URL;
5
6function getAuthHeader(): string {
7  const combined = `${process.env.ELOQUA_SITE_NAME}\\${process.env.ELOQUA_USERNAME}:${process.env.ELOQUA_PASSWORD}`;
8  return `Basic ${Buffer.from(combined).toString('base64')}`;
9}
10
11export async function GET(request: NextRequest) {
12  if (!ELOQUA_BASE_URL) {
13    return NextResponse.json({ error: 'Eloqua not configured' }, { status: 500 });
14  }
15
16  const { searchParams } = new URL(request.url);
17  const page = searchParams.get('page') || '1';
18  const count = searchParams.get('count') || '25';
19
20  try {
21    const response = await fetch(
22      `${ELOQUA_BASE_URL}/api/REST/2.0/assets/campaigns?page=${page}&count=${count}&depth=complete`,
23      {
24        headers: {
25          Authorization: getAuthHeader(),
26          Accept: 'application/json',
27        },
28      }
29    );
30
31    if (!response.ok) {
32      throw new Error(`Eloqua campaigns error: ${response.status}`);
33    }
34
35    const data = await response.json();
36
37    return NextResponse.json({
38      campaigns: data.elements || [],
39      total: data.total || 0,
40      page: data.page,
41    });
42  } catch (error) {
43    const message = error instanceof Error ? error.message : 'Unknown error';
44    return NextResponse.json({ error: message }, { status: 500 });
45  }
46}

Push your project to GitHub and configure Eloqua credentials in the Vercel Dashboard. Navigate to your project → Settings → Environment Variables. Add four variables: ELOQUA_SITE_NAME with your Eloqua company/site name (this is the prefix shown before the backslash in your Eloqua login), ELOQUA_USERNAME with the dedicated API user's Eloqua username, ELOQUA_PASSWORD with the API user's password, and ELOQUA_BASE_URL with your pod's base URL (e.g., https://secure.p04.eloqua.com). None of these should have the NEXT_PUBLIC_ prefix as they are server-only credentials. Create a dedicated Eloqua API user specifically for this integration rather than using a named marketer's account — this ensures the integration doesn't break when employees leave, and you can control exactly which permissions the API user has. In Eloqua, go to Settings → User Management → Users and create a new API User type. Grant it the minimum permissions needed: contact read/write for lead capture, campaign read for reporting. After saving the environment variables, trigger a redeployment in Vercel. Test the live deployment by submitting the lead capture form and verifying the contact appears in Eloqua's contact database.