If you're looking to streamline scheduling for your business, Calendly is an excellent tool that allows clients or users to book meetings with you based on your availability. Integrating Calendly into your Webflow project is a quick and easy way to enhance your website's functionality, especially if you rely on appointments for consultations, demos, or client meetings. In this blog, I’ll walk you through the steps to embed Calendly into your Webflow site and provide images to help guide you along the way.
Step 1: Sign Up for a Calendly Account
Before you can integrate Calendly with Webflow, you’ll need a Calendly account. If you don’t already have one, visit Calendly’s website and sign up for a free or paid plan depending on your needs.
Head over to Calendly’s home page.
Click the Sign Up button and complete the registration process.
Once you’re in, set up your event types (e.g., 15-minute consultation, 30-minute demo) and availability.
Calendly website whre you can sign up
Step 2: Generate Your Embed Code
Once your account is set up and your availability is configured, you can easily embed a Calendly scheduling widget on your Webflow site.
Log in to your Calendly account and go to the Event Types section.
Select the event you want to embed or create a new event if needed.
In the event settings, click on Share (usually located in the top right corner of your dashboard).
In the sharing options, select Add to Website.
You’ll be prompted with three embedding options:
Inline Embed: Embed the calendar directly on a specific section of your site.
Popup Widget: A floating button will open Calendly in a pop-up window.
Popup Text: A clickable text link will open the calendar in a popup.
Choose the option that best suits your website design. In this example, let’s go with Inline Embed.
Copy the generated HTML embed code.
Select Event types
Create New Event Type
Choose the right Event type, based on your needs
Style your calendly window
Share your calendly event
Add to website
Copy generated code
Step 3: Add Calendly to Your Webflow Project
Now that you have your Calendly embed code, it’s time to insert it into your Webflow project.
Open Your Webflow Project:
Log in to your Webflow dashboard and open the project where you want to add Calendly.
Navigate to the Page or Section:
Choose the page and section where you want to display your Calendly booking form. If you’re embedding it in a contact or booking page, navigate to that area.
Add an Embed Element:
In Webflow, click on the Add Elements (+) button on the left-hand panel.
Scroll down to find the Embed component under the Components section.
Drag and drop the Embed block to the location where you want to display Calendly on your page.
Paste the Calendly Code:
Inside the embed block, paste the Calendly embed code you copied earlier.
Once you've added the embed code, hit Save & Close and then Publish your Webflow project.
Step 4: Customize the Calendly Widget (Optional)Calendly’s default embed widget should work just fine, but if you want more control over its appearance, you can customize its size and styling.For example, you can modify the inline styles like width and height directly in the embed code to fit your site’s design better:
Once you've added the embed code, hit Save & Close and then Publish your Webflow project.
If you’re comfortable with CSS, you can also apply custom styles to control the widget's placement and spacing within your Webflow design.
Step 5: Test the Integration
Before wrapping up, make sure everything works smoothly. Preview your Webflow site and navigate to the page where Calendly is embedded. Test the booking flow by selecting a time and confirming that it successfully registers on Calendly.
Benefits of Using Calendly on Your Website
24/7 Scheduling: With Calendly, your clients or customers can book appointments anytime, even outside your business hours.
Seamless User Experience: Embedding Calendly directly on your site removes the need for back-and-forth emails and provides a streamlined user experience.
Automated Reminders: Calendly sends automatic confirmation emails and reminders, reducing the risk of no-shows.
Integrations: Calendly integrates with Google Calendar, Zoom, and other tools, making it a powerful asset for remote meetings or consultations.
Conclusion
By integrating Calendly into your Webflow project, you simplify the scheduling process for both you and your clients. Whether you're running a consultation service, offering demos, or managing appointments, Calendly can streamline your workflow and save you time. Plus, Webflow’s no-code approach makes embedding tools like Calendly incredibly easy.
If you're looking to take your Webflow site to the next level, embedding useful tools like Calendly is a great step forward.
.svg){kind=small}
