How to Integrate Bolt.new with Webex Events

Go to developer.webex.com and sign in with your Webex account. At the top-right of the page, you'll see your profile avatar — click it and you'll see a section titled 'Your Personal Access Token' with a Copy button. Click Copy. This token is valid for 12 hours and authenticates as your own Webex account. It's perfect for development and testing. For production use, you'll need to create a Webex Integration (OAuth app) that users can authorize. Navigate to developer.webex.com → My Webex Apps → Create a New App → Integration. Give it a name, icon, description, and set the OAuth redirect URI (requires a deployed URL). Select the scopes you need: spark:all for full access, meeting:schedules_write and meeting:schedules_read for meeting management, and meeting:registrations_write for managing registrations. Click Add Integration to get your Client ID and Client Secret for the OAuth flow. For development in Bolt, store the personal access token in .env.local as WEBEX_ACCESS_TOKEN. Since personal tokens expire every 12 hours, you'll need to refresh this value periodically during development. In production, your OAuth integration handles token refresh automatically. All Webex REST API calls use the base URL https://webexapis.com/v1/ with an Authorization: Bearer {token} header. The API is well-documented at developer.webex.com and follows RESTful conventions throughout. All endpoints accept and return JSON. Since every API call is an outbound HTTPS request from your server-side routes, they work without restriction from Bolt's WebContainer.

1// .env.local
2# Get from developer.webex.com (top right) - expires every 12 hours in dev
3WEBEX_ACCESS_TOKEN=your_personal_access_token_here
4
5// lib/webex.ts
6export async function webexFetch(
7  endpoint: string,
8  method: 'GET' | 'POST' | 'PUT' | 'DELETE' = 'GET',
9  body?: Record<string, unknown>
10): Promise<Response> {
11  const token = process.env.WEBEX_ACCESS_TOKEN!;
12  const url = `https://webexapis.com/v1${endpoint}`;
13
14  return fetch(url, {
15    method,
16    headers: {
17      Authorization: `Bearer ${token}`,
18      'Content-Type': 'application/json',
19    },
20    ...(body ? { body: JSON.stringify(body) } : {}),
21  });
22}

The Webex Meetings API creates meeting rooms, scheduled meetings, personal rooms, and webinars. The primary endpoint is POST /meetings with a JSON body specifying the meeting details. Required fields are title and start (ISO 8601 datetime). Key optional fields include end (ISO 8601 datetime), timezone, enabledAutoRecordMeeting (boolean), and publicMeeting (boolean — if true, anyone can join without an invitation). For webinar-style events with registration requirements, set the meetingType field to 'webinar' and registration.autoAcceptRequest to true or false depending on whether you want automatic or manual registration approval. The webinar type activates registration functionality — attendees must register before getting a join link, and the Registrations API becomes available for that meeting. The response includes the meeting id (a long alphanumeric string), webLink (the URL to join the meeting in a browser), sipAddress (for Webex room systems), and password. Store the meeting id in your database — you'll need it for all subsequent operations on this meeting (adding registrations, fetching attendance). For listing existing meetings, use GET /meetings with maxResults, from, and to date parameters. Add meetingType=webinar to filter to only webinar events. Use GET /meetings/{meetingId} to fetch details of a specific meeting including current registration count. These are all outbound API calls from your server-side routes — no browser sandbox restrictions apply. Create test meetings during Bolt development, verify the response, and inspect the returned webLink to confirm it works.

1// app/api/webex/meetings/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { webexFetch } from '@/lib/webex';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const type = searchParams.get('type') ?? 'scheduledMeeting';
8
9  const now = new Date().toISOString();
10  const threeMonthsLater = new Date(
11    Date.now() + 90 * 24 * 60 * 60 * 1000
12  ).toISOString();
13
14  const params = new URLSearchParams({
15    meetingType: type,
16    from: now,
17    to: threeMonthsLater,
18    max: '20',
19  });
20
21  const response = await webexFetch(`/meetings?${params}`);
22  if (!response.ok) {
23    return NextResponse.json({ error: 'Webex API error' }, { status: response.status });
24  }
25  const data = await response.json();
26
27  const meetings = (data.items ?? []).map((m: Record<string, unknown>) => ({
28    id: m.id,
29    title: m.title,
30    start: m.start,
31    end: m.end,
32    webLink: m.webLink,
33    hostEmail: m.hostEmail,
34    registrationCount: (m.registration as Record<string, unknown>)?.currentRegistrant ?? 0,
35    status: m.status,
36  }));
37
38  return NextResponse.json({ meetings });
39}
40
41export async function POST(request: NextRequest) {
42  const { title, startTime, endTime, timezone = 'UTC', isWebinar = false } = await request.json();
43
44  if (!title || !startTime || !endTime) {
45    return NextResponse.json(
46      { error: 'title, startTime, and endTime are required' },
47      { status: 400 }
48    );
49  }
50
51  const body: Record<string, unknown> = {
52    title,
53    start: startTime,
54    end: endTime,
55    timezone,
56    enabledAutoRecordMeeting: false,
57    publicMeeting: false,
58    ...(isWebinar
59      ? {
60          meetingType: 'webinar',
61          registration: { autoAcceptRequest: true },
62        }
63      : {}),
64  };
65
66  const response = await webexFetch('/meetings', 'POST', body);
67  if (!response.ok) {
68    const error = await response.json();
69    return NextResponse.json({ error }, { status: response.status });
70  }
71
72  const meeting = await response.json();
73  return NextResponse.json({
74    id: meeting.id,
75    title: meeting.title,
76    webLink: meeting.webLink,
77    start: meeting.start,
78    password: meeting.password,
79  });
80}

