Embed Scheduling on a Figma Website (2026): Add a Cal.com Booking Flow in 10 Minutes

Adding scheduling directly to your Figma website is one of the easiest ways to convert visitors into booked meetings—without sending them off to another tab or starting an email thread.

In 2026, the most reliable approach is still the same: **embed a booking flow** (inline or as a popup) and make sure it plays nicely with responsive layouts, privacy settings, and calendar availability.

This article shows you how to embed a **Cal.com booking page** on a Figma website quickly, plus a few practical tweaks to avoid the most common “it works on my machine” issues.

---

What you’ll build (and which embed to choose)

There are two common ways to add scheduling to a site:

1. **Inline embed (widget on the page)**

Best when you want the booking flow visible immediately (e.g., “Book a demo” section).

2. **Popup / modal embed (button opens scheduler)**

Best when you want a clean layout and a strong call-to-action (e.g., “Book time” button in hero).

If you’re publishing a Figma site and want the simplest setup in ~10 minutes, **inline embed** is often the least fussy. If you’re aiming for a polished landing page, **popup** can look better.

You can generate both from [PRODUCT_LINK]Cal.com’s embed and booking-link tooling[/PRODUCT_LINK].

---

Before you start: quick checklist

To avoid debugging later, confirm these basics first:

- You have a **shareable booking link** ready (your event type is live).

- Your **availability** and **connected calendars** are configured so times aren’t double-booked.

- You’ve tested the booking link in an incognito/private window.

If you need a scheduling platform that supports **calendar integrations, embeds, and developer-friendly customization**, [PRODUCT_LINK]the open-source scheduling platform Cal.com[/PRODUCT_LINK] is designed for exactly that workflow.

---

Step-by-step: Embed a Cal.com booking flow in a Figma website (10 minutes)

Step 1: Copy your booking page URL

Open your booking page (the URL you share with others). This is the core input for both inline and popup embeds.

Tip: If you have multiple event types (e.g., “15-min intro” vs “30-min consultation”), choose the one that matches the intent of your Figma page.

---

Step 2: Generate an embed (inline or popup)

From your Cal.com settings (or embed tools), create the embed snippet for:

- **Inline embed**, or

- **Popup button**

You’ll typically receive a small snippet of code (HTML/JS) that loads the scheduling UI.

If your Figma website builder only accepts *limited* embed types, prioritize **iframe-based inline embeds** because they’re broadly supported.

---

Step 3: Add the embed to your Figma website

The exact UI labels vary depending on how you publish your Figma site (native publishing vs a hosting layer that turns Figma designs into pages), but the flow is usually:

1. Open the page in your site editor

2. Add an **Embed**, **Custom code**, or **HTML** block

3. Paste the embed snippet

4. Publish/update

**Layout guidance (important):**

- Give the embed a dedicated section with enough height (commonly **700–900px**) so it doesn’t feel cramped.

- If you’re embedding via iframe, set width to **100%** and avoid fixed pixel widths.

- Ensure the embed isn’t inside a container with `overflow: hidden;`—that can cut off dropdowns and date pickers.

---

Step 4: Make it responsive (mobile-first quick fix)

Responsive issues are the #1 reason scheduling embeds “look broken” on Figma-based sites.

Use these quick checks:

- **On mobile**, confirm the calendar and time list fit without horizontal scrolling.

- Ensure the embed container can expand vertically.

- Avoid placing the widget inside multi-column layouts on small screens—use a single column.

If you’re using a popup/modal embed, test that:

- The modal opens above other elements (z-index issues are common)

- The page behind it doesn’t “jump” due to scroll-lock behavior

---

Step 5: Test the full booking flow end-to-end

Don’t stop at “it loads.” Run a real test booking:

- Pick a time

- Confirm details

- Complete booking

- Check that the calendar event appears in the correct calendar

- Verify confirmation emails (if enabled)

If you’re taking payments or routing to video conferencing, test those too.

---

Best practices for higher conversion (without redesigning your page)

Place scheduling near the decision point

If your Figma page is a portfolio or product landing page, the best placement is usually:

- After pricing / packages

- After testimonials / proof

- Near a “Contact” or “Work with me” section

Inline embeds work well in these spots because visitors are already convinced—they just need a time.

Use one clear event type per page

A common mistake is offering too many options (“30 min, 45 min, 60 min, intro call, discovery, onboarding…”). Keep it simple:

- One primary booking option

- Optional: a secondary link below (“Need something else? Email us.”)

Clarify what happens after booking

Add 1–2 lines above the embed:

- What the meeting is for

- How long it takes

- What visitors should prepare

This reduces no-shows and improves meeting quality.

---

Common pitfalls (and quick fixes)

1) The embed doesn’t show up at all

Usually caused by:

- Scripts blocked by the site host’s security settings

- The embed being pasted into a rich-text block instead of an HTML/embed block

Fix: use the platform’s **official embed component** or an **HTML/custom code** block.

2) The widget is cut off

Cause: container height too small or `overflow: hidden`.

Fix: increase section height and ensure overflow allows the calendar UI to display.

3) Time zone confusion

Cause: your availability time zone differs from visitors.

Fix: ensure the booking UI displays the visitor’s local time zone and your availability rules are correct. Also add a small note like “Times shown in your local time.”

4) Double bookings

Cause: calendar not connected properly or conflict rules misconfigured.

Fix: confirm your Google/Microsoft calendar integration and conflict calendars are enabled. If you need more control, [PRODUCT_LINK]Cal.com scheduling with calendar integrations and conflict checking[/PRODUCT_LINK] helps reduce overlap by reflecting real-time availability.

---

Bonus: when you should use an API instead of an embed

Embeds are perfect for speed. But if you need:

- A fully custom UI that matches your Figma design pixel-for-pixel

- Advanced routing logic (team assignment, qualification forms, round-robin)

- White-label scheduling inside your product

…then an API-driven flow is worth considering. In that case, [PRODUCT_LINK]Cal.com’s developer APIs and self-hosting options[/PRODUCT_LINK] can be a better fit than a standard embed.

---

Quick QA checklist (copy/paste)

Before you share your Figma site, verify:

- [ ] Embed loads on Chrome + Safari

- [ ] Mobile layout doesn’t overflow horizontally

- [ ] Calendar + time slots are visible without clipping

- [ ] Booking confirmation completes successfully

- [ ] Event appears on the correct calendar

- [ ] Confirmation email (and video link, if used) arrives

---

Conclusion

Embedding scheduling on a Figma website is one of the fastest ways to turn site visits into real conversations. Choose an inline embed for simplicity or a popup for a cleaner layout, then focus on the practical details: container height, mobile responsiveness, and end-to-end testing.

Once your booking flow is live and reliable, you’ve removed the biggest friction point—back-and-forth coordination—and made it easy for the right people to book time with you.