Google Meet

Webflow does not generate video conferencing links or manage meeting bookings on its own. When a site visitor fills out a consultation request form or registers for a webinar, there is no built-in mechanism to create a video call, assign a meeting room, or send a join link. Teams that run discovery calls, demos, or live sessions need an external system to handle that workflow.

Connecting Google Meet with Webflow fills that gap with a few practical setup options. Visitors can book meetings from a Webflow site through embedded scheduling interfaces, and Google Meet links can be generated automatically for each booking. Form submissions can also kick off meeting creation through automation platforms, and developers can build custom pipelines that write meeting data back to the Webflow CMS for display on CMS-powered pages and in Collection Lists.

This integration is most useful for consultants who book discovery calls from portfolio sites, SaaS teams that schedule product demos from landing pages, educators who run live sessions for enrolled students, and agencies that onboard clients through video kickoff meetings. Any team using Google Workspace for video conferencing and Webflow for their website will find a practical setup path here.

How to integrate Google Meet with Webflow

What is Google Meet? Google Meet is Google's video conferencing platform, bundled into every Google Workspace plan. It supports video and voice calls, screen sharing, live captions, and dial-in access across desktop and mobile. Paid Workspace plans add recording, breakout rooms, transcripts, attendance tracking, and AI-generated meeting notes.

Teams combine Google Meet and Webflow when their website needs to convert visitors into scheduled video calls. A financial advisor's service page, a SaaS company's demo request form, or an educator's course enrollment page all benefit from generating a Meet link the moment someone books a session. The specific method depends on how much control the implementation requires.

The Google Meet-Webflow integration supports 3 approaches:

• Scheduling widget embeds using Calendly, Cal.com, or Google Calendar appointment pages let visitors book time slots directly on a Webflow page, with Meet links auto-generated per booking.
• Automation platforms connect Webflow triggers such as new form submissions or new orders to Google Meet meeting creation without writing code.
• The Webflow and Google Meet APIs give you full control over meeting creation, CMS data storage, and post-meeting artifact retrieval, but require server-side development.

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

Embed scheduling widgets with Code Embed elements

Scheduling tool embeds are the fastest way to add Google Meet booking to a Webflow site. Tools like Calendly, Cal.com, and Google's own appointment scheduling pages handle availability management and Meet link generation. You embed their booking interface on your Webflow page using a Code Embed element, and each confirmed booking produces a unique Google Meet join link sent to both parties. This approach requires no backend development.

All embed methods share the same Webflow-side workflow:

1. Open Webflow and click the Add panel (+ icon in the left sidebar).
2. Search for "Embed" or locate the Code Embed element (displayed as </>).
3. Drag the Code Embed element onto the canvas where the booking widget should appear.
4. Double-click the element to open the code editor, paste the embed code, and click Save and Close.
5. Publish the site. Embeds render only on the published site, not in the Webflow canvas.

This is the common insertion process regardless of which scheduler you use.

The differences are in how you generate the embed code and configure Google Meet as the video provider.

Embed Calendly with Google Meet

Calendly is the most common path for adding Google Meet scheduling to a Webflow site. When Google Meet is set as the conferencing provider for a Calendly event type, Calendly generates a unique Meet link for every booking automatically. You configure everything in Calendly and only paste embed code into Webflow.

To set up Calendly with Google Meet on a Webflow page:

1. In your Calendly account, open the event type you want to embed and set Google Meet as the meeting location.
2. Click the three dots icon next to "View landing page," then select Add to Website.
3. Choose an embed type: inline (full calendar in the page body), pop-up widget (floating button), or pop-up text (text link that opens a modal).
4. Customize colors and button text, then click Copy code.
5. In Webflow, drag a Code Embed element onto the page and paste the copied code.

This places the scheduler directly on the page while leaving Meet link generation to Calendly.

The inline embed code follows this structure:

<div class="calendly-inline-widget"
  data-url="https://calendly.com/YOUR_USERNAME/YOUR_EVENT?hide_gdpr_banner=1"
  data-resize="true"
  style="min-width:320px;height:700px;">
</div>
<script type="text/javascript"
  src="https://assets.calendly.com/assets/external/widget.js"
  async>
</script>

For a site-wide pop-up widget, paste the code in custom code in head and body tags under Site settings > Custom Code > Footer code. Webflow also provides a dedicated Calendly setup guide with additional details. This route works well when you want the booking flow to live directly on the page. Because these methods rely on Webflow custom code access, they require a paid site plan.

Embed Cal.com with Google Meet

Cal.com is an open-source scheduling alternative. Google Meet is installed from Cal.com's App Store, and unique Meet links are generated for each booking.

To embed Cal.com scheduling on a Webflow page:

1. In Cal.com, open the event type you want to embed and confirm Google Meet is connected as the video provider.
2. Click Embed, choose an embed type (inline, pop-up, button, or email), and copy the generated HTML.
3. In Webflow, drag a Code Embed element onto the page and paste the snippet.

