In today's fast-paced world, efficiently scheduling appointments and securing prospects has become a necessity rather than a luxury. That's where integration tools like Calendly come in.
As a website builder and owner of Loudface, I've experienced the problem and subsequent solution firsthand.
Remember the days when scheduling a meeting was a back-and-forth hassle? Emails ping-ponging, trying to nail down a time that works for everyone. It was no different at Loudface.
Cut to now; our bookings page does all the heavy lifting. Clients pick a time that suits them and is on the calendar. No fuss, no hassle.
The only con with the default Calendly integration is that it messes up your site’s performance. No worries, I’ll help you optimize that too. Let’s get started.
- Setting Up Calendly: Create a Calendly account and sync it with your calendar (e.g., Google Calendar) for availability synchronization.
- Embedding Calendly: Choose between different embedding options in Calendly, like Inline Embed, Popup Widget, or Popup Text. Copy the respective code provided by Calendly.
- Optimization: Implement asynchronous loading and lazy loading.
1. How Do I Add Calendly Embed to Webflow?
1. Create a Calendly Account
First, go to Calendly.com and sign up for a free account. Add basic information to set up your account quickly.
You'll want to connect your account to a calendar (like Google or Office 365) so Calendly can access your availability. Make sure to configure your scheduling preferences, like appointment times, buffers between meetings, and notifications.
2. Generate Calendly Link
In Calendly, navigate to the “Integrate” section to get your unique Calendly link, which visitors will use to schedule with you. Customize the questions you want to ask those scheduling, like their name, email, or reason for the meeting.
3. Embed Calendly Code in Webflow
Head to Webflow and navigate to the page where you want the scheduling link. Add an Embed element and paste the Calendly embed code. This code creates a “Schedule a meeting” button that leads to your Calendly. After pasting, publish your changes.
If you’re unsure which embedding option to use, you can scroll down to Advance Embedding Options.
4. Customize the Calendly Experience
Calendly offers full customization to match your branding. You can adjust questions asked, meeting types, display themes, and emails to create a seamless scheduling experience.
Remember, you can change the text styling of the parent of your HTML embed (like any div block, section, or container) to affect the text styling of the HTML embed. This allows for greater design flexibility and consistent visual style on your site.
2. How to Optimize Calendly Embed Load Time on Webflow
Is your Calendly widget taking forever to load on your Webflow website? You're not alone. Slow load times can frustrate users and potentially cost you valuable conversions.
There are three ways to optimize calendly embed load time and performance issues on Webflow:
Remove the Calendly script tags so they load asynchronously when required instead of loading automatically. Additionally, we implement lazy loading for further improvement. Finally, we put the Calendly script towards the end of the page so the important elements can load first.
Step 1: Prerequisites: Gather What You Need to Get Started
Before diving into the optimization process, make sure you have the following:
- A basic understanding of HTML, JavaScript, and Webflow.
- Access to the Webflow project where the Calendly widget is embedded.
- An active Calendly account and event to embed.
And here are the tools that you’ll need:
- Webflow Editor
- Code Editor (optional)
- Browser Developer Tools
Step 2: Locate the Calendly Embed Code
First, find the existing Calendly embed code in your Webflow project. It should look something like this:
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/your-event" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->Step 3: Remove the Script Tag
Next, remove the <script> tag from the embed code. This will prevent the Calendly script from loading immediately, which is good for our optimization process.
Tip: Put the Calendly script towards the end of your page. That way, it’ll load last, so the user can still interact with other elements while your Calendly widget loads up. Don’t worry, it won’t affect the position of your widget.
Step 4: Implement Lazy Loading
Now, let's add a lazy loading script. This JavaScript code will load the Calendly script only when the user is about to view the widget. Add the following code to your Webflow project's custom code section:
document.addEventListener("DOMContentLoaded", function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const script = document.createElement("script");
script.src = "https://assets.calendly.com/assets/external/widget.js";
script.async = true;
document.body.appendChild(script);
observer.disconnect();
}
});
});
const calendlyDiv = document.querySelector(".calendly-inline-widget");
observer.observe(calendlyDiv);
});Troubleshooting Tips
Widget Not Loading: Ensure the lazy loading JavaScript code is correctly placed in the Webflow custom code section.
Script Errors: Check the browser console for errors and resolve them accordingly.
Step 5: Test the Changes
After implementing the changes, it's time to test:
- Save and publish your Webflow site.
- Open the live site and inspect network activity using browser developer tools.
- Scroll down to where the Calendly widget should appear.
- Confirm that the Calendly script only loads when you're about to view the widget.
Step 6: Document Your Changes
Last but not least, document the changes you've made. This will help you or anyone else who works on the project in the future.
3. Advance Embedding Options in Calendly
I reserved this for the list even though embedding options are a part of step 3. With Calendly, you basically have four embedding options. Let’s go through each of them so you can make the best decision.
Here’s a quick comparison:
| Feature | Direct Link | Inline Embed | Popup Widget | Popup Text |
|---|---|---|---|---|
| Integration | Simple hyperlink to Calendly page | Embedded directly into the page content | Appears as a popup on the page | Triggered as a popup through a text link |
| Pros | Simple setup, no impact on the user, page layout, or design | Seamless look and feel, direct access to scheduling | Space-efficient Engaging, immediate visibility | Minimalist and unobtrusive, customizable CTA |
| Cons | Redirects users away from your site | Takes up real estate on the page | Can be seen as intrusive | Requires user interaction for the popup |
| Ideal Use Case | Anywhere a simple, no-frills scheduling link is needed | Service pages for direct booking | Landing pages or high-traffic areas | Content pages where scheduling is secondary |
| Customization | None | Moderate (some level of styling to match site design) | Moderate (customizable but within the popup format constraints) | High (customizable text and CTA) |
Direct Link
This is simply using the unique URL provided by Calendly and linking it directly from your website. This can be done by creating a standard hyperlink on your Webflow site that points to your Calendly scheduling page.
Pro Advice: Direct Link is an ideal choice when you want the simplest form of integration. It's perfect for visitors just needing a quick way to access your Calendly without embedding anything into your Webflow site.
Inline Embed
Inline Embed is ideal for service pages where you want clients to book appointments directly without navigating away from the page. It offers a seamless and cohesive user experience with easy access to prospective clients.
On the downside, it has limited optimization because the styling isn’t as flexible as a full page or popup. It also takes up a good amount of real estate on the page, so it can be difficult to naturally integrate inline embedding in the design language.
How to Integrate:
- Select your event type and choose "Inline Embed."
- Click "Continue" and then "Copy Code."
- In Webflow, add an Embed element using CMD/CTRL+E or dragging it from the Add panel.
- Paste the copied code into the Embed element and save your changes.
Popup Widget
Popup widgets are suitable for landing pages or attracting immediate attention when booking an appointment. It saves real estate on the page because it doesn’t take up permanent space. And it quickly grabs the attention of your visitor.
On the flip side, it interrupts your visitor, which can be disruptive if not placed and timed properly. Additionally, mobile responsiveness can sometimes be iffy due to rendering issues.
How to Integrate:
- In Calendly, choose "Popup Widget" for your event type.
- Continue and copy the code.
- In Webflow, go to your page settings and add the code in the "Before </body> tag" section.
- Save and publish your changes.
Popup Text
Popup text is suitable for blog posts or informational pages where you want to offer scheduling options without overwhelming the content.
It is rather minimalistic and less “annoying” compared to popup widgets. Although it might not grab user’s attention as effectively due to lower visibility.
How to Integrate:
- Select "Popup Text" option in Calendly.
- Click "Copy Code" after customizing your text.
- In Webflow, add an Embed element where you want the Calendly link.
- Paste the code into the Embed element and save your changes.
4. Calendly Alternatives for Webflow (vs. Google Calendar)
If you’re unfamiliar with Calendly and are confused about the choice, let’s give you a quick overview.
Calendly is an appointment-scheduling software that streamlines the process of setting up meetings. Its key features include automated event scheduling, customizable event types, and seamless integration with personal calendars.
Calendly is efficient and time-saving thanks to the automation available. It provides a much more enhanced visitor experience by allowing users to book directly from your Webflow site. And it just looks better.
On the other hand, Google Calendar is a widely used calendar service that allows for event tracking and scheduling. Its integration into Webflow would typically involve embedding or linking to a Google Calendar.
Google’s Calendar is by no means a slouch, but it’s not suited for a business. Here’s a quick comparison:
