Zoom

Webflow forms collect names and email addresses, but they cannot register a visitor for a live Zoom webinar on their own. A published site also has no built-in way to list upcoming Zoom sessions or archive recordings without someone typing each entry into the Webflow CMS.

Connecting Zoom and Webflow closes those gaps and cuts the manual handoffs between your website and your live sessions.

Marketing teams that run webinar programs get the most out of this setup. Course creators and educators use it to publish live class registration and replay libraries. Sales teams and recruiters use the Scheduler embed so prospects and candidates book Zoom calls from a pricing or careers page.

How to integrate Zoom with Webflow

What is Zoom? Zoom is a video conferencing and collaboration platform sold under the Zoom Workplace brand. Its products include Zoom Meetings, Zoom Webinars, Zoom Events, and the Zoom Scheduler appointment booking tool. Zoom's REST APIs and webhooks cover them, and the Meeting SDK for web embeds meetings in your own pages.

Teams pair Zoom with Webflow when the website is the front door to a live session. A B2B marketing team hosts the webinar landing page, speaker bios, and registration form in Webflow, and Zoom delivers the session. A coaching business drops a Zoom Scheduler iframe into a Code Embed element on its contact page. Webflow stays the content-managed front end while Zoom runs the video and the registration.

The Zoom-Webflow integration supports four approaches:

• Code Embed elements and direct links: These place a Zoom Scheduler booking page, a registration button, or a recording link on any Webflow page without middleware.
• Zapier, Make, viaSocket, and n8n: These connect Webflow form submissions to Zoom registrants, and Zoom events to CMS items, without code.
• Webflow and Zoom APIs: These give you full control over registration, CMS sync, and recording publication, but require server-side development.
• Webflow and Zoom MCP servers: An AI agent connected to both can build the CMS structure in Webflow and draft content from Zoom meeting data, which suits setup work more than live registration.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Embed Zoom Scheduler and registration links with Code Embed

Zoom Scheduler has an official iframe snippet, documented in the Embedding Zoom Scheduler article. Zoom documents no iframe embed for meeting join links or registration pages, so place those as links or buttons. This method needs no backend and no automation account. The Code Embed element needs an active paid Site plan, Basic included, or a Core, Growth, Agency, or Freelancer Workspace, so a free Starter site without one of those Workspace plans cannot use it.

Embed a Zoom Scheduler booking page

Visitors can choose a time and confirm a Zoom call without leaving the Webflow page. Zoom's embed article lists WordPress, Wix, Squarespace, and Weebly as providers, but the snippet is standard HTML and works in Code Embed. The ?embed=true parameter switches the booking page to a layout designed for iframes. On the Zoom side you need Scheduler Basic or a paid Scheduler license.

To embed the booking page:

1. In the Zoom web portal, open Scheduler, select a booking page, then choose Share > Add to Website.
2. Set width, height, colors, and font, then select Copy code.
3. In Webflow, open the Add panel, go to Advanced, and drag a Code Embed element onto the canvas.
4. Paste the snippet, select Save and close, and publish the site.

Zoom's recommended responsive snippet looks like this, with the iframe's opening tag closed, which Zoom's published copy omits:

<div style="max-width: 900px; margin: 0 auto;">
  <iframe
    src="https://scheduler.zoom.us/<your-handle>/<your-page>?embed=true"
    style="width:100%; min-height:560px; border:0;"
    frameborder="0"
  ></iframe>
</div>

The booking URL accepts firstname and lastname for prefill, the five utm_* parameters (utm_source, utm_medium, utm_campaign, utm_content, utm_term), and month=YYYY-MM to open a specific month. The page hosting the iframe must serve over HTTPS and allow https://scheduler.zoom.us in its CSP frame-src or child-src directive. If you prefer a Marketplace app, CozyCal embeds its own booking form in Webflow and generates a unique Zoom link for each appointment.

