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 pop-up modal in Webflow and let users schedule a call without leaving your site, follow these steps using Calendly's inline embedding and Webflow interactions.

​

1. Get Your Calendly Pop-up Code

​

• Go to Calendly.com, log into your account.
• Click the gear icon next to your event and select "Share".
• Choose “Add to Website”, then select "Pop-up widget" or "Pop-up text".
• Copy the JavaScript snippet provided.

​

You’ll be using the pop-up widget or pop-up text script, which opens Calendly in a modal on your site.

​

2. Add Calendly Script to Your Webflow Site

​

• Go to Project Settings > Custom Code.
• In the Footer Code section, paste your Calendly snippet.
• Save and Publish the site.

​

This loads Calendly's script onto every page, enabling the pop-up modal functionality.

​

3. Add a Button or Link to Trigger the Modal

​

• In Webflow Designer, add a Button or Text Link where you want the Calendly scheduler to open.
• Go to the Element Settings panel (gear icon).
• Give your link an href="#", then click the + Add Attribute button.
• Key: onclick
• Value: 

​

    For Pop-up Widget:

    Calendly.initPopupWidget({url: 'https://calendly.com/YOURUSERNAME/YOUREVENT'});return false;

​

    Update 'YOURUSERNAME/YOUREVENT' with your actual Calendly event link.

​

4. Test the Modal on the Live Site

​

• Publish your Webflow site.
• Visit the live page and click the button or link.
• The Calendly pop-up modal should appear without navigating away.

​

Summary

​

To open a Calendly pop-up modal in Webflow, paste the Calendly script in Footer Code, add a button/link with an onclick event that triggers Calendly.initPopupWidget(), and publish your site. This keeps visitors on your site while booking a call.