Embed options
25 articles
Advanced Calendly embed for developers
Learn to customize Calendly embeds on your website using advanced JavaScript. Control appearance, pre-fill invitee details, auto-resize the widget, and track interactions to enhance user experience and streamline scheduling.
Calendly embed and the API
Learn how to integrate Calendly's embed options and API into your website or app. This article guides you on when to use each tool, their capabilities, and how to enhance your scheduling experience while aligning it with your brand.
Embed options overview
Discover how to seamlessly embed Calendly on your website with options like inline, pop-up text, and pop-up widget. Explore tailored instructions for various website providers and learn about advanced customization features for developers.
Calendly offers three embed options:
- Inline embed – Displays your scheduling page directly within your website.
- Pop-up text – Opens your scheduling page in a pop-up when a link is clicked.
- Pop-up widget – Adds a floating button to your page that opens a pop-up when selected.
Was this helpful?How to add Calendly to Google Sites
Learn how to seamlessly add your Calendly scheduling page to Google Sites using embed tools or links. Enhance your website by allowing visitors to book directly, ensuring a responsive design for any device.
How to add Calendly to a Shopify site
Learn to easily embed Calendly into your Shopify site, allowing visitors to book appointments directly. This guide covers inline embeds, popup text, and widget options, along with troubleshooting tips for display issues.
How to add Calendly to a Squarespace site
Learn how to seamlessly embed Calendly into your Squarespace site with this step-by-step guide. Ensure you have a Business Plan and discover troubleshooting tips for optimal scheduling without disrupting your site's layout.
Here’s how to add Calendly to your Squarespace site:
- Get your embed code — In Calendly, select the three dots next to event type or landing page you want to share and select Add to website. Choose how you want it to appear, then select Copy code.
- Sign in to Squarespace and open the page where you want your scheduler to appear.
- Hover over the content area and select Edit.
- Add a Code Block (follow Squarespace’s guide if needed).
- Paste your Calendly embed code into the Code Block.
- Select Apply to save your changes.
Was this helpful?How to add Calendly to a Webflow site
Learn how to seamlessly integrate Calendly into your Webflow site, allowing visitors to schedule appointments easily. Discover steps for using inline embeds, popup text, and widgets to enhance user experience without leaving the page.
How to add Calendly to a Weebly site
Learn how to easily embed your Calendly scheduling page on your Weebly website. This guide walks you through using various embed types and provides step-by-step instructions to enhance visitor scheduling without leaving your site.
How to add Calendly to a Wix site
Learn to embed Calendly on your Wix site, allowing visitors to schedule appointments seamlessly. The article covers both inline and popup widgets, step-by-step installation, and alternative linking methods for easy access to your booking page.
How to add Calendly to a WordPress site
Learn how to seamlessly embed Calendly on your WordPress site with this step-by-step guide. Discover methods for both WordPress.com and WordPress.org users, including inline embeds and pop-ups to enhance booking capabilities.
Here's how to add your Calendly scheduler to a WordPress site:
- Get your embed code — In Calendly, select the three dots next to event type or landing page you want to share and select Add to website. Choose how you want it to appear, then select Copy code.
- Open your WordPress dashboard and go to the page where you want the scheduler to appear.
- Add a Custom HTML block (or Custom HTML widget) and paste the Calendly embed code.
- Select Publish or Update, then preview the page to confirm the scheduler displays correctly.
If your plan doesn't support HTML embeds, you can add a link to your Calendly scheduling page instead.
Was this helpful?How to add Calendly to an Unbounce site
Learn how to seamlessly integrate your Calendly scheduling page into an Unbounce site using inline or popup embed options. Follow simple steps to enhance user experience and allow visitors to book appointments without leaving your landing page.
How to add Calendly to an email or email template
Learn how to effectively share your Calendly scheduling link in emails despite embedding limitations. Explore options like text links, buttons, and images to guide invitees to your booking page and enhance appointment scheduling.
How to add Calendly to your website
Learn how to seamlessly add Calendly to your website with step-by-step instructions. Discover options for embedding, customizing appearance, and integrating with various website providers to enhance user scheduling experiences directly on your site.
To add Calendly to your website:
- Choose the page you want to embed:
* Landing page embed – Displays all active personal or team event types.
* Booking page embed – Displays a single event type. - Select the three dots (•••) next to your chosen page, then click Add to website.
- Choose your embed type: inline embed, pop-up widget, or pop-up text.
- Select Continue, make any adjustments, then click Copy code.
Was this helpful?- Choose the page you want to embed:
How to control your embed layout and sizing
Learn how to customize your Calendly embed layout and sizing for optimal display on your website or app. Explore layout styles, adjust dimensions, and enable auto-resizing to ensure a seamless experience on both desktop and mobile.
How to create a custom button to open Calendly
Learn to create a custom button that opens Calendly in a popup using HTML and JavaScript. This guide covers necessary code, button setup, and styling options, enabling efficient scheduling without iframes. Perfect for enhancing user interactions.
How to customize your embed
Learn how to customize your Calendly embed by hiding event details and the cookie banner, changing colors, and adjusting placement to integrate seamlessly with your site. Follow simple steps for a personalized scheduling experience.
How to embed Calendly in Joomla
Learn how to embed Calendly into your Joomla site effortlessly. This guide details two methods for adding the embed code, allowing visitors to schedule appointments directly from your website, enhancing user engagement.
How to embed Calendly in a React app
Learn how to seamlessly embed Calendly in your React app using the react-calendly package. This guide offers step-by-step instructions, customization options, and layout troubleshooting for a smooth booking experience on your site.
How to embed Calendly in a mobile app
Learn how to seamlessly integrate Calendly into your mobile app using WebView. Discover embed options, choose between standard and advanced setups, troubleshoot compatibility issues, and unlock features like pre-filling forms and event tracking.
How to embed Calendly in an Angular app
Learn how to embed Calendly in your Angular app using either a simple inline method or an advanced JavaScript method for more control. This guide covers code placement, best practices, and script integration for seamless scheduling.
How to embed Calendly with an iframe
Learn how to embed Calendly using an iframe when JavaScript isn't supported. This guide covers when to choose iframe, setup instructions, layout tips, and limitations compared to advanced embed options for a more customizable booking experience.
How to pre-fill invitee information in an embed
Learn how to enhance your booking process by pre-filling invitee information in your Calendly embed. This guide provides step-by-step instructions to automatically populate details like name and email, creating a seamless user experience.
How to source track your Calendly embed with UTM parameters
Learn how to effectively track your Calendly embeds using UTM parameters to analyze traffic sources. Discover methods to add UTM tags for better insights into your marketing campaigns using Google Analytics.
How to track embed activity in Google Analytics
Learn to track visitor interactions with your Calendly embed using Google Analytics. Set up tracking, add UTM parameters for source analysis, and monitor key events in your GA dashboard to optimize your scheduling page’s performance.
Troubleshooting Calendly embeds
This guide offers solutions for common issues with Calendly embeds, including scrolling problems, ad blockers, mobile dropdowns, and layout adjustments. Learn how to effectively troubleshoot and optimize your embed functionality for a better user ...