Webex Meetings API provides a registration sub-resource for meetings configured as webinars. Registration enables you to collect attendee information before the event and control who receives the join link. The registration endpoints are: GET /meetings/{meetingId}/registrants — lists all registered attendees with their details, registration time, and whether they attended. Use the status parameter to filter by pending, approved, or rejected. POST /meetings/{meetingId}/registrants — adds a new registrant. Required fields are firstName, lastName, and email. Optional fields include jobTitle, companyName, customizedQuestions (for event-specific form fields), and sendEmail (boolean — if true, Webex automatically sends the registrant a confirmation email with their personalized join link). PATCH /meetings/{meetingId}/registrants/{registrantId} — update registration status (approve, reject, pending). The workflow for a registration landing page: (1) user fills out form in Bolt, (2) POST to /api/webex/meetings/register which calls the Webex API, (3) Webex sends confirmation email with unique join link to the registrant, (4) registrant is added to your internal database with their Webex registrant ID. The join link in the confirmation email is personalized — each registrant gets a unique URL that tracks their individual attendance. For events that require manual approval, set autoAcceptRequest to false when creating the meeting. Registrants will have pending status until you approve them via the PATCH endpoint. For most public webinars, autoAcceptRequest: true is simpler — everyone who registers is immediately approved and receives their join link.

1// app/api/webex/meetings/[meetingId]/register/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { webexFetch } from '@/lib/webex';
4
5export async function POST(
6  request: NextRequest,
7  { params }: { params: { meetingId: string } }
8) {
9  const { firstName, lastName, email, jobTitle, companyName } = await request.json();
10
11  if (!firstName || !lastName || !email) {
12    return NextResponse.json(
13      { error: 'firstName, lastName, and email are required' },
14      { status: 400 }
15    );
16  }
17
18  const body = {
19    firstName,
20    lastName,
21    email,
22    jobTitle: jobTitle ?? '',
23    companyName: companyName ?? '',
24    sendEmail: true, // Webex sends confirmation email with join link
25  };
26
27  const response = await webexFetch(
28    `/meetings/${params.meetingId}/registrants`,
29    'POST',
30    body
31  );
32
33  if (!response.ok) {
34    const error = await response.json();
35    return NextResponse.json({ error }, { status: response.status });
36  }
37
38  const registrant = await response.json();
39  return NextResponse.json({
40    registrantId: registrant.id,
41    webLink: registrant.webLink,  // personalized join URL
42    firstName: registrant.firstName,
43    email: registrant.email,
44    status: registrant.status,
45  });
46}
47
48// GET: list all registrants for a meeting
49export async function GET(
50  _request: NextRequest,
51  { params }: { params: { meetingId: string } }
52) {
53  const response = await webexFetch(
54    `/meetings/${params.meetingId}/registrants?max=100`
55  );
56
57  if (!response.ok) {
58    return NextResponse.json({ error: 'Webex API error' }, { status: response.status });
59  }
60
61  const data = await response.json();
62  return NextResponse.json({
63    registrants: data.items ?? [],
64    total: data.items?.length ?? 0,
65  });
66}

Webex webhooks notify your app in real time when events occur: participants join or leave meetings, meetings start or end, and registrations are submitted. Unlike the polling approach of checking API endpoints periodically, webhooks eliminate the need for your app to continuously query Webex — Webex pushes updates to you. Bolt's WebContainer development environment cannot receive incoming HTTP connections — it runs inside a browser tab with no public IP or DNS hostname. Webex cannot POST webhook events to a WebContainer URL. You must deploy your app to Netlify, Vercel, or Bolt Cloud first, then register the webhook with your deployed domain. Once deployed, create a Webex webhook subscription via the API. POST to /webhooks with: name (a descriptive label), targetUrl (your deployed endpoint, e.g., https://your-app.netlify.app/api/webex/webhook), resource (the entity type: 'meetings', 'meetingParticipants', or 'meetingRegistrants'), event ('created', 'updated', 'deleted', 'started', 'ended'), and optionally a filter to scope the webhook to a specific meeting ID (e.g., 'meetingId=abc123'). You can also set a secret for webhook signature verification. Your webhook handler must respond with HTTP 200 within 10 seconds. Webex retries failed deliveries three times with exponential backoff. Parse the payload's resource and event fields to determine what happened, then update your database or trigger notifications accordingly. For meeting.ended events, wait 5–10 minutes before fetching the attendance report — participant data may not be available immediately.

1// app/api/webex/webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import crypto from 'crypto';
4
5export async function POST(request: NextRequest) {
6  const rawBody = await request.text();
7  const secret = process.env.WEBEX_WEBHOOK_SECRET;
8
9  // Verify signature if secret is configured
10  if (secret) {
11    const signature = request.headers.get('X-Spark-Signature') ?? '';
12    const expectedSig = crypto
13      .createHmac('sha1', secret)
14      .update(rawBody)
15      .digest('hex');
16    if (signature !== expectedSig) {
17      return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
18    }
19  }
20
21  let payload: Record<string, unknown>;
22  try {
23    payload = JSON.parse(rawBody);
24  } catch {
25    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
26  }
27
28  const { resource, event, data } = payload as {
29    resource: string;
30    event: string;
31    data: Record<string, unknown>;
32  };
33
34  if (resource === 'meetingParticipants' && event === 'joined') {
35    console.log(`Participant joined: ${data.displayName} (${data.email})`);
36  }
37
38  if (resource === 'meetingParticipants' && event === 'left') {
39    console.log(`Participant left: ${data.displayName}`);
40  }
41
42  if (resource === 'meetings' && event === 'ended') {
43    console.log(`Meeting ended: ${data.title}`);
44    // Trigger post-meeting report generation here
45  }
46
47  return NextResponse.json({ received: true });
48}