Scenario / Question

I want to embed Calendly on my company website. What are the best practices to choose the right embed type, set it up cleanly, and customize it for a seamless user experience?

Overview

You can embed Calendly on your website so visitors can book without leaving your site. Choose from three embed types—inline, pop-up text, and pop-up widget—and customize options like hiding details and colors. For advanced control, use the JavaScript API to delay loading, prefill fields, or pass UTM parameters.

Step-by-Step

1. Decide what to embed: Choose a landing page (shows multiple event types) or a single event type you want visitors to book.
2. Generate your embed code in Calendly: From the Event Types or Scheduling page, select Add to website or Share, then Add to website. Pick Inline, Pop-up text, or Pop-up widget and adjust appearance settings.
3. Customize basic settings: Optionally hide your photo and event details, and customize colors or button text (more color options on paid plans). Then copy the code.
4. Add the code to your site: Paste the embed into your website HTML or the platform’s custom code block. Calendly provides guides for platforms like Wix, Unbounce, Squarespace, Shopify, Weebly, WordPress, Google Sites, Webflow, and Joomla.
5. Choose the right embed type for UX:
   1. Inline: Keeps the scheduler on-page for uninterrupted flows.
   2. Pop-up text: Opens the scheduler from a text link.
   3. Pop-up widget: Adds a floating button visible across the page.
6. Use advanced embed when needed: Load the widget on demand and prefill or pass UTM parameters via JavaScript. Ensure you set parentElement so the embed renders in the intended container, not at the bottom of the page.
7. Optional: Track sources with UTMs: Append UTM parameters directly in the URL or pass them via the JavaScript init call for consistent attribution.
8. Test and preview: Confirm layout, mobile responsiveness, and that the embed appears in the correct spot. Adjust height (commonly ~700px) and min-width (320px) for a smooth scroll experience.

Key Notes & Limitations

• Three embed types are supported: inline, pop-up text, and pop-up widget.
• Hiding event details removes your avatar, event name, location, and description in the embed to avoid duplicate on-page content.
• Color and button text customizations vary by embed type; expanded color options are available on paid plans.
• Always include parentElement in advanced embeds; otherwise, the widget may load at the bottom of the page.
• If your platform blocks JavaScript, you can use an iframe embed, but it won’t support prefill, event tracking, auto-resize, or hiding certain elements.
• For heavy customization and event tracking, use the Developer embed JavaScript, not the public API (the API doesn’t render the booking flow itself).

Related Questions (FAQ)

Q: What are examples of when to use each embed type?

A: Inline keeps users focused on booking within a section of your page; pop-up text is great for contextual CTAs in copy; pop-up widget provides a persistent “Book” button that opens the scheduler on demand.

Q: Can I embed a page with multiple event types?

A: Yes. From your Event Types (landing page), select the gear icon, choose Add to Website, and pick your embed type.

Q: How do I prefill invitee details or pass UTM parameters?

A: Use the advanced JavaScript embed (Calendly.initInlineWidget) and pass prefill and utm objects during initialization. You can also append UTM parameters directly to the data-url.

Q: What if I only want to embed one specific meeting type?

A: From the Event Types page, open the event type, select Share > Add to Website, and choose your embed type to control exactly what can be booked.

Q: My embed shows up at the bottom of the page. How do I fix it?

A: Include parentElement in your Calendly.initInlineWidget configuration so the embed renders in the correct container.

Q: Can I add my Calendly link to an email signature instead of embedding?

A: Yes. You can hyperlink text or add a button in your email signature that links to your scheduling page.

Links & Resources

• Embed options overview (Calendly Help Center)
• How to add Calendly to your website (Calendly Help Center)
• How to source track your Calendly embed with UTM parameters (Calendly Help Center)
• Calendly embed and the API (Calendly Help Center)
• How to embed Calendly with an iframe (Calendly Help Center)
• Best Practices for Integrating Calendly on a Website? (Calendly Community)