How can I create a pop-up modal for a Calendly booking form in Webflow so that visitors can schedule a call without leaving my website?

To embed a Calendly booking form in a pop-up modal in Webflow, you need to (1) embed Calendly using their inline widget and (2) trigger it using Webflow interactions. Follow these steps:

1. Create the Calendly Embed Code

• Go to your Calendly account and click "Share" on the event type you want to embed.
• Select "Add to Website" > choose Inline Embed.
• Copy only the Calendly inline URL (e.g., https://calendly.com/yourname/meeting) — you won’t use their full script since Webflow handles triggers natively.

2. Design Your Modal in Webflow

• Create a Div Block (give it a name like Modal Wrapper) and set:

• Position: Fixed

• Top, Bottom, Left, Right: 0

• Z-index: 9999

• Display: none (this hides the modal initially)

• Background color: semi-transparent black (e.g., rgba(0,0,0,0.5))

• Inside this Div Block, insert another Div Block (e.g., Modal Content) where the Calendly form will appear:

• Style it with a white background, padding, and max-width.

• Optionally, add a Close button inside (e.g., an “X” icon).

3. Embed Calendly in the Modal

• Drag a “Embed” component inside the Modal Content container.

• Paste this iframe in the embed code:

  <iframe src="https://calendly.com/yourname/meeting" width="100%" height="700" frameborder="0" scrolling="no"></iframe>

• Replace yourname/meeting with your actual Calendly event URL.

• Alternatively, if you want lighter loading, add loading="lazy".

4. Create the Trigger Button

• Add a Button or Link Block anywhere on your page labeled "Book a Call" or similar.
• Give it an identifier using a class or a unique ID (e.g., book-call-button).

5. Add Webflow Interactions to Show the Modal

• Select the Trigger Button.

• Go to Interactions panel (lightning icon) in Webflow Designer.

• Create a Mouse Click (Tap) interaction.

• Set it to Show/Display the Modal Wrapper (change Display to Flex or Block and optionally add opacity/scale animation).

• For the Close Button, repeat this:

• Create another interaction that sets the Modal Wrapper to Display: None when clicked.

Summary

To build a Calendly pop-up modal in Webflow:

• Design a modal layout with a hidden wrapper and embed your Calendly widget inside.
• Trigger the modal using Webflow Interactions on a button click.
• Ensure visitors can also close the modal using a dedicated close element.

This setup keeps users on your site while booking and offers a smooth experience using native Webflow tools with Calendly’s iframe embed.