How to Integrate Bolt.new with Pardot

Pardot authentication goes through Salesforce — you do not register a separate Pardot developer application. Instead, you create a Salesforce Connected App that is granted Pardot API access. This approach gives you a single OAuth flow that authenticates with both Salesforce and Pardot simultaneously. To create a Connected App, log into Salesforce and go to Setup (the gear icon in the top-right, then 'Setup'). In the Quick Find search box, type 'App Manager' and click it. Click 'New Connected App' in the top-right. Fill in the required fields: Connected App Name (e.g., 'My Bolt App'), API Name (auto-populated), and Contact Email. In the API section, check 'Enable OAuth Settings.' The Callback URL (redirect URI) must be a stable, publicly accessible URL — your deployed Netlify or Bolt Cloud site followed by your callback path: for example, https://your-app.netlify.app/api/auth/callback/salesforce. This cannot be the Bolt WebContainer preview URL because the preview uses dynamic StackBlitz-generated URLs that change between sessions. For OAuth scopes, select: 'Access Pardot services (pardot_api)', 'Access and manage your data (api)', and 'Perform requests at any time (refresh_token, offline_access).' The pardot_api scope is essential — without it, your Salesforce token will not have access to Pardot data. Save the Connected App. Salesforce takes a few minutes to provision it. Then go back to the app and click 'Manage Consumer Details' to reveal the Consumer Key (this is your client ID) and Consumer Secret. Copy both values. Store them in .env as SALESFORCE_CLIENT_ID and SALESFORCE_CLIENT_SECRET. Also find your Pardot Business Unit ID: in your Pardot account, go to Settings → Account Settings. The Pardot Business Unit ID starts with '0Uv' and is a Salesforce ID format. Store it in .env as PARDOT_BUSINESS_UNIT_ID. This ID is required in the Pardot-Business-Unit-Id header on every Pardot API request.

1# .env
2# Salesforce Connected App credentials for Pardot API access
3# Get from Salesforce Setup → App Manager → your app → Manage Consumer Details
4SALESFORCE_CLIENT_ID=your_consumer_key_here
5SALESFORCE_CLIENT_SECRET=your_consumer_secret_here
6
7# Pardot Business Unit ID — found in Pardot Settings → Account Settings
8# Format: 0Uv followed by alphanumeric characters
9PARDOT_BUSINESS_UNIT_ID=0Uv000000000000AAA
10
11# Your Salesforce org's instance URL (from your Salesforce login URL)
12SALESFORCE_INSTANCE_URL=https://yourorg.my.salesforce.com
13
14# Access token (populated after completing OAuth flow)
15# Server-side only — never NEXT_PUBLIC_
16PARDOT_ACCESS_TOKEN=your_access_token_here
17
18# Your deployed app URL — used for OAuth redirect URI
19NEXT_PUBLIC_APP_URL=https://your-app.netlify.app

With the Connected App configured, build the OAuth callback handler and Pardot API service. The OAuth flow uses Salesforce's token endpoint, and the resulting access token works for both Salesforce and Pardot API calls. The Salesforce authorization URL is https://login.salesforce.com/services/oauth2/authorize. The token endpoint is https://login.salesforce.com/services/oauth2/token. After authorization, the callback URL receives a code parameter that you exchange for tokens. Salesforce returns an access_token, refresh_token, instance_url (the specific Salesforce server for your org), and id (identity URL). For Pardot API calls, you need two headers on every request: Authorization: Bearer {access_token} (the Salesforce token) and Pardot-Business-Unit-Id: {business_unit_id}. The Pardot API v5 base URL is https://pi.pardot.com/api/v5. All endpoints follow RESTful patterns: GET /objects/prospects for listing, POST /objects/prospects for creating, GET /objects/prospects/{id} for retrieving a specific prospect. Build a pardotFetch utility function that automatically adds both required headers and handles errors. Wrap common operations in typed helper functions: getProspects, createProspect, updateProspect, addToList, and removeFromList. This abstraction makes the API routes clean and the business logic reusable across multiple API endpoints. A critical note about Bolt's development environment: outbound HTTPS calls to pi.pardot.com and login.salesforce.com work in the WebContainer preview for API operations (creating prospects, fetching data). The only operation that requires the deployed site is the OAuth authorization callback — after you have the access token, you can continue developing and testing in the Bolt preview.

