Calendly Website Integration: Embed, Track, Convert

Calendly Website Integration: Embed, Track, Convert

To integrate Calendly with your website, copy the embed code from the three-dot menu next to your event type, choose inline, pop-up widget or pop-up text, and paste it into your site builder. That takes minutes. The part that decides whether it makes you money is what comes after: picking the format that fits the page, making it work on a phone, and measuring every booking.

This guide covers all three. It is written for small business owners who want booked calls, not just a pretty scheduling link.

Summitstudio

Turn More Website Visits Into Bookings

Summit Studio continually optimizes small business websites for SEO and conversion, with tailored reports that track growth outcomes.

Explore Summit Studio

TL;DR

• Embedding is a two-minute job: choose the page or event type, pick an embed style, copy the code, paste it into your site builder.
• Use the inline embed on high-intent pages such as service requests and quotes. Use pop-up options for blog posts and secondary pages.
• Remove Calendly branding and match your colors on a paid plan. The free tier is limited to one event type.
• The widget runs in an iframe, so normal click tracking fails. Connect GA4 and, for ads, import the booking event as a key event.
• Test on a real phone. A fixed-height widget can create a second scrollbar and cost you bookings.

Table of Contents

• How to add Calendly to your website
• Inline, pop-up widget or pop-up text: which to use
• Branding, plans and what the free tier can’t do
• Fix the mobile scrolling problem before you launch
• Calendly conversion tracking: GA4, UTMs and Google Ads
• What we’d do for a small service business
• Common mistakes that cost bookings
• When Calendly alone is not enough
• Launch checklist
• FAQ
• Sources

How to add Calendly to your website

Calendly’s own instructions are short. According to the Calendly help article on adding Calendly to your website, you choose what to embed, copy the code, then select your website provider. Here is the practical version.

1. 01Choose what to embed. You can show a landing page (all of your active event types) or a single event type. For a service business with one clear next step, such as a 20-minute estimate call, a single event type is almost always better. A menu of options adds a decision before the visitor has even chosen a time.
2. 02Open the share menu. Select the three dots next to the event type, then Add to website.
3. 03Pick an embed style. Inline, pop-up widget, or pop-up text (more on these below).
4. 04Copy the code and choose your platform. Calendly has separate walkthroughs for builders, including a WordPress guide path that covers WordPress.org, WordPress.com and Elementor.
5. 05Paste it into an HTML or embed block on the page where you want it, publish, and test.

If you cannot paste code at all, a plain scheduling link on a button still works. It just sends visitors off your site, which usually hurts both trust and your ability to measure the visit.

Inline, pop-up widget or pop-up text: which to use

As of September 2026, Calendly offers three embed types: inline (the scheduler sits directly in the page), pop-up widget (a floating button), and pop-up text (a clickable text link that opens the scheduler over the page).

One review of Calendly for lead generation argues that the inline embed tends to convert better on high-intent pages, because the visitor never leaves the session and there is no pop-up to be blocked or dismissed. That matches what we see in practice for service businesses: on a page titled “Request a repair” or “Get a quote”, put the calendar on the page.

Format is a friction decision, much like the visual choices in why visuals convert: every extra step or unexpected element between a visitor and the action costs you some of them. Use the pop-up widget where the visitor is still reading, and the inline embed where the visitor is ready.

A simple placement rule

• Page whose only job is to book: inline, above the fold or right under a one-line promise.
• Service page with a long explanation: a button near the top that scrolls to an inline embed at the bottom, plus a pop-up text link in the body.
• Content page: pop-up text in the closing paragraph. Skip the floating badge unless you have tested it.

If you want ideas for how a booking block can look on a finished page, our booking widget showcase and CTA section designs show real layouts.

Branding, plans and what the free tier can’t do

You can start free. The free tier is limited to one event type and one calendar connection, and paid plans start at $12 per user per month (Standard, month-to-month), according to the same review. Pricing changes, so check Calendly’s page before you buy.

