How to Add Calendly to Webflow (Step-by-Step Guide)

You built the Webflow site. You have the landing page. You have the offer.

But there’s a gap — and it’s costing you meetings every single day.

When a prospect lands on your site and has to email you, call you, or fill out a form just to schedule a conversation, most of them won’t bother. That friction is silent. You don’t see it leave. But it leaves.

Calendly solves this. Embedding it directly into Webflow puts a live, bookable calendar right in front of your visitor the moment they’re interested — no back-and-forth, no delays.

This guide breaks down exactly how to do it. Step by step. Three different methods depending on how you want it to look and behave. And by the end, you’ll have it live.

Why Adding Calendly to Webflow Changes Everything

Let’s talk numbers first, because this isn’t just a nice-to-have.

68% of customers say they prefer self-scheduling over calling or emailing to book a meeting. That means more than half your visitors want to book themselves — they just need the option to exist.

Businesses that add scheduling tools directly to their website see up to 50% more meetings booked compared to sites that route prospects through contact forms or manual follow-up. That’s not a marginal improvement. That’s a business-changing one.

Calendly has over 20 million users across more than 100 countries. It’s become the default scheduling infrastructure for teams that take meetings seriously. Meanwhile, Webflow powers over 3.5 million websites — making this combination one of the most common setups for modern businesses.

The math is simple. Reducing scheduling friction converts more of the traffic you’re already getting. You don’t need more visitors. You need more of your existing visitors to take the next step.

And the step after the meeting? That’s where deals get done.

What You Need Before You Start

Before you touch Webflow, get these two things sorted:

A Calendly account. Free tier works for basic embed functionality. If you want features like team scheduling, round-robin routing, or custom branding removal, you’ll want their Standard or Teams plan.

Access to your Webflow project. You’ll need editor or admin access. If you’re using a free Webflow plan, you can still embed Calendly — but you’ll need to publish to a custom domain or use a paid site plan to see the full live embed in action.

That’s it. No code experience required for any of the three methods below.

How to Get Your Calendly Embed Code

Every method starts here. This is where you grab the code that goes into Webflow.

Log into your Calendly account. Click on your Event Type — the specific meeting type you want to embed (30-minute call, demo, discovery session, whatever it is).

Click the three-dot menu on that event. Select “Share.” A panel opens with sharing options.

Click “Add to website.” You’ll see three embed options:

• Inline Widget — the full calendar shows directly on your page
• Popup Widget — a button that triggers the calendar in a floating popup
• Popup Text — a text link that triggers the same popup

Choose your format. Calendly generates the embed code automatically. Copy it. Now go to Webflow.

Method 1: Add Calendly as an Inline Widget in Webflow

This is the most visible option. The full calendar sits right on your page — no clicking required to see it. Best for dedicated booking pages, landing pages, or anywhere you want the calendar to be the main event.

Step 1: Open Webflow Designer. Navigate to the page where you want the calendar embedded.

Step 2: In the left panel, find the Elements tab. Search for “Embed” — it’s the custom code element. Drag it onto your canvas, placing it where you want the calendar to appear.

Step 3: Double-click the Embed element to open the code editor. Paste your Calendly inline widget code here.

Step 4: Click “Save & Close.” The element renders a placeholder in the designer. Hit preview or publish to see it live.

Step 5: Publish your site. Your calendar is live.

The inline embed loads the full Calendly widget within your page layout. Visitors can pick a date and time without ever leaving the page. Studies show that removing redirect steps from booking flows increases completion rates by up to 38% — keeping visitors on-page matters.

Method 2: Add a Calendly Popup Widget in Webflow

The popup method gives you a branded button. Visitors click it, a calendar overlay appears, they book, it closes. Clean. Non-intrusive. Works well on pages where the calendar isn’t the only thing happening — service pages, pricing pages, about pages.

Step 1: In Webflow, create or select a button on your page. Style it however matches your brand.

Step 2: Drag an Embed element onto your page — it doesn’t need to be visible. Place it near the bottom of your section or page.

