Finish Calendly Website Integration in 6 Steps for Site Owners

Use Calendly’s inline embed when you want booking built into a specific page, and use the pop-up widget when you want a “book now” button available sitewide. Both are available on Calendly’s free plan and higher tiers. Start by grabbing the embed code from your Calendly account, then paste it into your page editor or HTML block, and test it before you publish.

---

TL;DR:

• Inline embeds typically generate the highest conversion rates when booking is the primary goal of the page, while pop-up widgets are better for sitewide accessibility without layout disruption.
• Properly placing the embed code varies by platform, with common issues caused by pasting code in incorrect sections or failing to republish after updates.
• Advanced developers can leverage Calendly’s JavaScript API to prefill fields, customize placement, and trigger events like CRM updates upon booking.
• Ensuring compliance involves delaying script loading until cookie consent is obtained, and verifying accessibility features for screen readers and keyboard navigation.
• To maintain calendar accuracy and avoid double bookings, sync Calendly with Google Calendar or Outlook, and confirm calendar availability matches your actual working hours.

---

Table of Contents

• Which Calendly embed type fits your page
• How to get your Calendly embed code and install it
• Platform-specific steps for common website builders
• Advanced embed options for developers
• Consent, accessibility, and common display fixes
• How our team deploys Calendly embeds at scale
• Keeping your calendar and CRM in sync
• Getting more bookings out of your Calendly embed
• Security and data protection when embedding Calendly
• What actually matters once you move past the basics
• Build the page and the booking flow together with WebsitePublisher.ai
• Useful references for Calendly embeds
• FAQ

Which Calendly embed type fits your page

Calendly gives you three ways to put a scheduler on your site, and each one solves a different problem.

• Inline embed: the calendar loads directly on the page, like a permanent fixture. Good for a dedicated booking page or a service page where scheduling is the main action.
• Pop-up widget: a floating button or tab that opens the calendar in an overlay. Good for a sitewide CTA you want visible on every page without taking up layout space.
• Pop-up text: a plain text link or button that opens the calendar when clicked. Good for inline mentions, like “schedule a call” inside a paragraph or email signature.

Pick based on how much real estate you want to give scheduling and whether you need it on one page or every page. Inline embeds usually convert best when booking is the point of the page, while pop-up widgets work well when scheduling is a secondary action you still want accessible. Visual customization, like color matching and hiding certain fields, is available on all three types, though some advanced styling and banner controls are tied to specific Calendly plans, according to Calendly’s embed documentation.

How to get your Calendly embed code and install it

Getting the basic embed live takes a few minutes once you know where to click.

1. Decide whether you’re embedding a single event type (like “30 Minute Consult”) or a full landing page with multiple event types, since this changes which link you copy in Calendly.
2. In Calendly, open the event or page you want to embed, click the three dots menu, and select “Add to website.”
3. Choose your embed type (inline, pop-up widget, or pop-up text), following the flow Calendly documents in its how to add Calendly to your website guide.
4. Click “Copy code” to copy the generated HTML snippet.
5. Paste the snippet into your site’s HTML, a custom code block, or your theme’s footer, depending on your platform and whether you want the embed on one page or every page.
6. Publish or preview the page, then confirm the calendar loads, shows your correct time zone, and syncs with your actual availability before sending traffic to it.

That test step matters more than it sounds. A surprising number of broken embeds aren’t code errors, they’re pages that were never republished after the snippet was added.

Platform-specific steps for common website builders

Each builder handles embed code a little differently, and most install problems trace back to pasting the code in the wrong place.

• Wix: Add an Embed Code element from the “Embed & Social” menu, then paste your inline or pop-up text code into it. A sitewide pop-up widget on Wix often requires editing site-wide settings, and Calendly’s Wix-specific guide notes that some placements depend on your Wix plan.
• WordPress.org: Paste the inline code into a Custom HTML block on the page, or add the pop-up widget snippet to your theme’s footer file so it shows on every page. If you’re using Elementor, use the Shortcode widget to hold the embed code.
• WordPress.com: Business and higher plans support custom HTML and JavaScript; lower tiers may block script embeds, so check your plan before troubleshooting the code itself.
• Shopify: Create a snippet file with the embed code and include it in theme.liquid for a sitewide widget, or drop it into a Custom Liquid section for a single page. If the calendar looks cut off, increasing the iframe height usually fixes it.
• Webflow: Use the Embed element for a page-specific booking calendar, or paste the widget code into the site’s “Before </body> tag” section under Custom Code for a sitewide CTA. Always publish before testing, since Webflow’s preview mode doesn’t render embeds the same way.
• Squarespace: Add a Code Block wherever you want an inline calendar, or paste the pop-up widget snippet into the Footer injection area for a sitewide popup.

