How Do You Integrate Calendly Into Webflow?

Integrating Calendly into your Webflow website is a great way to streamline your scheduling process and make it easier for visitors to book appointments with you. In this tutorial, we will guide you through the steps of integrating Calendly seamlessly into your Webflow site.

First, let’s start by logging into your Calendly account and creating an event type that you want to embed on your website. Once you have created the event type and customized it according to your preferences, follow these steps:

Step 1: Copy the Embed Code from Calendly

Once you have configured your event type, click on the “Share” button located at the top right corner of the screen. A pop-up window will appear with different sharing options. Select the “Embed” tab.

Step 2: Customize the Embed Settings

In the Embed tab, you can customize the appearance and behavior of the embedded Calendly widget. You can choose between Inline, Popup Text, or Popup Widget options based on how you want it to be displayed on your Webflow site.

Additionally, you can set up advanced options like pre-filling form fields or redirecting users after they schedule an appointment. Make sure to explore these settings to optimize the user experience.

Step 3: Copy & Paste the Embed Code Into Webflow

Now that you have customized your embed settings, it’s time to copy the provided embed code. Simply click on the “Copy” button next to the code snippet.

Open your Webflow project in a new tab and navigate to the page where you want to add Calendly. Click on an existing HTML element or add a new one where you want Calendly to appear.

Note: If you want Calendly to be displayed as a pop-up widget or text link, choose an appropriate element like a button or text link. If you want it to be displayed inline, choose a container element like a div.

Step 4: Paste the Embed Code

In your Webflow project, locate the selected HTML element and click on it to reveal the settings panel. Look for the “Custom Code” option and paste the Calendly embed code into the appropriate field.

Note: If you are pasting the code into a button or text link, make sure to wrap the code with an anchor tag () and set its href attribute to “#” to avoid page reloads.