How to Integrate Bolt.new with HubSpot Marketing Hub

Log in to your HubSpot portal and navigate to Settings (the gear icon in the top navigation). In the left sidebar, scroll to Integrations → Private Apps. Click Create a private app. Give the app a name like 'Bolt Marketing Dashboard' and add a description. Click the Scopes tab. For Marketing Hub analytics, you need these scopes: crm.objects.contacts.read (to read contact and lead data), content (to access email campaigns and landing page data), forms (to read form submissions and form definitions), and analytics.behavioral_events.send (if you plan to track custom events). Toggle each scope to Read access. The scopes you select determine which API endpoints your token can access — a token without the content scope cannot read email campaign statistics. Click Create app in the top right. HubSpot will display your access token — a string starting with pat-. Copy it immediately and store it in a safe place. This token is shown once in full; if you navigate away, you can only view the last four characters. You can rotate (regenerate) the token at any time from the private app settings page. In your Bolt project, open or create the .env.local file and add the token as HUBSPOT_PRIVATE_TOKEN. This is a server-side-only variable — never prefix it with NEXT_PUBLIC_ as that would expose it in the browser. All HubSpot API requests authenticate using this token in an Authorization: Bearer header.

1// .env.local
2HUBSPOT_PRIVATE_TOKEN=pat-na1-your-token-here
3
4// lib/hubspot.ts
5export async function hubspotFetch(
6  endpoint: string,
7  options: { method?: string; body?: unknown } = {}
8): Promise<Response> {
9  const token = process.env.HUBSPOT_PRIVATE_TOKEN!;
10  const url = `https://api.hubapi.com${endpoint}`;
11
12  return fetch(url, {
13    method: options.method ?? 'GET',
14    headers: {
15      Authorization: `Bearer ${token}`,
16      'Content-Type': 'application/json',
17    },
18    ...(options.body ? { body: JSON.stringify(options.body) } : {}),
19  });
20}

The HubSpot Marketing Email Statistics API provides detailed performance data for every email campaign sent through Marketing Hub. The primary endpoint is GET /marketing/v3/emails/{emailId}/statistics/histogram for time-series data, or GET /marketing/v3/emails/{emailId}/statistics/list for a flat summary per email. To list all marketing emails and their summary statistics, call GET /marketing/v3/emails with query parameters including limit (max 100), after (cursor for pagination), and optionally archived=false to only show active emails. Each email object includes the campaign ID, name, subject line, send time, and a counters object with delivered, open, click, bounce, and unsubscribed counts. Calculate open_rate = opens / delivered and click_rate = clicks / delivered in your API route before returning data to the frontend. For more detailed analytics including revenue attribution (requires HubSpot Revenue Attribution feature on paid plans), use the Analytics API v2 at /analytics/v2/reports/email-campaigns/. This provides breakdowns by date range, filtered by campaign type. All these GET requests are outbound calls that work perfectly from Bolt's WebContainer. You can build and test the full email analytics dashboard without deploying. Use Bolt's AI to scaffold the charting components — describe the visualization you want (bar chart of open rates by campaign, time-series of email sends per week) and Bolt will generate Recharts or Chart.js components that consume your API route data.

1// app/api/hubspot/emails/route.ts
2import { NextResponse } from 'next/server';
3import { hubspotFetch } from '@/lib/hubspot';
4
5export async function GET() {
6  // First get list of emails
7  const listResp = await hubspotFetch(
8    '/marketing/v3/emails?limit=20&archived=false'
9  );
10  if (!listResp.ok) {
11    return NextResponse.json({ error: 'HubSpot API error' }, { status: listResp.status });
12  }
13  const listData = await listResp.json();
14
15  // Fetch stats for each email
16  const emails = await Promise.all(
17    (listData.results ?? []).map(async (email: Record<string, unknown>) => {
18      const statsResp = await hubspotFetch(
19        `/marketing/v3/emails/${email.id}/statistics/list`
20      );
21      const statsData = statsResp.ok ? await statsResp.json() : {};
22      const counters = (statsData.counters ?? {}) as Record<string, number>;
23      const delivered = counters.delivered ?? 1;
24
25      return {
26        id: email.id,
27        name: email.name,
28        subject: email.subject,
29        sendDate: email.publishDate,
30        totalSent: counters.sent ?? 0,
31        openRate: Math.round(((counters.open ?? 0) / delivered) * 10000) / 100,
32        clickRate: Math.round(((counters.click ?? 0) / delivered) * 10000) / 100,
33        bounceRate: Math.round(((counters.hardbounced ?? 0) / delivered) * 10000) / 100,
34        unsubscribeRate: Math.round(((counters.unsubscribed ?? 0) / delivered) * 10000) / 100,
35      };
36    })
37  );
38
39  return NextResponse.json({ emails, total: listData.total });
40}

The HubSpot Forms API provides access to all form definitions and their submission history. This is one of the highest-value endpoints for marketing analytics — forms are the primary mechanism for lead capture, and understanding which forms convert visitors to leads most effectively directly informs content and campaign strategy. To list all forms, call GET /forms/v2/forms. Each form object includes its guid (the form identifier), name, method (embed or new page), createdAt, updatedAt, and formFieldGroups (the fields configuration). Form submissions are accessed via GET /form-integrations/v1/submissions/forms/{formGuid}?limit=50. The submissions endpoint returns individual submission records with each field value, the page URL where the form was submitted, the submission timestamp, and the associated contact ID if HubSpot matched the submitter to an existing contact. For conversion rate analysis, you'll need to correlate form submissions with page views. The HubSpot Analytics API provides page view data at GET /analytics/v2/reports/pages/ but requires additional scopes. A practical alternative for dashboards is to show submission volume over time — a bar chart of weekly or monthly form submissions per form is highly actionable without requiring page view data. Custom submission handlers are also possible: if your Bolt app uses its own HTML forms (not HubSpot-embedded forms), you can POST submissions to HubSpot's non-HubSpot forms endpoint at POST /submissions/v3/submissions/definition/{portalId}/{formGuid}. This lets you capture leads through a Bolt-designed form while storing the data in HubSpot.