For a business website, the more important difference is appearance. Calendly branding removal and color customization are restricted to paid plans, and that third-party look can make clients feel they have been handed off to another service. If the scheduler sits on a page you are paying to send traffic to, the Standard plan is a small cost against a cleaner, on-brand experience.

Integrations matter too. Calendly connects to calendars such as Google Calendar and Outlook, video tools like Zoom, and CRMs and automation tools, including Salesforce, HubSpot and Zapier, per the same plan review. If your leads should land in a CRM the moment they book, see our HubSpot website integration guide for how to decide what connects to what.

Fix the mobile scrolling problem before you launch

This is the most common failure we see on small business sites built in Wix, Squarespace or Webflow. The inline widget has a fixed minimum height, typically around 700px. Without the advanced JavaScript embed that enables auto-resizing, phone users can end up with a scrollbar inside a scrollbar, which is exactly the kind of friction that kills a booking.

A checklist:

• Use the JavaScript embed code, not a bare iframe, and enable the resize option described in Calendly’s developer embed documentation.
• Give the embed block its own full-width section with no fixed-height container around it.
• Test on an actual iPhone and an actual Android phone, not just a browser window resized narrow.
• Book a test appointment end to end, including the confirmation screen.
• Check that a sticky header or chat bubble does not cover the time slots.

Calendly conversion tracking: GA4, UTMs and Google Ads

An embedded scheduler is only worth keeping if you know which pages and campaigns produce bookings. There are three layers, from simplest to most complete.

Layer 1: UTM parameters on your links

Calendly’s tracking and reporting help page says you can track conversions with Google Analytics, Meta Pixel, or by redirecting invitees to an external page after they book, and that UTM parameters on scheduling links help you see where meetings come from. Use a distinct source and campaign for each button, email and ad, so a booking can be traced back to a placement.

Layer 2: the native GA4 integration

Calendly’s Google Analytics help article explains that you connect a single GA4 Measurement ID to your Calendly organization. It then reports scheduling events, including invitee_select_time and invitee_meeting_scheduled. Allow 24 to 48 hours before they fully appear in standard reports. Universal Analytics is no longer supported (it ended in July 2023), so GA4 is the only route. The integration page lists the plans it is available on, so confirm yours qualifies. Setup is limited to owners and admins.

Once events arrive, mark invitee_meeting_scheduled as a key event in GA4. That turns a booking into a conversion you can report on.

Layer 3: the iframe problem and postMessage

Because the widget loads in an iframe, your page’s JavaScript cannot see clicks inside it. Standard click listeners on your page will not work. Calendly’s developer documentation says to use the window.postMessage API to catch booking events as they cross the iframe boundary. This is how you fire a Meta Pixel event, a Google Tag Manager trigger or a thank-you-page redirect when someone books. If that sounds like developer work, it is, and it is worth doing once.

Getting bookings into Google Ads

Calendly has no direct Google Ads integration. Calendly’s own guidance describes the workaround: connect GA4 to Google Ads, mark scheduling as a key event, and import it. Your campaigns can then optimize toward real bookings instead of clicks. Allow a few days for the first data, and judge campaigns on cost per booked call, not cost per click.

What we’d do for a small service business

Our perspective

Most scheduling problems we see are not Calendly problems. They are page problems. A business pastes a link on the contact page, gets a few bookings, and never learns whether the page, the ad or the headline did the work.

We treat the booking widget as one part of a conversion system. It needs a page worth landing on, a format that fits the visitor’s intent, a mobile test, and a tracking setup that survives the iframe. Then it needs ongoing attention: which page sends people to the calendar, where they drop off, what to change next month. That is why our memberships are built around continuous optimization rather than a one-time site handoff, with a single accountable team and AI-powered work supervised by human strategists.

