Embedding Zoom Scheduler on your website

You can embed Zoom Scheduler directly on your website to let visitors book meetings without leaving your site. This helps maintain brand continuity by keeping your fonts, colors, and style consistent, while also streamlining the booking process for your users.

Requirements for embedding Zoom Scheduler on your website

• Zoom Scheduler enabled

How to embed Zoom Scheduler on your website

1. Sign in to the Zoom web portal.
2. In the navigation menu, click Scheduler, then select the booking page you want to embed.
3. Click Share, then select Add to Website.
4. Customize the embedded frame:
   • Width and height
   • Background, text, and button colors
   • Font size and font family
5. Click Copy code to copy the <iframe> snippet.
6. Paste the code into your website’s HTML.
   If you use one of the following website providers, refer to their support articles for embedding instructions:
   • WordPress
   • Wix
   • Squarespace
   • Weebly

Recommended responsive snippet

<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>

• Keep ?embed=truein the URL to ensure the page displays correctly.
• Adjust min-height(for example, 560–900px) to fit your layout.

Common issues and quick fixes:

• Cut off / scrollbars: Increase the iframe height, confirm the container isn’t restricting the height, and keep width:100%.
• Blocked frame / doesn’t load: Allow https://scheduler.zoom.us in your site’s Content Security Policy (CSP) for frame-src or child-src. Ensure your page is served over HTTPS.
• Mobile looks cramped: Make the embed full-width. On very small screens, consider linking directly to the booking page for a better user experience.

Advanced Integration: URL Parameters, UTMs & Origin (postMessage)

You can pass data into your embedded Zoom Scheduler through URL parameters and receive a confirmation callback using postMessage. This allows you to prefill booking forms, track campaign data, and integrate bookings with analytics or CRM workflows.

Add URL parameters (tracking & prefill)

Supported parameters

• UTMs: utm_campaign, utm_content, utm_medium, utm_source, utm_term
• Prefill: firstname, lastname
• Default calendar view: month=YYYY-MM (for example, 2025-10)

Example

<iframe
  src="https://scheduler.zoom.us/<your-handle>/<your-page>?embed=true
       &utm_source=website&utm_medium=hero&utm_campaign=q3
       &utm_term=embed
       &firstname=Alex&lastname=Lee
       &month=2025-10"
  style="width:100%; min-height:560px; border:0;"
  frameborder="0"
  title="Book time with Alex Lee">
</iframe>

Notes

• Separate parameters with &; URL-encode values (for example, + or %20 for spaces).
• Prefill values only appear if the corresponding fields exist on the booking form.
• Keep parameters concise and avoid including PII in UTMs.

Dynamic injection examples

Vanilla JavaScript

<script>
  const iframe = document.querySelector('#zs-embed');
  const base = "https://scheduler.zoom.us/<handle>/<page>?embed=true";
  const params = new URLSearchParams({
    utm_source: 'website',
    utm_medium: 'pricing',
    utm_campaign: 'fall',
    firstname: window.userFirstName || '',
    lastname: window.userLastName || ''
  });
  iframe.src = `${base}&${params.toString()}`;
</script>

React component

export default function SchedulerEmbed({ utm, user, month }) {
  const base = "https://scheduler.zoom.us/<handle>/<page>?embed=true";
  const q = new URLSearchParams({
    utm_source: utm.source,
    utm_medium: utm.medium,
    utm_campaign: utm.campaign,
    utm_term: utm.term,
    firstname: user?.firstName,
    lastname: user?.lastName,
    month
  }).toString();
  return (
    <iframe
      title="Book time"
      style={{ width: "100%", minHeight: 560, border: 0 }}
      src={`${base}&${q}`}
    />
  );
}

Origin (optional — receive confirmation through postMessage)

Providing an Origin allows the embedded Scheduler to send form-filled booking information to your page after a successful booking. This can be used for:

• Triggering analytics events
• Updating a CRM
• Displaying a custom “Thank You” state

Notes

• Embedding works without specifying an Origin.
• Format: exact scheme + domain (+ port if applicable), e.g., https://app.example.com.

Example Listener

<script>
  window.addEventListener('message', (event) => {
    // Always verify sender
    if (event.origin !== 'https://scheduler.zoom.us') return;

    // The confirmation payload with booking + form details
    const data = event.data;
    console.log('Zoom Scheduler booking confirmed:', data);

    // Example: analytics event or CRM call
    // analytics.track('Booking Confirmed', data);
  });
</script>

Troubleshooting

• UTMs/prefill not showing: Check spelling, confirm parameters are included in the same src URL as ?embed=true, URL-encode values, and verify fields exist on the booking form.
• Iframe blocked: Update your CSP to allow https://scheduler.zoom.us. The Origin parameter does not affect CSP; it only enables the postMessage callback.
• Cross-domain issues: Ensure the postMessage listener runs on the embedding page and validate event.origin.
• URL too long: Keep values short and avoid sending sensitive data via query strings.