1// app/api/hubspot/forms/route.ts
2import { NextResponse } from 'next/server';
3import { hubspotFetch } from '@/lib/hubspot';
4
5export async function GET() {
6  const formsResp = await hubspotFetch('/forms/v2/forms');
7  if (!formsResp.ok) {
8    return NextResponse.json({ error: 'HubSpot Forms API error' }, { status: formsResp.status });
9  }
10  const forms = await formsResp.json() as Array<Record<string, unknown>>;
11
12  // For each form, get submission count from last 30 days
13  const formsWithStats = await Promise.all(
14    forms.slice(0, 20).map(async (form) => {
15      const guid = form.guid as string;
16      const subsResp = await hubspotFetch(
17        `/form-integrations/v1/submissions/forms/${guid}?limit=50`
18      );
19      const subsData = subsResp.ok ? await subsResp.json() : { results: [], total: 0 };
20      const submissions = subsData.results as Array<Record<string, unknown>>;
21      const lastSubmission = submissions[0];
22
23      return {
24        guid,
25        name: form.name,
26        createdAt: form.createdAt,
27        totalSubmissions: subsData.total ?? submissions.length,
28        lastSubmissionAt: lastSubmission?.submittedAt ?? null,
29        lastSubmissionPage: lastSubmission?.pageUrl ?? '',
30      };
31    })
32  );
33
34  formsWithStats.sort((a, b) => (b.totalSubmissions as number) - (a.totalSubmissions as number));
35  return NextResponse.json({ forms: formsWithStats });
36}

With the email statistics and forms analytics API routes complete, use Bolt's AI to compose the full marketing performance dashboard. Describe the layout in a Bolt chat prompt: the dashboard should have a top-level summary section showing total leads this month, average email open rate, and best-performing campaign, followed by two sections — a campaigns table and a forms analytics table. For the summary metrics, make a parallel fetch of both the /api/hubspot/emails and /api/hubspot/forms endpoints on page load and compute aggregate statistics client-side: sum up total form submissions across all forms for total leads, average the open rates across all campaigns for average open rate, and find the campaign with the highest open rate for best performer. For charts, Bolt works well with the Recharts library (built on D3.js). Ask Bolt to add a BarChart showing email open rates per campaign with the campaign name on the x-axis and open rate percentage on the y-axis. For forms, a horizontal bar chart comparing submission counts across forms is effective. Both charts consume the data already returned by your API routes — no additional API calls needed. All data fetching uses server-side routes that call HubSpot's API through your Next.js backend, so there are no CORS issues in Bolt's WebContainer. The React components receive JSON data as props and render the UI. This pattern works identically in development preview and after deployment — the only difference is that the deployed version is accessible to your whole team via its public URL.

1// app/marketing/page.tsx
2import { Suspense } from 'react';
3
4async function getMarketingData() {
5  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ?? 'http://localhost:3000';
6  const [emailsResp, formsResp] = await Promise.all([
7    fetch(`${baseUrl}/api/hubspot/emails`, { next: { revalidate: 300 } }),
8    fetch(`${baseUrl}/api/hubspot/forms`, { next: { revalidate: 300 } }),
9  ]);
10  const [emailsData, formsData] = await Promise.all([
11    emailsResp.json(),
12    formsResp.json(),
13  ]);
14  return { emails: emailsData.emails ?? [], forms: formsData.forms ?? [] };
15}
16
17export default async function MarketingDashboard() {
18  const { emails, forms } = await getMarketingData();
19
20  const totalLeads = forms.reduce(
21    (sum: number, f: { totalSubmissions: number }) => sum + f.totalSubmissions,
22    0
23  );
24  const avgOpenRate =
25    emails.length > 0
26      ? (emails.reduce((sum: number, e: { openRate: number }) => sum + e.openRate, 0) /
27          emails.length).toFixed(1)
28      : '0';
29  const bestCampaign = emails.sort(
30    (a: { openRate: number }, b: { openRate: number }) => b.openRate - a.openRate
31  )[0];
32
33  return (
34    <main className="p-6 max-w-7xl mx-auto">
35      <h1 className="text-2xl font-bold mb-6">Marketing Performance</h1>
36      <div className="grid grid-cols-3 gap-4 mb-8">
37        <div className="bg-white rounded-lg p-4 shadow">
38          <p className="text-sm text-gray-500">Total Leads</p>
39          <p className="text-3xl font-bold">{totalLeads.toLocaleString()}</p>
40        </div>
41        <div className="bg-white rounded-lg p-4 shadow">
42          <p className="text-sm text-gray-500">Avg Email Open Rate</p>
43          <p className="text-3xl font-bold">{avgOpenRate}%</p>
44        </div>
45        <div className="bg-white rounded-lg p-4 shadow">
46          <p className="text-sm text-gray-500">Best Campaign</p>
47          <p className="text-lg font-semibold truncate">{bestCampaign?.name ?? 'N/A'}</p>
48          <p className="text-sm text-green-600">{bestCampaign?.openRate}% open rate</p>
49        </div>
50      </div>
51    </main>
52  );
53}