For trades and local services, the rule we repeat is simple: put the next step where the intent is. Our HVAC lead generation playbook and our piece on what makes a paid-traffic landing page convert go deeper on that. Measurement is a theme we return to often, and you can browse it in our Leads & Measurement insights.

— John

Common mistakes that cost bookings

• Showing every event type. A landing-page embed with six options makes visitors choose before they commit. Embed the one event you want booked.
• Offering too many time slots with no buffer. If the calendar looks empty or random, people leave. Set sensible hours and minimum notice.
• Burying the calendar. An inline embed at the bottom of a long page gets few views. Add a button near the top that jumps to it.
• Skipping the confirmation redirect. A thank-you page is the simplest conversion signal for ads and for analytics, and it lets you tell the visitor what happens next.
• Never testing after a site update. Theme updates, new chat widgets and cookie banners can break the embed or cover it. Re-test monthly.
• Free-tier branding on a paid campaign. If you are buying traffic, the branded look is a poor use of it.

When Calendly alone is not enough

Calendly handles the scheduling itself. It does not write your service pages, rank them, answer visitors’ questions at 9 p.m., or decide which page should carry the calendar. If your problem is that too few of the right people reach the booking step, the scheduler is not the bottleneck.

That is where a managed approach helps. Our Base Camp membership starts at $699 per month and covers AI-powered website creation, hosting, ongoing SEO and local SEO, content, conversion optimization and reporting, so the page that holds your booking widget keeps improving. Our Ascent plan is $1,299 per month and the Summit plan is $2,499 per month, with more content volume, testing and reporting. You can also see how the memberships work before you talk to anyone. Add-ons such as an AI chat agent at $79 per month can handle questions that would otherwise stop a visitor from booking.

If you would rather build and manage the site yourself, everything above will get you a working, measurable embed on your own.

Launch checklist

1. 01Choose one event type with a clear name and a realistic duration.
2. 02Upgrade from free if you need branding removed or more than one event type.
3. 03Pick inline for high-intent pages and a pop-up for content pages.
4. 04Use the JavaScript embed with resizing enabled.
5. 05Connect GA4 and mark invitee_meeting_scheduled as a key event.
6. 06Add UTM parameters to every link you control.
7. 07If you run ads, import the key event into Google Ads.
8. 08Test on two real phones and one desktop, booking end to end.
9. 09Review bookings by source after 30 days and move the embed or change the page based on what you see.

FAQ

Does Wix have a Calendly integration?

Yes, in the sense that you can embed Calendly on a Wix site using Calendly’s embed code, and Calendly publishes setup steps for choosing your website provider. You paste the code into an HTML embed element. Test on mobile afterward, since fixed-height widgets can cause a double scrollbar.

What are the disadvantages of Calendly?

The main ones for a business website are limits on the free tier (one event type and one calendar connection), Calendly branding unless you pay, and the iframe, which makes custom click tracking harder. None of these are dealbreakers if you plan for them, but they are worth knowing before you build a campaign around the widget.

How do I track Calendly bookings as conversions?

Connect your GA4 Measurement ID in Calendly, wait 24 to 48 hours for events to appear, then mark the meeting-scheduled event as a key event in GA4. For Google Ads, import that key event. For other tools, use the postMessage API or a redirect to a thank-you page.

Should I use inline or pop-up?

Use inline on pages where the visitor is ready to book, such as quote or service-request pages. Use a pop-up widget or pop-up text on content pages where the visitor is still reading. Test both if you have enough traffic to see a difference.

Sources

• How to add Calendly to your website | Calendly Help
• Advanced Calendly embed for developers | Calendly Help
• Calendly + Google Analytics | Calendly Help
• Google Analytics Scheduling Integration | Calendly
• Tracking and reporting | Calendly Help
• Act on your Calendly data with Google Analytics and Meta Pixel | Calendly
• Calendly pricing (2026) | Front Desk Review
• Calendly ROI in 2026: Worth It for Lead Gen?

Recommended

• Connecting your website to HubSpot: a practical decision guide