Track Scheduler bookings with a postMessage listener

If you set an Origin when you generate the embed code, the Scheduler iframe posts the booking details to the parent page after each completed booking. A short script catches it and forwards the booking to your analytics or CRM layer. Add the script as page-level custom body code so it loads only where the iframe lives. Forward any authenticated Zoom API calls to a server; credentials pasted into the script are visible to every visitor.

To add the listener:

1. In Webflow, open the Pages panel, hover over the page, and select the Page settings icon.
2. Under Custom code, paste the script into Before </body> tag.
3. Select Save and publish.

A trimmed version of Zoom's example listener:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://scheduler.zoom.us') return;
  const data = event.data;
  // e.g., analytics.track('Booking Confirmed', data);
});

Keep the event.origin check; without it any frame on the page could post a fake booking confirmation into your analytics.

Link Webflow forms and buttons to Zoom registration pages

Zoom generates a public registration URL for any meeting or webinar with registration required. You can attach that URL to a button, or set it as the redirect URL of a Webflow form so submitters land on Zoom's registration page. Meeting registration requires a Pro, Business, Education, or Enterprise Zoom account, per the meeting registration article. Webinar registration adds the Webinar Add-on, per the webinar registration article. Because this is a hyperlink, it works on every Webflow plan, though the free Starter plan caps a site at 50 form submissions, per Webflow's plan comparison.

To send form submitters to a Zoom registration page:

1. In Zoom, schedule the meeting or webinar with Registration set to Required, then copy the registration URL.
2. In Webflow, select the form on the canvas and open the Settings panel.
3. Enter the Zoom registration URL as the redirect destination, then publish.

Visitors fill in Zoom's registration form after yours, so this path suits low-volume cases; the automation methods below register them from a single Webflow form.

Connect with Zapier, Make, or other automation tools

A Webflow form submission can start a workflow in Zapier, Make, viaSocket, or n8n. Each platform calls Zoom's OAuth-authenticated API and hands results back without you hosting a server. The Zapier app and Make app are both on the Webflow Marketplace. Zapier's Webflow and Zoom page lists ready-made templates, including one that registers Webflow form submitters as Zoom webinar registrants. Zapier's Zoom setup guide says webinar steps need a paid Zoom account with a Zoom Video Webinar license, and a webinar with registration set to required.

To set up the webinar registration Zap:

1. Open the template, connect your Webflow account, and choose the site and form.
2. Connect your Zoom account and select the webinar.
3. Map the form's email and first name fields to Zoom's email and first_name registrant fields.
4. Test the Zap and turn it on.

These pairings are available today, named as each platform labels them:

• Form to webinar registrant: Webflow New Form Submission feeds Zoom Create Webinar Registrant in Zapier and Register Attendee for Webinar in viaSocket, and Make offers Add a webinar registrant after its Webflow Watch Events trigger.
• Form to meeting: Webflow New Form Submission feeds Zoom Create Meeting Registrant or Create Meeting in Zapier, and Add a meeting registrant or Create Meeting in viaSocket.
• Registrant to CMS: Zoom New Webinar Registrant feeds Webflow Create Live Item or Update Item in Zapier, and viaSocket runs the same direction from its webinar registration trigger.
• Scheduled session to CMS: Zoom New Meeting, which fires for new meetings and webinars, feeds Webflow Create Item in Zapier, and viaSocket covers it with its new webinar trigger.
• Recording to CMS: Zoom New Cloud Recording feeds Webflow Create Item in Zapier, and Make's Watch Recordings trigger does the same job.
• Meeting end to CMS: Zoom New Meeting Ended feeds Webflow Update Item in Zapier, and viaSocket offers a matching meeting-ends trigger.