This is a good fit when you want a scheduling flow similar to Calendly with a different product stack.

For a pop-up triggered by clicking a specific Webflow button, the embed code looks like this:

<button class="button" id="buttonId"
  data-cal-link="userName/intro"
  data-cal-namespace=""
  data-cal-config='{"layout":"column_view"}'>
  Book a Call
</button>

Cal.com's free tier supports Google Meet integration. Like Calendly embeds, these custom-code methods depend on Webflow custom code access. It is a strong option for teams that want a scheduling tool outside the Calendly ecosystem.

Embed Google Calendar appointment scheduling

Google Calendar includes a native appointment scheduling feature that generates booking pages with automatic Meet link creation. This option keeps everything within Google's ecosystem without a third-party scheduling tool. It requires a Google Workspace account.

To embed Google Calendar appointment scheduling:

1. Open Google Calendar on a computer.
2. Under Booking pages, hover over a booking page and click Options > Sharing options > Website embed.
3. Choose All booking pages or A single booking page, then click Inline booking page.
4. Adjust width and height if needed, then click Copy code > Done.
5. In Webflow, drag a Code Embed element onto the page and paste the iframe code.

This keeps booking and Meet generation inside Google Calendar itself.

Google Calendar also provides a standard iframe embed for displaying a public calendar with existing events. This view-only embed shows event details and attached Meet links but does not support booking. It works well for displaying upcoming webinar schedules or office hours. Choose this path when you want a native Google booking page rather than a separate scheduling product. Unlike third-party custom-code widget setups, Google Calendar iframe and appointment scheduling embeds do not require a paid Webflow plan, though appointment scheduling still requires Google Workspace.

Connect with Zapier or viaSocket

Automation platforms connect Webflow events to Google Meet link creation without requiring custom code. In practice, these workflows usually start with a Webflow trigger and then create a Google Calendar event with conferencing data so Google can generate the Meet link.

Zapier offers a pre-built template called "Create Google Meet meetings from new Webflow form submissions." viaSocket provides multiple Webflow-to-Google Meet templates, including "Schedule a Meeting in Google Meet when New Form Submission in Webflow" and "Schedule a Meeting in Google Meet when New Order in Webflow."

Webflow-triggered automation examples across these platforms include:

• Zapier: "Create Google Meet meetings from new Webflow form submissions"
• viaSocket: "Schedule a Meeting in Google Meet when New Form Submission in Webflow"
• viaSocket: "Add Attendees to Meeting in Google Meet when New Form Submission in Webflow"
• viaSocket: "Update Meeting in Google Meet when New Form Submission in Webflow"
• viaSocket: "Cancel Meeting in Google Meet when New Form Submission in Webflow"
• viaSocket: "Schedule a Meeting in Google Meet when New Order in Webflow"
• viaSocket: "Add Attendees to Meeting in Google Meet when New Order in Webflow"

These examples show the most common no-code patterns: creating meetings from form submissions and triggering follow-up meeting steps from orders.

To set up the Zapier integration:

1. Go to Zapier and click Create > New Zap.
2. Choose Webflow as the trigger app, then select Form submission as the trigger event.
3. Connect your Webflow account and select the target site and form.
4. For the action step, choose Google Calendar and select the event creation action.
5. Map your form fields (name, email, preferred time) to calendar event fields. Meet is added automatically when conferencing is enabled.

This setup is best when you want to keep Webflow's native form experience and hand off meeting creation to an automation layer.

Google Calendar acts as the intermediary for Meet link generation across these workflows. Consider using Zapier when you want to use Webflow's native forms rather than a third-party booking widget. Use the scheduling embed approach from the previous section if visitors need to self-select available time slots.

Build with the Webflow and Google Meet APIs

For implementations that need dynamic Meet link creation, CMS-stored meeting data, or post-meeting artifact retrieval, the API path provides full control. This approach requires server-side development because Webflow runs all custom code client-side in the browser, and Google's OAuth token exchange requires a client secret that cannot be exposed in client-side JavaScript. A serverless backend on Vercel, Netlify, or Google Cloud Functions is required.

The relevant APIs for this integration:

• The Google Meet REST API (v2) creates meeting spaces, retrieves conference records, and accesses recordings, transcripts, and participant data.
• The Google Calendar API (v3) creates calendar events with auto-generated Meet links via the conferenceData.createRequest parameter.
• The Google Workspace Events API delivers real-time webhooks when conferences start, participants join, or recordings become available.
• Webflow's Data API handles CMS collection items, form submission retrieval, and webhook subscriptions.
• Webflow webhooks trigger real-time events between systems, firing on form submissions, CMS item changes, and new orders.

All Google Meet and Calendar API calls require OAuth 2.0 authentication with appropriate scopes. Apps requesting sensitive scopes must complete Google's OAuth verification process before real users can authorize.

Create Meet links from Webflow form submissions

