đź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:
Â
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! â
Â
Related Help Center and Community Articles
Embed Not Displaying Correctly
How do I customize the branding on my Calendly booking page and turn off Calendly branding?
Â
Â
Â