Step 3: Paste the Calendly popup widget code into the embed element. This code loads the Calendly script and sets up the trigger logic.

Step 4: In your Calendly popup code, you’ll see a data-url attribute pointing to your scheduling link. Make sure this matches your specific event type URL.

Step 5: Now go to your button in Webflow. In the element settings, add a class or ID that matches what the Calendly script is looking for — typically calendly-open-button or whatever you’ve set in the embed code.

Step 6: Save and publish. Test by clicking the button in preview mode.

Note: Webflow’s Designer preview may not fully render JavaScript-dependent elements. Always test in a browser after publishing.

Method 3: Add Calendly as Popup Text in Webflow

Same concept as the popup widget, but triggered by a text link instead of a button. Useful for embedding booking options naturally within paragraph text — “Schedule a quick call here” mid-sentence, fully bookable.

Step 1: Add an Embed element to your page (same as Method 2). Paste the popup text embed code from Calendly.

Step 2: In Calendly’s popup text embed code, look for the anchor tag with class=”calendly-open-button” and the link text Calendly auto-generates. You can customize this text to match your page copy.

Step 3: If you want to embed this naturally within a paragraph, you can place the Embed element inline within a Rich Text block, or use it as a standalone text element.

Step 4: Publish and test in a live browser window.

How to Customize Your Calendly Embed in Webflow

The default embed works. But the optimized embed converts better.

Hide the event details and cookie banner. Calendly lets you add ?hide_event_type_details=1&hide_gdpr_banner=1 parameters to your calendar URL inside the embed code. Cleaner look. Less distraction.

Match your brand colors. Inside your Calendly event settings (under Appearance), you can set a primary color for the calendar UI. Use your brand’s primary hex code so the widget feels native to your site rather than dropped in from somewhere else.

Pre-fill visitor details. If you’re sending people to this page from a campaign where you already know their name and email, you can pass that information via URL parameters in the embed code. Calendly will auto-populate their booking form. Pre-filled forms see up to 40% higher completion rates compared to blank ones.

Set up confirmation actions. In Calendly’s event settings, you can redirect visitors to a specific URL after booking, or show a custom confirmation message. Use this to send them to a thank-you page, a resource, or the next step in your funnel.

Common Mistakes That Kill Your Booking Rate

Getting the embed live is step one. Getting it to actually convert is step two. Here’s where most people leave performance on the table.

Burying the calendar. If your Calendly embed is below the fold on a long page, most people won’t scroll to it. Put it where the intent is highest — near your value proposition, not at the bottom of the page as an afterthought.

Using a generic event name. “30-Minute Meeting” doesn’t tell a visitor what they’re booking or why it’s worth their time. “30-Minute Growth Strategy Call” does. The name shows up in the embed. Make it compelling.

Not testing on mobile. Over 60% of web traffic now comes from mobile devices. Webflow is responsive, but your Calendly embed layout may need adjustment at smaller breakpoints. Test it. Fix it.

Embedding without a reason to book. The calendar alone doesn’t convert. The context around it does. Add a short line above the embed — what will happen on this call, what problem it solves, what the visitor gets. Give them a reason to click a time slot.

Conclusion

Adding Calendly to Webflow is one of the highest-leverage, lowest-effort things you can do to convert more visitors into actual conversations.

The setup takes under 10 minutes. The impact compounds every day your site is live.

Choose the method that fits your page — inline for maximum visibility, popup for cleaner layouts, popup text for natural in-content placement. Customize the embed to match your brand. Add context around it so visitors know why the call is worth their time.

Then think bigger.

A live booking page is powerful. But the businesses that scale fastest aren’t waiting for prospects to find them — they’re going directly to the right people with targeted outbound. That combination — a frictionless inbound booking experience backed by a systematic outbound engine — is where consistent pipeline comes from.

If you want to see what that full system looks like for your business, book a strategy meeting with SalesSo. We’ll map out the targeting, the campaign design, and the scaling approach — and you’ll leave with a clear picture of what’s possible.