In n8n, the Webflow Trigger node listens for form submissions, and the Zoom node covers meeting create, read, update, and delete only; for registrants, point its HTTP Request node at the Zoom endpoints in the next section. Make's Zoom app connects through an OAuth app that you create in the Zoom App Marketplace. IFTTT pairs the Webflow Form submitted trigger with the Zoom Create a meeting action, but its Webflow and Zoom page offers no ready-made Applet, so you build that one yourself.

Build with the Webflow and Zoom APIs

Approval workflows and custom registration questions can exceed what automation templates express. This path requires server-side development. Zoom Server-to-Server OAuth issues a one-hour access token with no refresh token, so your server re-requests it before expiry. On the Webflow side, generate a Site Token under Site settings > Apps & integrations > API access with the scopes each call needs. This work requires a developer.

These are the APIs a custom build uses:

• Zoom Meetings API: The Meetings API handles meetings, webinars, registrants, and cloud recordings.
• Zoom Scheduler API: The Scheduler API handles booking schedules, their available times, and scheduled events.
• Zoom webhooks: Zoom webhooks push events such as webinar.created and recording.completed to your endpoint.
• Webflow Data API: Webflow's Data API handles CMS collections and form submissions.
• Webflow webhooks: Webflow webhooks send site events, including form submissions, to your server in real time.

Zoom set September 8, 2023 as the end-of-life date for its JWT app type, and Data API v1 reached deprecation on March 31, 2025, so target Server-to-Server OAuth and Data API v2 for any new build.

Register webinar attendees from Webflow form submissions

The handoff begins the moment a visitor submits the form: Webflow fires a form_submission webhook. Your server then posts the registrant to Zoom and can email back the join_url. Create the webhook through the API rather than in the Webflow dashboard, because webhooks created in the dashboard do not include the headers needed to validate signatures. Webinar registration needs the webinar:write:registrant scope on the Zoom app.

To implement this:

1. Create the webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks and the body {"triggerType": "form_submission", "url": "https://your-server.example.com/webhook", "filter": {"name": "Your Form Name"}}. The token needs sites:write.
2. Verify each delivery by hashing timestamp + ":" + JSON.stringify(request_body) with HMAC-SHA256, using the webhook's own secret key (returned as secretKey when you create it with a site token) or your OAuth app's client secret. Compare the result to x-webflow-signature and reject requests older than 5 minutes.
3. Read the submitted fields from payload.data, then request a Zoom token with POST https://zoom.us/oauth/token?grant_type=account_credentials&account_id={YOUR_ACCOUNT_ID} and an Authorization: Basic Base64(ClientID:ClientSecret) header.
4. Call POST https://api.zoom.us/v2/webinars/{webinarId}/registrants with at least email and first_name. Use POST https://api.zoom.us/v2/meetings/{meetingId}/registrants for meeting registration.

An abridged version of the incoming payload from Webflow's webhook guide:

{
  "triggerType": "form_submission",
  "payload": {
    "name": "Contact Us",
    "siteId": "65427cf400e02b306eaa049c",
    "data": {
      "First Name": "Zaphod",
      "Last Name": "Beeblebrox",
      "email": "zaphod@heartofgold.ai"
    },
    "submittedAt": "2022-09-14T12:35:16.117Z",
    "id": "6321ca84df3949bfc6752327",
    "formId": "65429eadebe8a9f3a30f62d0"
  }
}

Zoom answers with HTTP 201 containing registrant_id and join_url. When the webinar uses manual approval (approval_type: 1), the registrant stays pending until you approve it through PUT /webinars/{webinarId}/registrants/status. Optional custom_questions[] entries with title and value map to the webinar's registration questions.

Publish Zoom webinars to the Webflow CMS with webhooks

Zoom sends webinar.created or meeting.created when a host schedules a session. Each event can drive your events calendar by creating a CMS item with the topic, start time, and join link, and a Collection List on the events page renders it. Reverse the flow on webinar.deleted to remove the item, and flip a status field on webinar.ended.

To implement this:

