How to Embed Calendly on Your Website: Inline, Pop-Up and Platform Guides

What an embed does, and what it costs

A Calendly embed puts your booking page inside your own website, so visitors book without ever leaving it. The embedded page reads your connected calendars and shows only your free times, and it sends confirmations exactly like any other Calendly booking. The embed itself is not a paid feature. Calendly's own guide says website embeds work on every plan, Free included, with no extra plugins ^[1]. What you pay for is styling and range. Custom colors are marked as a paid option, and a free account can embed one event type while paid accounts can embed any of them.

That makes the embed one of the most generous free features Calendly has. A solo consultant can put a working booking calendar on a website for $0, and only starts paying $120 a year on Standard once brand colors, a second event type or payments become necessary. In practice the embed is rarely the reason to buy a bigger plan. For the plan-by-plan detail, see our Calendly pricing guide.

Picking the right embed type

Calendly offers three standard ways to place the booking flow on a page: inline, pop-up widget and pop-up text. Its product page now lists forms as a fourth option, for routing. All of them run the same booking flow. The difference is where it appears and how much attention it takes from the rest of your page.

Inline, for a dedicated booking page

Inline places the booking page in the body of your page, so it reads as part of your site. It suits a contact or booking page with little else competing for attention. It needs enough height to avoid scroll bars and enough width for the full layout. Calendly's troubleshooting advice asks for 1,000 pixels or more for the side-by-side view of calendar and times, and says that below 650 pixels the layout stacks. A narrow content column will rarely get the side-by-side view.

Pop-ups, on every page or behind a link

The pop-up widget adds a floating button that opens your booking page in an overlay. By default it sits at the bottom of the page, aligned to the right corner. It suits a service business or a store, where any page might lead to a booking. It is always visible. Pop-up text turns a link or button in your copy into a trigger for the same overlay instead. It fits blog posts, pricing pages and calls to action where a full calendar would take too much room. Nothing loads until someone clicks, which makes it the least intrusive option of the three.

Forms, routing and team pages

Routing forms can be embedded inline, as a pop-up widget or as pop-up text, and the code comes from Scheduling, Routing forms, Share and Add to website. They are the best embed for inbound sales, because they ask qualifying questions first and then show the right rep's booking page. Routing forms need Teams. So do team pages and round robin event types, which show combined availability and assign each meeting to a host automatically. HubSpot, Marketo and Pardot forms can also route through Calendly without a separate embed.

Getting the code and setting the options

To get the code, open the three dots next to an event type or your landing page and choose Add to website. Pick the embed type, adjust the options and copy the code. You can embed a single event type or the landing page Calendly creates automatically, which lists all of a user's or team's active event types. Use one event type on a page with a single clear purpose, and the landing page where visitors need to choose between services. Generate the code only after your Calendly link is final.

Before copying, you can hide your photo, hide event details, remove the cookie banner and, on paid plans, customize colors. Hide Event Details works for both inline and pop-up embeds, and on existing embeds you can add hide_event_type_details=1 or hide_landing_page_details=1 to the link instead. Paid plans can change the background, text and button colors, plus the button label on the pop-up widget. The Schedule button's text switches to black or white automatically to suit the button color you pick, which also helps contrast and accessibility.

The cookie banner deserves a pause. Calendly shows it by default, and if you hide it you take on the job yourself: your site must make sure it "manages cookie laws like GDPR or CCPA" ^[2]. The widget's position is the other setting people forget. It defaults to the bottom right, and Calendly provides CSS to move it to the left or center. Move it if a chat widget or cookie notice already lives in that corner.

Pasting it into your site builder

WordPress and Elementor

WordPress.org gives you full access. For one page, add a Custom HTML block and paste the code. For a site-wide pop-up widget, paste it into the theme footer above the closing body tag; a site with 200 pages then gets 200 booking entry points from one paste. Test that against chat and cookie widgets. Some themes do not support JavaScript and may change how the embed looks. WordPress.com is stricter: embeds work only on plans that support custom plugins or HTML blocks, and on cheaper plans you link to Calendly from text or images. With Elementor, paste the full code into a Shortcode widget, and if an extra scroll bar appears, set overflow or overflow-y to hidden.

Wix and Squarespace

Wix supports both inline and pop-up embeds: add Embed Code from the Embed and Social menu, select Enter Code and paste. A pop-up widget, though, needs a paid Wix plan, a published site and a connected domain. Squarespace is the costlier case, because a Squarespace Business Plan is required to embed Calendly at all. Paste the code into a Code Block, and if it does not appear, add Calendly's script under Settings, Advanced, Code Injection. Squarespace 7.1 does not support JavaScript buttons, so pop-up text may not work there. For a small studio on a cheaper plan, a plain booking link may cost less than the upgrade.

Shopify, Google Sites and the rest

Shopify supports all three types. Inline and pop-up text go into a Custom Liquid section, a site-wide widget into theme.liquid after the head tag, and a CSS fix handles themes that stop the pop-up from closing. Google Sites embeds by URL, with no code: select the By URL tab and paste your Calendly link. Unbounce takes all three types through its Custom HTML element, though its themes may change how the embed looks. Webflow, Weebly, Joomla and HubSpot pages follow the general method: paste the code into an HTML or embed block, publish, then test on a phone.

When JavaScript is off limits: the iframe

If your platform does not allow JavaScript, you can still embed Calendly with a basic iframe. Give it a width of at least 320px for mobile devices and a height of at least 700px to avoid scroll bars. The iframe trades features for compatibility, and the trade is steep. It cannot prefill names or emails, track bookings, auto-resize, or hide profile pictures and the cookie banner. It suits simple booking with no tracking. A marketing team that needs to measure conversions should treat it as a temporary fix, not the permanent setup.

