How To Add Calendly To Webflow

Updated on:

May 11, 2026

By:

Use this interactive demo to learn how to embed a Calendly scheduling widget into your Webflow site.

Quick summary

Embedding Calendly into a Webflow site lets you display a live scheduling widget directly on your web pages without third-party plugins. This guide walks through copying your Calendly embed code and pasting it into a Webflow Embed block in just a few steps.

Steps

Inside Calendly, create a new event or select the existing event you want to embed in your Webflow project.
Click the Share button on your selected event.
Go to the Add to Website tab.
Choose the best-suited embed method for your use case — for example, select Inline Embed.
Select your choice and press Continue.
Customize your embed settings as needed.
Copy the Embed Code generated by Calendly.
Inside Webflow, drag an Embed block or Code Embed element into the desired location on your page.
Paste the Calendly embed code into the input field that opens.
Click Save or Save & Close to apply the code.
Publish your Webflow project to see the live scheduling widget appear on your site.
Your Calendly booking page is now live and embedded in your Webflow project.

📌 Why this matters

Embedding Calendly directly into a Webflow site removes friction from the booking process by letting visitors schedule meetings without leaving the page. This integration eliminates the need for redirect links or manual scheduling, improving conversion rates for sales, support, and service teams. Using Webflow's native Embed block means no extra plugins or code expertise are required — just a copy-paste workflow any no-code builder can follow. For businesses running on Webflow, adding a Calendly inline embed is one of the fastest ways to turn website visitors into booked appointments.

Your product deserves an interactive demo

Start free

How To Add Slider In Webflow

How To Animate In Webflow

How To Create A Blog In Webflow