1// lib/pardot.ts
2const PARDOT_BASE = 'https://pi.pardot.com/api/v5';
3
4async function pardotFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
5  const token = process.env.PARDOT_ACCESS_TOKEN;
6  const buId = process.env.PARDOT_BUSINESS_UNIT_ID;
7
8  if (!token) throw new Error('PARDOT_ACCESS_TOKEN not configured');
9  if (!buId) throw new Error('PARDOT_BUSINESS_UNIT_ID not configured');
10
11  const res = await fetch(`${PARDOT_BASE}${endpoint}`, {
12    ...options,
13    headers: {
14      Authorization: `Bearer ${token}`,
15      'Pardot-Business-Unit-Id': buId,
16      'Content-Type': 'application/json',
17      ...options.headers,
18    },
19  });
20
21  if (!res.ok) {
22    const body = await res.json().catch(() => ({ message: res.statusText }));
23    throw Object.assign(new Error(body.message ?? 'Pardot API error'), {
24      status: res.status,
25      body,
26    });
27  }
28
29  return res.json();
30}
31
32export interface PardotProspect {
33  firstName?: string;
34  lastName?: string;
35  email: string;
36  company?: string;
37  jobTitle?: string;
38  phone?: string;
39  score?: number;
40  grade?: string;
41  lastActivityAt?: string;
42}
43
44export async function createProspect(fields: PardotProspect) {
45  return pardotFetch<{ id: string; email: string }>('/objects/prospects', {
46    method: 'POST',
47    body: JSON.stringify(fields),
48  });
49}
50
51export async function getProspects(limit = 25, offset = 0) {
52  return pardotFetch<{ values: PardotProspect[]; nextPageToken?: string }>(
53    `/objects/prospects?fields=id,firstName,lastName,email,company,score,grade,lastActivityAt&limit=${limit}&offset=${offset}`
54  );
55}
56
57export async function addToList(prospectId: string, listId: string) {
58  return pardotFetch('/objects/list-memberships', {
59    method: 'POST',
60    body: JSON.stringify({ listId, prospectId }),
61  });
62}

For production apps or multi-user scenarios, implement the full Salesforce OAuth 2.0 authorization code flow. The callback route handles the redirect from Salesforce after user authorization and exchanges the code for tokens. The Salesforce OAuth flow starts by redirecting users to https://login.salesforce.com/services/oauth2/authorize with your client ID, redirect URI, and the response_type=code parameter. Salesforce authenticates the user (or uses an existing session) and redirects back to your callback URL with a code parameter. Your callback route makes a server-side POST request to https://login.salesforce.com/services/oauth2/token to exchange the code for tokens. The response includes access_token (valid for the current session), refresh_token (long-lived, for obtaining new access tokens), instance_url (your org's specific Salesforce server URL), and issued_at (timestamp for token age tracking). Salesforce access tokens expire after a configurable period (typically 2 hours for Connected Apps with default settings, or longer if configured for offline access). Use the refresh_token with grant_type=refresh_token to obtain a new access token without re-authorization. Implement this refresh automatically in your pardotFetch function by catching 401 responses, refreshing the token, and retrying the original request. The redirect URI in the token exchange request must exactly match the URI registered in the Connected App — even a trailing slash difference will cause a 'redirect_uri_mismatch' error from Salesforce. Since the OAuth callback runs on your deployed Netlify or Bolt Cloud site, this URL must be your deployed domain. The WebContainer preview cannot serve as the redirect URI.