1. In the Zoom App Marketplace, open your Server-to-Server OAuth app, go to Features > Access, enable Event Subscriptions, add webinar.created and meeting.created, and enter your HTTPS endpoint URL.
2. Answer Zoom's endpoint.url_validation request within 3 seconds with HTTP 200 and {"plainToken": "<token>", "encryptedToken": "<hex HMAC-SHA256>"}, hashed with your webhook secret token.
3. Verify production events with the x-zm-signature header: hash v0:{x-zm-request-timestamp}:{request_body} with the secret token and prefix the result with v0=.
4. Map payload.object.topic, start_time, and join_url into fieldData, then call POST https://api.webflow.com/v2/collections/{collection_id}/items/live with a cms:write token.

A minimal live item body:

{
  "fieldData": {
    "name": "Zoom Webinar: Topic Name",
    "slug": "zoom-webinar-topic-name",
    "start-time": "2026-10-15T14:00:00Z",
    "join-url": "https://zoom.us/j/..."
  },
  "isDraft": false
}

Items sent to /items instead of /items/live stay staged until you call POST /v2/collections/{collection_id}/items/publish with {"itemIds": ["{item_id}"]}. Slugs must be unique per collection. Zoom re-validates the endpoint every 72 hours and disables the subscription after six consecutive failures, so keep the validation handler running in production.

Publish cloud recordings to a CMS resource library

Zoom finishes processing a cloud recording before it sends the recording.completed event. Zoom's cloud recording article states that cloud recordings cannot be embedded on websites, so the CMS item stores share_url and links out to Zoom's playback page. The event requires the cloud_recording:read:recording or cloud_recording:read:recording:admin scope.

To implement this:

1. Add recording.completed to your app's Event Subscriptions.
2. On each event, read payload.object.topic, share_url, start_time, and duration. Skip recording_files[].download_url, which needs the root-level download_token, and that token lasts only 24 hours.
3. Create the item with POST /v2/collections/{collection_id}/items/live. Map topic to name, share_url to a Link field, and start_time to a DateTime field.
4. Sort a Collection List by that DateTime field, newest first, to build the replay archive.

After the token expires, GET /meetings/{meetingId}/recordings with an OAuth access token returns fresh file URLs. For video that plays on your page, Zoom Clips offer embed code, and Zoom Events and Webinars Plus video channels offer an embed script described in Zoom's VOD embed guide.

Connect the Webflow and Zoom MCP servers to an AI agent

Both platforms run MCP servers, so one AI agent can work on each side from the same conversation. Webflow's MCP server can build a collection with its fields and publish items to it. The Zoom MCP Server, hosted by Zoom, gives agents access to Zoom Workplace data such as meeting content and calendars. A practical split is to have the agent build the Events or Replays collection in Webflow, then draft a recap item from a Zoom meeting for a person to review before it goes live. Live registration still belongs to the webhook or automation paths above, because an agent in a chat window does not run each time a visitor submits a form.

What you can build with the Zoom Webflow integration

Webinar programs can eliminate attendee-list exports and manual CMS entry through these setups:

• Webinar landing pages with one-form registration: A B2B SaaS marketing team hosts the agenda, speakers, and a registration form on a Webflow CMS page per webinar. Zapier registers each submission in Zoom Webinars, and the visitor receives Zoom's join link.
• Self-serve demo and interview booking: A sales team embeds a Zoom Scheduler iframe with utm_source and utm_campaign parameters on the pricing page. A recruiting team does the same on a careers page so candidates pick interview slots themselves.
• Auto-published events calendar: An association subscribes to webinar.created so each scheduled session appears in an Events collection with its start time and join link.
• On-demand replay library: An online course provider creates a CMS item per recording.completed event. Each item links students to Zoom's recording page, with the passcode embedded in the shareable link for one-click access.

The same form-first pattern shows up when you build event registration with Webflow and Mailchimp. To let an AI agent set up the Events collection for you, connect the MCP server to your AI client.