Embed Options For Websites

What is a Web Embed?

A Calendar web embed is a piece of code (usually HTML/JavaScript) you copy from Calendar and paste into your website's code to display your booking schedule directly on your site, allowing visitors to book appointments without leaving. It integrates Calendar's functionality seamlessly, offering options like an inline calendar, a floating widget popup, or a text popup.

Steps To Add a Web Embed:

1. On your Scheduling Dashboard, find the Scheduling Event you want to use. Click the ellipse menu (...), then select 'Add to Website'.

2. Next, select the web embed type you want to use.
   1. Inline: Use an inline embed to display your booking calendar directly within the page content of your website. The calendar appears as part of the page layout, allowing visitors to view availability and schedule appointments without leaving the page.  Best for: Dedicated scheduling pages or high-intent landing pages.
   2. Popup Widget (Floating Button): A popup widget adds a floating call-to-action (CTA) button that stays visible as visitors browse your site. The button typically appears in a corner of the screen and can be customized with text such as “Book a Demo” or “Schedule Time With Our Team.” When clicked, the button opens your Calendar.com booking page in a pop-up window. Best for: Always-available scheduling access across your entire site.
   3. Popup Text or CTA Button (Inline Link): This option lets you add linked text or a button within your page content—such as in a paragraph, banner, or section CTA. When a visitor clicks the text or button, the Calendar.com booking page opens in a pop-up window.

3. In this example, I selected "Widget Popup".  Update the Button text and background color you want to use, then select "COPY HTML".

   

4. Paste the copied code into your site’s HTML editor where you want it to go, and you’re ready to share!

Check out the YouTube video tutorial.