Across all five platforms, the most common failure points are theme CSS overriding the iframe, scripts blocked by plan restrictions, or a popup that won’t close due to a conflicting style rule. Calendly’s embed options help page covers fixes for these display issues in more depth.

Advanced embed options for developers

If you’re building a single-page app or need the embed to do more than just display, Calendly’s JavaScript API gives you that control. The Calendly.initInlineWidget method, documented in Calendly’s advanced embed guide for developers, lets you load the widget programmatically, prefill invitee details, and decide exactly when and where it mounts.

• Use the advanced JS embed when you need prefilled fields, conditional loading, or placement inside a dynamically rendered component.
• Pass UTM parameters either by appending them to the embed URL or through the JS init’s UTM object, which Calendly’s UTM tracking guide recommends over maintaining separate embed codes per campaign source.
• Listen for events like event_scheduled using window.postMessage to trigger a CRM update or fire an analytics event the moment someone books.
• For single-page app frameworks, set a dedicated parentElement and call the init function only once per component render, since repeated calls create duplicate widgets, a detail covered in Calendly’s Angular embed guide.

Pro Tip: If your site uses client-side routing, initialize the widget inside a lifecycle hook that fires once per mount, not on every re-render, or you’ll end up with stacked calendars on the same page.

Consent, accessibility, and common display fixes

A working embed still needs to respect your visitors and your legal obligations.

• Calendly embeds show a cookie consent banner by default. You can hide it with a parameter, but Calendly’s own cookie management guide is clear that hiding the banner doesn’t remove your responsibility to comply with GDPR or CCPA, so delay loading the script until a visitor accepts cookies where law requires it.
• For pop-up widgets, make sure the trigger button has clear CTA text, keyboard focus works, and screen readers can announce the overlay when it opens.
• Common fixes include adjusting iframe height when the calendar looks cropped, overriding conflicting CSS when a popup’s close button doesn’t respond, and checking for duplicate script tags that spawn two widgets on one page.

Platform-specific quirks like theme CSS and iframe sandboxing are the most frequent cause of broken embeds, and reviewing browser console errors on a published page usually finds the issue quickly.

Before launch, run through booking flow, calendar sync, UTM capture, and mobile layout on an actual phone, not just a resized browser window.

How our team deploys Calendly embeds at scale

Across customer projects, the pattern that works best is simple: inline embeds on dedicated booking pages, pop-up widgets for sitewide CTAs. That split maximizes conversions without cluttering layout. Reusable, integration-friendly components make this faster to repeat across many pages without rebuilding the embed each time.

Keeping your calendar and CRM in sync

An embed only solves half the problem if your calendar and your customer records don’t talk to each other. Calendly syncs with Google Calendar, Outlook, and Office 365 to check availability and avoid double bookings, which matters more once you have multiple embeds live across different pages pulling from the same event type.

For teams running CRM workflows, the advanced JS embed’s event listeners are the practical bridge: a event_scheduled message fired via window.postMessage can trigger a lead creation or update in your CRM the moment someone books, instead of relying on a nightly sync job. This removes the lag between a booking happening and your sales or support team seeing it.

If you’re managing bookings across multiple pages or event types, a useful outside reference on calendar sync for bookings walks through common double-booking pitfalls and how calendar sync settings prevent them. The core idea holds regardless of platform: your embed is only as reliable as the calendar it reads from, so confirm your connected calendar’s availability settings match your actual working hours before you rely on the embed in production.

Getting more bookings out of your Calendly embed

A working embed and a converting embed aren’t the same thing. A few adjustments tend to move the needle more than others.

Placement matters first. An inline calendar buried below a long page of copy gets fewer bookings than one placed right after your value proposition, before the reader has to scroll past objections. Pop-up widgets work best when the trigger text is specific, something like “Book a 15-minute call” rather than a generic “Contact us.”

