Table of Contents
Table of Contents
Embedding Calendly on your site is a great way to capture time with your visitors — whether they’re prospects, customers, candidates, students or others — when they’re most interested in what you have to offer, without directing them away from your most valuable content.
For example, Virtru uses Calendly to help its sales team keep up with a high volume of leads that come through its website. Once a prospect clicks on the “Request a demo” CTA and signs up, they are directed to a “thank you” page that gives them the opportunity to schedule immediately. The result? Virtru doubled demos scheduled among interested leads — from 30% to 61% — within the first month of using Calendly.
The best part? Website embeds are free with all Calendly subscriptions, so anyone can use them right away. Read on and learn how to get started.
3 ways to embed Calendly seamlessly on your website
There are three easy ways to embed Calendly in your website:
1. Inline embed
To make your appointment scheduling easily accessible, use the inline embed option. This embed places Calendly inline seamlessly within the body of a web page, giving customers and prospects direct access to your availability.
Whether you want to show a single Event Type page or several Calendly events within a landing page, scheduling automation becomes an integrated experience within your website.
2. Pop-up widget
A pop-up widget keeps your scheduling options a click away no matter where a visitor is on your site. The widget makes a call-to-action button hover in a corner of your site. You can customize the button with messages such as “book a demo” or “schedule time with me.” When clicked, it opens Calendly in a pop-up window.
3. Pop-up text / call to action
If something more subtle is your speed, try adding a call to action in a site page’s body copy or in a button. Clicking either text option will open Calendly in a pop-up window.
Want to see what a Calendly embed looks like from your site visitor’s perspective? Visit our demo site to explore and try booking a meeting through any of the embed options above. (Note: Scheduling time via the demo site will add a fake meeting to your calendar so you can see the full experience. We recommend deleting that meeting when you’re through.)
Calendly embed codes make integration easy
With just a few steps, you can create a personalized Calendly embed code that adds Calendly functionality to your website. It starts with choosing the type of scheduling page you’d like to share.
Step 1: Choose a landing page
Embed a single Event Type page
If you want a simple booking solution on your website, it’s easy to share a single Event Type on your scheduling page.
On the Event Types tab on your Calendly homepage, choose which Event Type you want to embed and select “Share.” In the pop-up, select “Add to website.” Then, choose your preferred embed type.
Embed a landing page with multiple Event Types
As your scheduling needs grow more complex, you’ll want to provide more options for you and your visitors — for example, demo sessions for different products or meetings with different team members. When you want to offer multiple types of connections to customers, it’s best to embed a landing page with multiple Event Types. (In fact, their added automation and flexibility are why many Calendly users upgrade to a paid subscription.)
Go to the Event Types tab on the homepage of your Calendly account. Find the scheduling page you'd like to share. Then, under “Account,” select “Share your link” under the dropdown. Select “Add to your website” in the pop-up and choose the type of embed.
Step 2: Customize your embed
Once you’ve chosen your landing page type and embed method, you can customize your landing page's appearance. Calendly lets you change color and button text in the pop-up widget embed and the text shown in the pop-up text embed. If you have a paid subscription, you can also change the scheduling page’s button, text, and background color to align with your brand.
If you already describe the purpose of your Calendly embed elsewhere in the page, you may want to remove the duplicate information in your Event Type. It’s easy — just check the “Hide event details” box. This option hides your profile picture as well as the Event Type name, event duration, location, and description. You also have an option to hide the cookie notification banner on your embed.
3. Get the embed code
Once you’ve settled on the look and feel of your embed, select “Copy code” to grab the custom HTML. Paste the copied code into your site HTML editor, and you’re ready to go!
For more detailed information about using the Calendly embed code for specific platforms, visit our Help Center. You’ll find tutorials on using the Calendly embed code with platforms including Squarespace, Wordpress, Google sites, Weebly, Shopify, Wix, and Unbounce.
Schedule with invitees at the height of their interest
With just a few clicks, you can create an automated channel to immediately connect with high-interest website visitors, uncover new opportunities, and increase conversions. All it takes is adding a free Calendly embed code, and you have a great new tool to help grow your business.
Ready to use Calendly to make immediate connections with your website visitors? Sign up for free today.
Get started with Calendly
Ready to make your scheduling process more efficient?
Related Articles
Don't leave your prospects, customers, and candidates waiting
Calendly eliminates the scheduling back and forth and helps you hit goals faster. Get started in seconds.