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 display a Calendly booking form in a pop-up modal in Webflow, you’ll embed the Calendly widget inside a hidden modal and trigger it with a button or link click.

1. Add the Modal Structure in Webflow

• Create a Div Block and name it something like Modal Wrapper.

• Set Position: Fixed, full width and height, top: 0, left: 0, z-index: 9999.

• Give it a semi-transparent background (e.g., rgba(0, 0, 0, 0.6)).

• Set Display: None initially so it stays hidden.

• Inside this div, add another Div Block named Modal Content.

• Center it using Flexbox or margin auto.

• Give it padding and a background color (usually white).

• Set a specific width and height, or make it responsive.

• Inside Modal Content, add an Embed element with your Calendly widget code (see next step).

2. Embed Calendly Inline Widget

• Get your Calendly inline embed code from Calendly:

• Go to your Calendly Event → Share → Add to Website → Choose Embed Inline.

• In the Embed element in your modal, paste only the Calendly inline widget script, typically like:

  <div class="calendly-inline-widget" data-url="https://calendly.com/yourname/meeting" style="min-width:320px;height:630px;"></div>
  (Ensure the height fits your modal content)

• Add Calendly’s embed script once to your page or Project Settings > Custom Code > Footer:

  <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>

3. Create a Button to Trigger the Modal

• Add a Button or Link somewhere on your page with text like "Schedule a Call".
• Give it an ID or class like open-modal.

4. Add Modal Open/Close Interactions

• Go to Interactions panel (Lightning Bolt icon).

• Choose your trigger element (e.g., the button), then click + Element Trigger → Mouse Click (Tap).

• First Click: Set an animation to change the Modal Wrapper from Display: None to Display: Flex or Block, and use Opacity: 0 to 100% for a fade-in effect.

• Add a close X Icon inside the modal and assign it a class like close-modal.

• Create another interaction:

• Trigger: Click on close-modal.

• Action: Animate the Modal Wrapper to opacity: 0, then set display: none.

5. Optional: Close Modal on Click Outside Content

• Add an interaction to the outer Modal Wrapper (excluding Modal Content) to close the modal when it’s clicked.

Summary

To show a Calendly form in a modal in Webflow: embed the inline Calendly widget in a hidden modal, set interactions to display it on button click, and add a way to close the modal. This keeps users on your site while allowing direct scheduling.