Reducing friction in the booking form itself helps too. Every extra required field is a chance for someone to abandon before confirming. If you’re running paid traffic, pulling UTM parameters into the embed, as covered in Calendly’s UTM tracking guide, lets you see which channels actually produce booked calls instead of just clicks.

Finally, test on mobile specifically. A sizable share of booking traffic arrives from phones, and an inline embed that looks fine on desktop can get cut off or require awkward scrolling on a smaller screen. Adjusting iframe height and confirming the pop-up widget’s trigger button is easy to tap are small fixes with outsized effect on completed bookings.

Security and data protection when embedding Calendly

Embedding a third-party scheduler means a small piece of someone else’s code runs on your site, so a few precautions are worth building into your process.

Only copy embed code directly from your own Calendly account rather than from a shared snippet elsewhere, since the code is tied to your specific event and calendar. Keep your Calendly account’s two-factor authentication turned on, since that account controls what data the embed collects and where booking notifications go.

If you’re using the advanced JavaScript embed with event listeners, validate any data coming through window.postMessage before passing it into your CRM or analytics tools, rather than trusting it blindly. This matters more on sites where multiple scripts are listening for messages, since a malformed or spoofed message could otherwise trigger unintended actions.

On the consent side, treat the Calendly script the same as any other third-party tracking tool: delay its load until a visitor accepts cookies where required, as Calendly’s own cookie banner guidance recommends, rather than assuming the built-in banner covers your compliance obligations. For teams building on frameworks like Bubble, documentation on version control and deployment practices is a useful reference for keeping embedded third-party code stable across updates.

What actually matters once you move past the basics

Most Calendly integration guides spend their effort on getting the iframe to show up, and that part is genuinely simple. The harder, less discussed problem is what happens after someone books: whether that event reaches your CRM, whether your analytics attribute it to the right campaign, and whether your calendar sync is solid enough that you never double-book.

Conventional advice tends to treat the embed as the finish line. We’d argue it’s the starting point. A pop-up widget that converts beautifully but feeds a CRM nobody checks isn’t actually solving the scheduling problem, it’s just moving it downstream. If you’re only going to get one thing right, make it the event listener and UTM setup covered earlier, not the visual styling of the calendar itself.

The second place conventional advice falls short is treating all five major platforms as interchangeable. They aren’t. A sitewide pop-up widget is a two-minute job on Webflow and a plan-dependent headache on some Wix and WordPress.com tiers. Check your platform’s actual limits before you promise a client or your own team a sitewide CTA.

Build the page and the booking flow together with WebsitePublisher.ai

Our platform supports adding third-party embeds like Calendly directly into pages built with conversational AI, using components that simplify integration without separate plugin setup.

• Describe the booking page you want, then paste your Calendly embed code into the generated page.
• Reuse the same booking component across multiple landing pages without rebuilding it each time.
• Keep editing content and layout in your browser after the page is live, without losing the embed.

Check pricing to see which plan fits your booking page needs.

Useful references for Calendly embeds

For edge cases beyond this guide, Calendly’s own help pages on adding Calendly to your website and embed options cover platform updates as they roll out.

FAQ

What are the disadvantages of Calendly?

Calendly’s embed customization can be limited on lower-tier plans, and some advanced styling or banner controls require a paid upgrade. Site owners also need to handle consent and cookie compliance themselves, since Calendly’s built-in banner doesn’t remove that responsibility.

Is there a better option than Calendly?

Several scheduling tools exist, and the right fit depends on your CRM, pricing needs, and how deep you need developer-level customization. Calendly remains widely used for its straightforward embed options and broad calendar sync support.

Does Wix have a Calendly integration?

Yes, Wix supports adding Calendly through an Embed Code element where you paste the inline or pop-up text snippet. A sitewide pop-up widget placement can depend on your specific Wix plan.

What are some common issues with Calendly embeds?

The most frequent problems are iframes that appear cut off, popups that won’t close due to conflicting CSS, and duplicate widgets caused by the embed script loading more than once. Most of these trace back to theme styling or a page that wasn’t republished after the code was added, according to Calendly’s embed options guide.

Recommended

• Build Websites with Claude
• React on WebsitePublisher.ai — Deploy React Landing Pages by Conversation
• AI Website Builder — Build Websites With ChatGPT, Claude & More