1// app/api/auth/callback/salesforce/route.ts
2import { NextResponse } from 'next/server';
3
4export async function GET(request: Request) {
5  const { searchParams } = new URL(request.url);
6  const code = searchParams.get('code');
7  if (!code) {
8    return NextResponse.json({ error: 'Missing authorization code' }, { status: 400 });
9  }
10
11  const appUrl = process.env.NEXT_PUBLIC_APP_URL!;
12  const tokenRes = await fetch(
13    'https://login.salesforce.com/services/oauth2/token',
14    {
15      method: 'POST',
16      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
17      body: new URLSearchParams({
18        grant_type: 'authorization_code',
19        code,
20        redirect_uri: `${appUrl}/api/auth/callback/salesforce`,
21        client_id: process.env.SALESFORCE_CLIENT_ID!,
22        client_secret: process.env.SALESFORCE_CLIENT_SECRET!,
23      }),
24    }
25  );
26
27  if (!tokenRes.ok) {
28    const err = await tokenRes.json();
29    return NextResponse.json({ error: err }, { status: 400 });
30  }
31
32  const tokens = await tokenRes.json();
33  // Store tokens securely in your database or session
34  // For single-user: copy access_token to PARDOT_ACCESS_TOKEN in .env
35  console.log({
36    access_token_preview: tokens.access_token?.substring(0, 20) + '...',
37    instance_url: tokens.instance_url,
38    has_refresh_token: !!tokens.refresh_token,
39  });
40
41  return NextResponse.redirect(new URL('/dashboard', request.url));
42}

A prospect scoring dashboard is one of the highest-value Pardot integrations — it surfaces lead scores and engagement data for sales team members who may not have individual Pardot licenses, reducing software seat costs while keeping everyone informed on lead quality. Pardot's prospect data includes a score (numeric, cumulative points from all activities), a grade (A+ to F, based on profile fit with your ideal customer profile), and detailed activity history. The score goes up with positive behaviors (opening emails, visiting pricing pages, downloading content) and can decrease with negative signals. The grade is configured in Pardot based on demographic criteria you set (company size, industry, job title, geography). For the dashboard, fetch prospects ordered by score descending using GET /objects/prospects?fields=id,firstName,lastName,email,company,score,grade,lastActivityAt&orderBy=score%20DESC. Display score with color coding: green for 75 and above (hot lead), yellow for 50-74 (warm lead), red for below 50 (cold lead). This visual system helps sales reps prioritize immediately without needing to understand the numerical scoring model. Add prospect filtering by company name or email for sales reps who want to look up specific contacts. Include a 'Last Activity' column showing the time since the prospect's last tracked engagement — a high-scoring prospect who was active yesterday is much higher priority than one who has not engaged in six months despite a high cumulative score. For the chart component, a scatter plot of score vs activity recency provides a useful prioritization quadrant: high score + recent activity (top priority), high score + stale activity (reconnect candidates), low score + recent activity (nurture candidates), low score + stale activity (deprioritize).

1// app/api/pardot/prospects/route.ts
2import { NextResponse } from 'next/server';
3import { getProspects } from '@/lib/pardot';
4
5export async function GET(request: Request) {
6  const { searchParams } = new URL(request.url);
7  const limit = parseInt(searchParams.get('limit') ?? '50');
8  const offset = parseInt(searchParams.get('offset') ?? '0');
9
10  try {
11    const data = await getProspects(limit, offset);
12
13    const prospects = (data.values ?? []).map((p) => ({
14      id: (p as Record<string, unknown>).id,
15      name: `${p.firstName ?? ''} ${p.lastName ?? ''}`.trim(),
16      email: p.email,
17      company: p.company ?? '',
18      score: p.score ?? 0,
19      grade: p.grade ?? 'F',
20      lastActivityAt: p.lastActivityAt ?? null,
21    }));
22
23    return NextResponse.json({
24      prospects,
25      hasMore: !!data.nextPageToken,
26    });
27  } catch (error) {
28    const message = error instanceof Error ? error.message : 'Unknown error';
29    return NextResponse.json({ error: message }, { status: 500 });
30  }
31}