The advanced embed: prefill, resizing and events

The advanced JavaScript embed controls how and when Calendly appears, and it restores everything the iframe gives up. Include the parentElement option, or Calendly loads at the bottom of your page ^[3]. If visitors are already logged in, prefill their name and email so they do not type them again. For a product that knows its users, that tends to lift completion more than any color change. Calendly's developer recipes also prefill up to ten custom answers through URL parameters.

By default the embed has a fixed height, and longer content scrolls inside it. Auto-resize fixes that, with a firm limit: "Only use one auto-resizing embed per page to prevent layout problems". Avoid dropdowns in forms while it is on. The embed also sends events as people move through it, from profile viewed to event scheduled, through window.postMessage(). Use them to fire analytics events or show a thank-you message. A page resize event joined them in 2024.

Measuring which campaigns book

UTM parameters tell you which campaign produced a booking, and they work for every embed type: inline, pop-up text and pop-up widget. Each UTM value must stay under 255 characters. One embed can reuse the UTM values from the page URL, so a team running ten campaigns does not need ten embeds, and every booking still carries its source into exports and reports.

For analytics, connect one GA4 Measurement ID per organization. Calendly then tracks the same four steps inside the embed, from profile viewed to event scheduled. Without UTM tags, GA4 shows the source as direct, so tag your embedded links. Meta Pixel does the same job for Facebook ad visitors, from routing form visit to meeting scheduled; the Meta Pixel Helper extension verifies it, and Firefox may block pixels by default, so expect lower counts than real bookings. Inside Calendly, the Calendar page has a Filter with Tracking IDs where you enter a UTM code and export the matching bookings to CSV, with no analytics tool at all.

That last option matters more than it looks. Visitors from regions with strict privacy laws see a cookie banner in the embed, and if they reject cookies some activity is not tracked. When many European visitors say no, GA4 and Meta Pixel undercount, and the Tracking IDs filter becomes the more reliable count of which campaigns produced meetings.

Privacy, payments and video

Calendly's Customer Terms require you to tell visitors in your privacy policy that you use Calendly on your website, and they note that Calendly still uses cookies when its banner is hidden. Update the policy first. Paid event types work inside embeds: invitees pay through Stripe or PayPal during booking, the meeting is confirmed after payment, and payments need a paid plan. Video links work too. Zoom, Google Meet, Microsoft Teams, Webex and GoTo details are generated automatically once set as the location, and the confirmation email and invite carry the link. Test a paid booking on the live page before you announce it.

Fixing a broken embed

Start with weight. Embeds load Calendly's scripts and an iframe, so put the inline embed on a dedicated page rather than your home page, and use pop-up text on content pages. The rest of the usual problems have known fixes.

• Mobile layout. On phones, embeds stack vertically. Keep the container at least 320px wide and remove extra padding. Dropdowns can open off-screen, so use a shorter height or radio buttons. Pop-ups often fit mobile better.
• Scroll bars. If the embed exceeds its container, increase the height in the code; Shopify's guide uses 1,000 pixels as an example. Or use auto-resize, once per page.
• Ad blockers. Some extensions hide Calendly embeds. Add a message and a fallback button that opens the scheduling page in a new tab.
• A changed link. Old links do not redirect, so a refused-to-connect error usually means an old link. Regenerate the code. A site with embeds on 20 pages and links in 30 email templates needs 50 updates.
• A missing stylesheet. Common on HubSpot and Marketo pages. Add the stylesheet link Calendly provides, then reload.
• A page that will not scroll. Calendly suggests a CSS rule that resets the body overflow, with an extra rule for Squarespace ^[4]. Test several browsers afterward.

Embed, link or the API?

An embed keeps visitors on your site; a link sends them to Calendly. Links are simpler for email, social posts and plans that block HTML, and many sites use both: an inline embed on the contact page and links everywhere else. If you have no website at all, just share the booking page. Calendly can also put clickable time slots in the body of an email from Gmail and Outlook through its browser extension, which is not a website embed but shortens the path to a booking the same way.

The API is not a substitute. Calendly's help says it does not cover booking meetings or showing the full booking flow, and points visitors who want to book to an embed. The newer Scheduling API books from your own interface, but it needs a paid plan, developer time and custom handling of availability. Our Calendly API guide covers that route. For most websites the embed is the right answer.

Skip the embed if your platform blocks JavaScript and you need tracking, if your site is slow on mobile, or if sensitive data should not pass through a third-party booking page. A simple link or the iframe is safer there. Among rivals, Acuity can build a whole booking site with Squarespace or embed into an existing one, and Cal.com embeds routing forms and offers white labeling on higher plans. Calendly's embeds are simpler and work on Free, but custom domains and CSS are not part of them.

Testing before launch

A complete test takes about 15 minutes. Book through the embed on desktop and on a phone, once with an ad blocker on, and once as a paid booking if payments are enabled. Check the confirmation email, the calendar invite, the video link and the events in GA4 or Meta Pixel. Then delete the test meetings, as Calendly's own advice suggests. That is far cheaper than one lost booking.

• Embed type chosen for the page.
• Code generated after the final link is set.
• Event details and banner settings chosen.
• Colors matched, on paid plans.
• UTM parameters added.
• Privacy policy updated.
• Fallback link for ad blockers in place.
• Test booking done on desktop and mobile.

The bottom line

Calendly's embeds are easy, free on every plan and backed by guides for every major site builder. Use inline on booking pages and pop-ups elsewhere, add UTMs and analytics, and move to the advanced embed only when you need prefill or events. Regenerate the code after any link change. If inbound leads need qualifying, swap the plain event type for an embedded routing form on Teams, and add reminders through Calendly workflows.