12 Days of Calendly, Day 8: Adding Calendly to Your Website

9 months ago
11 December 2023
0 replies
307 views

🎼On the eighth day of Calendly, my community gave to me: Calendly on my website, wow-WEE!!🎼

Welcome to the 12 Days of Calendly, a series of guideposts where we give you the gift of product knowledge and understanding!

Happy Monday Cal Pals! If you’re like me, you’re still turning the handle of the wind-up-toy that powers your brain for the week, especially this close to the end of the year. I thought I’d start the week off with something on the simpler side that will still have a massive impact on your business. Listen– I’m all about working smarter, not harder!

Before I dive in, here’s what happened over the weekend:

Day 6: Creating a Collective Event in a Team Page

Day 7: Managing Your Branding with Multiple Businesses

Alright, alright, I won’t keep you on the edge of your seat (as if the title of the article doesn’t give it away 🤪). Let’s dive into adding Calendly to your website, or “embedding”, for scheduling efficiency only matched by the big man in red himself 🎅.

What is “embedding”?

To put it simply, when we “embed”, we’re inserting code from one website into another.

Think of your website as a garden 💐 and think of the embed as a new rosebush that you want to plant in your garden.

Just like there are different ways you can incorporate the rosebush in your garden (eg. directly in the ground, in a pot, in a hanging planter), there are different ways you can embed Calendly on your website.

(This isn’t a ✨perfect✨ analogy, but I hope it helps!)

Calendly’s Embed Options

Feel free to expand each section below to learn more about our available embed options.

🎁 Inline Embed

An inline embed is great for if you wish to seamlessly incorporate Calendly with your website, allowing invitees to view options without clicking a call-to-action prompt.

To view an example of an inline embed, feel free to take a look here.

🎁 Popup Widget

This option allows you to anchor a call-to-action button that displays your embedded Calendly link when clicked. This is a great option for those with limited space, or for those looking to achieve a minimalist look.

To view an example of a popup widget embed, feel free to take a look here.

🎁 Popup Text

If you would like stationary clickable text to trigger the display of your embedded Calendly link, this sounds like the option for you!

To view an example of a popup text embed, feel free to take a look here.

How to Create an Embed?

Now that you know which embed type you wish to use, you’ll want to grab your embed code. Feel free to expand the option you prefer below for step by step instructions on how to generate and copy the appropriate embed code.

🔗 Embedding a Specific Event Type

Click “Share”, either from the home-page or event type settings page.
Select “Add to Website”.
Select your preferred embed type and click “Continue”. For this demo, I’m going to be working with an “Inline Embed”.
If on a paid plan, you can customize the colors of your embed, or simply click “Copy Code”

⛓️ Embedding a Landing Page

From your (team) landing page, click the settings gear and select “</> Add to Website”
Select your preferred embed type and click “Continue”. For this demo, I’m going to be working with an “Inline Embed”.
If on a paid plan, you can customize the colors of your embed, or simply click “Copy Code”

What Do I Do With My Copied Embed Code?

How you add the HTML code to your site will differ from web provider to web provider. Generally speaking though, if your web provider offers an HTML editor, that’s usually the place to go.

Our Help Center offers a few great articles that walk you through adding embed code to some of the more commonly used web providers. I’ve linked these below:

~That’s a wrap~ on the eighth of ⭐12 Days of Calendly!⭐ We look forward to seeing you again tomorrow, where Kelsi will go into detail on the topic: Calendly Routing for Individuals. Check back in for that and more through December 15th! ❄