How to Embed a Calendly Popup Modal in Webflow Without Losing Visitors

You have built a stunning Webflow landing page. The messaging is sharp, the design is polished, and your call-to-action button is getting clicks. But then something frustrating happens — visitors click to book a call and get redirected to an external Calendly page. Many of them never return.

Every external redirect creates friction. It gives prospects a chance to get distracted, check their inbox, or simply close the tab and forget about you entirely. The solution is straightforward: embed Calendly as a popup modal that opens directly on your Webflow page.

In this guide, we will walk through exactly how to add a Calendly popup modal to Webflow so you can keep visitors on-site and increase booking completion rates.

Why Popup Modals Convert Better Than External Links

When someone clicks your booking CTA, they have already made a micro-commitment. They want to schedule time with you. Sending them to an external URL breaks that momentum and introduces unnecessary steps into the conversion process.

A popup modal keeps the entire experience within your page. The Calendly calendar appears in an overlay, visitors select their preferred time, and the booking happens without them ever leaving your site. There is no opportunity for distraction because your brand and messaging remain visible in the background.

This approach works particularly well for landing pages, service pages, and anywhere you have a focused conversion goal. The seamless experience reinforces trust and makes it easier for prospects to complete the action they intended to take.

Three Calendly Embed Methods Compared

Calendly offers three different ways to add scheduling functionality to your website. Understanding the differences helps you choose the right approach for your specific use case.

Inline Embed

The inline embed displays your Calendly calendar directly on the page as a static block. This method works well for dedicated booking pages where scheduling is the primary action visitors should take. However, it consumes significant vertical space — often 600 pixels or more — which makes it impractical for most landing page layouts.

Popup Widget

The popup widget adds a floating button, typically in the bottom corner of your screen, that opens Calendly when clicked. This approach suits websites where scheduling is a secondary action that should always be available. The downside is limited control over placement and styling.

Popup Text Modal

The popup text option lets you trigger Calendly from any element you design — buttons, text links, custom divs, or navigation items. When visitors click your CTA, the calendar opens in an overlay while they remain on your page. This method offers the most flexibility for conversion-focused layouts and is what we recommend for most Webflow projects.

What You Need Before Starting

Implementing a Calendly popup modal in Webflow requires a few prerequisites. First, you need a Calendly account with at least one Event Type created. The free plan works perfectly for this purpose. Log into Calendly, click Create in the top navigation, and set up a basic meeting type with your preferred duration and meeting location.

Second, you need access to Webflow's site-level Custom Code section. This is found in Project Settings under Custom Code. If you are working on a client project, you may need to request this access from the site owner.

Third, you need a button or link element in your Webflow design that will trigger the popup. This can be any clickable element — the key is giving it a unique ID or class name that we will use to connect it to Calendly's popup function.

Step-by-Step Implementation Guide

Step 1: Get Your Calendly Embed Code

Log into your Calendly account and navigate to your Home dashboard. Find the Event Type you want to embed and click the gear icon to open settings. In the left sidebar, look for the Add to Website section and click it.

You will see three embed options. Select Popup Text — this generates code designed to work with buttons and links you control. Calendly will ask you to customize the link text, but since we are using our own styled button, the exact wording does not matter much here.

Click Continue and then Copy Code. The snippet includes a CSS link, a JavaScript script tag, and an anchor tag with an onclick handler. We will split this code in the following steps.

Step 2: Add the Calendly Script to Webflow

In your Webflow project, click the gear icon in the left sidebar to open Site Settings. Navigate to the Custom Code tab. You will see two code sections: Head Code and Footer Code.

Paste the following lines into your Footer Code section:

<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">

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

This loads Calendly's widget functionality and styling globally across your site. Save your changes before proceeding.

Step 3: Create Your Trigger Button

Go to the Webflow Designer and add or select the button element that will trigger your Calendly popup. In the element settings panel on the right side, give this button a unique ID — something like calendly-button or book-call-cta.

Style the button however you like. The appearance is completely up to you since Calendly only cares about the trigger functionality, not the visual design.

Step 4: Add the Trigger Code

Add an Embed element to your page, positioning it near your button or at the bottom of your page section. Paste the following code, replacing the URL with your actual Calendly Event Type link:

<script>document.getElementById('calendly-button').addEventListener('click', function() { Calendly.initPopupWidget({url: 'https://calendly.com/your-username/30min'}); return false; });</script>

Make sure the ID in the code matches the ID you assigned to your button. This script listens for clicks on your button and triggers the Calendly popup modal when clicked.

Step 5: Publish and Test

Calendly's popup modal will not work in Webflow's preview mode. You need to publish your site to test the functionality. Click Publish in the top right corner of the Designer and wait for your changes to go live.

Visit your published page and click the booking button. The Calendly modal should appear as an overlay, allowing visitors to schedule without leaving your page. Test the complete booking flow to ensure everything works correctly.

Troubleshooting Common Issues

If your popup is not appearing, double-check that the button ID in your trigger code matches exactly what you set in the element settings. IDs are case-sensitive, so calendly-button and Calendly-Button are different.

Make sure you published the site after adding all the code. Preview mode will not load external scripts properly, which causes the popup to fail silently.

If you have multiple booking buttons across different pages, consider using a class name instead of an ID. Update your trigger code to use document.querySelectorAll with the class selector and loop through each element to add the click listener.

Optimizing Your Booking Experience

Once your popup modal is working, consider a few optimizations to improve the user experience. Keep your Event Type durations reasonable — 15 or 30 minutes for initial calls prevents calendar overload.

Customize your Calendly confirmation page to reinforce your brand messaging. This appears after someone books successfully and is a great opportunity to set expectations or share additional resources.

Test your popup on mobile devices to ensure the experience works well on smaller screens. Calendly's widget is responsive, but your trigger button placement might need adjustment for mobile layouts.

Keep Visitors On-Site and Booking Calls

Adding a Calendly popup modal to your Webflow site removes friction from your booking process. Visitors stay on your page, the scheduling experience feels integrated rather than disjointed, and you reduce the chances of prospects getting distracted before completing their booking.

The implementation takes about 15 minutes and requires no advanced coding knowledge — just copying the right code snippets into the right places. The result is a smoother conversion flow that keeps momentum going from CTA click to confirmed booking.

If you need help implementing Calendly modals or want to optimize your Webflow site for better conversions, reach out to us at https://www.uxie.design. We specialize in building high-converting Webflow sites that turn visitors into customers.