This is the most common API use case. A visitor submits a Webflow form, a serverless function receives the webhook payload, calls the Google Calendar API to create an event with conferencing, and optionally writes the Meet link back to a Webflow CMS item.

To implement form-to-meeting automation:

1. Register a Webflow webhook for form submissions by calling POST https://api.webflow.com/v2/sites/{site_id}/webhooks with triggerType set to form_submission and url pointing to your serverless function endpoint.
2. In your serverless function, parse the webhook payload to extract form field values (name, email, requested time).
3. Call the Google Calendar API to create an event with a Meet link:

POST /calendar/v3/calendars/primary/events?conferenceDataVersion=1

{
  "summary": "Consultation with {form_field_name}",
  "start": {
    "dateTime": "2025-06-01T10:00:00-07:00",
    "timeZone": "America/Los_Angeles"
  },
  "end": {
    "dateTime": "2025-06-01T11:00:00-07:00",
    "timeZone": "America/Los_Angeles"
  },
  "attendees": [
    { "email": "{form_field_email}" }
  ],
  "conferenceData": {
    "createRequest": {
      "requestId": "{unique-uuid-per-event}",
      "conferenceSolutionKey": {
        "type": "hangoutsMeet"
      }
    }
  }
}

4. Extract the hangoutLink from the API response. This top-level field contains the Meet join URL; the response also includes a conferenceData.entryPoints array where the video entry point URI is available.
5. Optionally, write the Meet link to a Webflow CMS item by calling POST https://api.webflow.com/v2/collections/{collection_id}/items/live with the link stored in a text field.

The conferenceDataVersion=1 query parameter is mandatory. Without it, the Calendar API will not generate a Meet link even if conferenceData.createRequest is present. Each requestId must be unique per event. Reusing a requestId can cause access issues. The initial API response may return a pending status for the conferencing data, so poll until the status changes to success if you need the Meet link immediately.

Create Meet spaces without calendar events

When you need a persistent meeting room without an associated calendar event, the Meet REST API's spaces.create endpoint generates a standalone space.

To create a Meet space and store it in Webflow CMS:

1. Call POST https://meet.googleapis.com/v2/spaces with the meetings.space.created OAuth scope. The response includes meetingUri, meetingCode, and name fields.
2. Write the meeting data to a Webflow CMS collection by calling PATCH https://api.webflow.com/v2/collections/{collectionId}/items/{itemId} with the meetingUri stored in a text field.
3. Display the Meet link on a CMS-powered page using a Webflow CMS template page bound to that collection field.

This path is useful when the meeting room should exist independently of a scheduled calendar event.

Use live item endpoints (/items/live or /items/{item_id}/live) when Meet links should appear on the published site immediately without a separate publish step. This keeps the CMS display in sync with the meeting data your backend creates.

Sync meeting events to Webflow CMS with webhooks

The Google Workspace Events API delivers real-time notifications when meeting events occur. Subscriptions support these event types for Meet:

• google.workspace.meet.conference.v2.started (conference begins)
• google.workspace.meet.conference.v2.ended (conference ends)
• google.workspace.meet.participant.v2.joined (participant joins)
• google.workspace.meet.participant.v2.left (participant leaves)
• google.workspace.meet.recording.v2.fileGenerated (recording is ready)
• google.workspace.meet.transcript.v2.fileGenerated (transcript is ready)

These events let a middleware service react to the main stages of a meeting lifecycle and sync the resulting data back to Webflow.

These events are delivered through Google Cloud Pub/Sub. Your middleware server subscribes to the Pub/Sub topic, decodes the CloudEvent payload (Base64-encoded), calls the Meet REST API to retrieve full resource data using the resource name from the payload, and then writes the data to Webflow CMS via POST or PATCH requests.

Conference record data expires 30 days after the conference ends. Plan your sync timing accordingly.

What can you build with the Google Meet Webflow integration?

Integrating Google Meet with Webflow lets you turn any page into a meeting booking point without building a separate scheduling backend.

• Consultation booking pages: Embed Calendly or Cal.com on a financial advisor's service page so prospects book discovery calls while browsing case studies. Google Meet links generate automatically and arrive in both parties' inboxes with calendar invites attached.
• Demo request automation: Add a "Request a Demo" form to a SaaS landing page. When a visitor submits the form, Zapier creates a Google Calendar event with a Meet link and sends a confirmation email to the prospect and the assigned sales rep.
• Student session dashboards: Build a CMS-powered course site where enrolled students see upcoming live sessions with Meet join links. A serverless function creates calendar events when new sessions are added to the CMS, and Meet links are written back to collection items for display on template pages.
• Webinar registration with automated follow-up: Create a registration form on an event landing page. Each registration triggers meeting creation through an automation platform, and registrants receive a Google Calendar invite with the Meet join link and event details.

If you need more control over meeting space configuration, participant tracking, or post-meeting transcript retrieval, the API integration path covers those cases with full flexibility.