Free tools Windows power users keep installed
One-click scans. No signup required.
The reliable way to add Calendly to WordPress is to generate an embed in Calendly, then paste that complete code into a WordPress Custom HTML block (or Elementor’s Shortcode widget). In Calendly, open the page or event type you want to publish, choose the three-dot menu, select Add to website, pick Inline embed, Pop-up text or Pop-up widget, adjust the available settings, and click Copy code.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
Use an inline embed when visitors should see the scheduler immediately. Choose pop-up text for a compact button or link, and a pop-up widget when a floating booking control should remain available across the site. WordPress.com plan capabilities determine whether you can paste JavaScript; if they do not, link visitors to your Calendly scheduling page instead.
As an Amazon Associate I earn from qualifying purchases.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
What you need before embedding Calendly
Have an active Calendly account with at least one personal or team event type, access to the WordPress editor, and the scheduling page or event you intend to publish. Calendly can generate code for either a landing page containing all active personal or team event types or a booking page containing one event type. You do not need to write the embed URL or JavaScript yourself: Calendly creates the appropriate snippet for the option you select.
Calendly’s documentation explains: “You can embed your Calendly page so visitors can schedule time without leaving your site.”
#1 Best Overall
Sale
Weekly To Do List Notepad, Undated Planner with 52 Sheets (8.5''x11'')
- 52 PAGES UNDATED WEEKLY PLANNER - This weekly planner features 52 undated pages, measuring 11 x 8.5 inches (A4) in a horizontal layout. It provides ample space for year-round planning, allowing you to schedule at your own pace without wasting pages or skipping dates.
- THOUGHTFUL FEATURES FOR PLANNING - Our weekly to do list notepad is designed with a top priority, a low priority, and a follow-up section, allowing you to prioritize and stay organized. It also has to do list part, notes part, which can help you track important daily events and develop daily habits.
- SPIRAL BOUND WEEKLY PLANNER - The weekly planner is spiral-bound for easy page turning and the option to tear off used pages for new plans. It features a transparent cover that protects your pages from dirt and damage.
- 100 GSM THICK PAPER - Our desk calendar planner is crafted with premium 100 GSM FSC-certified wood-based paper, paired with sturdy cardboard backing to resist ink bleeding and ensure a smooth writing experience. Durable, eco-conscious, and designed for daily use.
- VERSATILE USAGE - The weekly to-do list notepad is designed to meet all your planning needs and help you stay organized. It's perfect for work, home and school, including habit tracker, event organization, work schedules, travel plans, and more.
Choose the right Calendly presentation
Open the target landing page or event type in Calendly, select its three-dot menu, choose Add to website, and compare the three supported styles before copying code.
| Style | How it behaves | Best fit | Page footprint and discoverability |
|---|---|---|---|
| Inline embed | The scheduler is rendered inside the page. | A dedicated booking page or a page where scheduling is the primary action. | Uses the most space, but the available times remain visible without another click. |
| Pop-up text | A normal link or text trigger opens the scheduler in a pop-up. | A call to action in sales copy, a button, or a short contact section. | Keeps the page compact; visitors must select the trigger to discover the calendar. |
| Pop-up widget | A floating button remains available and opens the scheduler when selected. | Sites where booking should be reachable from several pages or sections. | Adds a persistent control rather than a large calendar block; the floating trigger is easy to find once recognized. |
These are presentation choices, not different Calendly accounts. You can generate a separate snippet for another page or event type whenever the user journey calls for it.
Embed Calendly on a WordPress.org site
1. Generate the complete Calendly code
- Sign in to Calendly and open the landing page containing your active event types, or open the individual event type you want to offer.
- Open the three-dot menu beside that page or event.
- Choose Add to website.
- Select Inline embed, Pop-up text, or Pop-up widget.
- Adjust any settings Calendly exposes for that style, then select Copy code.
Copy the entire snippet. It normally includes the JavaScript that loads Calendly as well as the element that receives the scheduler. Do not copy only the visible URL or remove the script portion; the embed requires JavaScript.
2. Add an inline scheduler to a page
- In the WordPress dashboard, open Pages and select the page you want to edit (or create a new page).
- Add a Custom HTML block at the position where the scheduler should appear.
- Paste the full Calendly code into that block.
- Use WordPress preview to check the calendar at desktop and mobile widths.
- Select Update for an existing page or Publish for a new one after the layout is correct.
Keep explanatory copy, eligibility notes, or a contact alternative outside the code block so the booking action still makes sense if a visitor needs context. If you later change the event’s availability or questions in Calendly, the embedded scheduler receives those changes from Calendly; you generally do not need to rebuild the WordPress page.
3. Add a pop-up text trigger
Use the same Add to website workflow, choose Pop-up text, and paste the generated snippet into a Custom HTML block where the trigger should be shown. The trigger can sit beside a paragraph, in a contact section, or in a button-like call to action. Preview the published page and select the trigger to verify that the scheduler opens instead of navigating away.
4. Add a site-wide pop-up widget
For a floating widget available across the site, Calendly’s WordPress.org instructions place the widget code in the theme footer:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Rank #2
- Stay on Track with Long-Term Planning: The Taja 2026–2027 desk calendar (17" x 12") provides generous space for monthly planning and organization. With clearly marked ordinal dates and holidays, it helps you manage schedules effortlessly. Covering July 2026 through December 2027, it’s perfect for long-term projects, academic or teaching schedules, and work commitments.
- Ample Space & Thoughtful Layout: Each daily grid measures a spacious 2.3" x 2.3", offering plenty of room for tasks, appointments, and reminders. Neatly ruled boxes keep your notes organized and easy to read. An additional notes section provides extra space for important memos, goal tracking, or to-do lists—ensuring everything you need is in one convenient spot.
- Premium 120 gsm Paper: Crafted from high-quality 120 gsm paper, this desk calendar ensures a smooth and enjoyable writing experience. The paper resists ink bleeding and smudging, keeping your writing clear and professional—whether you’re jotting down quick reminders or detailed plans. Please remember to flip open the clear protective sheet before writing, as the transparent layer is not designed for writing.
- Protected & Sturdy for Daily Use: Designed for long-term durability, the 2026–2027 desk calendar features a waterproof transparent cover and protective corners to guard against spills and dirt, keeping the pages in excellent condition even with frequent handling. It also includes two hanging holes and a sturdy rope, allowing you to hang it on the wall for easy access or keep it on your desk for convenience.
- An Ideal Present Choice: This desk calendar is not only a great tool for yourself but also a thoughtful gift for family, friends, or colleagues. It helps them stay organized and work efficiently throughout the new year—making it a practical and meaningful present for any occasion.
- Open Appearance > Editor in the WordPress dashboard.
- Locate the theme’s footer or the area immediately before the closing
</body>tag. - Paste the complete pop-up widget code immediately before that closing tag.
- Save the template or footer changes.
- Preview several pages, including a page that contains an inline scheduler, to confirm that the floating control appears only as intended.
The exact footer controls can vary by theme. Editing a global footer affects the whole site, so test both logged-in and logged-out views and check that the widget does not cover navigation, cookie controls, or another important button.
Use Calendly on WordPress.com
WordPress.com hosting plans do not all expose the same HTML and plugin capabilities. On a plan that supports custom plugins or HTML blocks, follow the same generated-code approach:
- Generate the desired Calendly snippet through Add to website.
- Edit the WordPress.com page and insert a Custom HTML block.
- Paste the complete code.
- Preview the result, then update the page.
If your WordPress.com plan does not permit that type of JavaScript or HTML, use a standard text or image link instead. In Calendly, copy the URL for the scheduling page, the individual event type, or the team page; in WordPress.com, select the text or image, choose the link control, paste that copied URL, and save. Visitors will schedule on Calendly rather than inside the WordPress.com page, but the link remains a dependable fallback when embeds are unavailable.
Add Calendly with Elementor
Elementor pages use a widget-based editor. Calendly’s documented Elementor method is to place the generated embed in a Shortcode widget:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors- Open the page in Elementor.
- Drag a Shortcode widget to the column or container where the scheduler should appear.
- In the widget’s Content tab, paste the complete Calendly embed code.
- Save or update the page and preview it at the front end.
Do not paste only the booking URL when using this method; the complete snippet supplies the script and the inline or pop-up behavior selected in Calendly.
Fix an extra scrollbar in Elementor
Calendly reports that Elementor can add overflow-y:auto, producing a second vertical scrollbar around an inline scheduler. If the calendar scrolls inside a narrow frame as well as on the page, add this rule in the relevant site or page CSS:
Rank #3
- Stay Organized All Year – This large desk calendar covers 18 months from July 2026 to December 2027. Its spacious monthly pages make planning and scheduling simple.
- Ample Space for Detailed Planning – This large desk calendar (22x17 inches) offers ample daily planning space. Each 2.4x2.3 inch ruled daily block keeps writing neat.
- Desk Mat Design – Reusable double-layer PU leather backboard protects the desktop from scratches and stains, securely holds the calendar, and adds sophistication to any workspace.
- Built-In Planning Tools – Every page comes equipped with a to-do list and dedicated notes space, helping you stay focused, track your progress effortlessly, and stay ahead of deadlines.
- Minimalist & Practical Design – Designed to boost productivity and help you manage time more effectively, this simple yet elegant calendar is a perfect fit for home, office use.
.calendly-inline-widget { overflow-y: hidden !important; }Apply the rule only after confirming that the affected element is Calendly’s inline widget. Preview the page again at different screen widths; hiding overflow on an unrelated container can clip content that the visitor needs to reach.
Inline embed or pop-up: a practical decision
Choose inline when scheduling is the destination
An inline scheduler is usually the clearest choice for a page whose purpose is booking a consultation, interview, demonstration, or appointment. The visitor can see the calendar as soon as the page loads and does not have to understand a special trigger. Reserve enough horizontal and vertical space in the page layout so the embed is not squeezed into a narrow sidebar.
Choose pop-up text when the page has another primary action
A pop-up text trigger keeps an article, service page, or contact section focused on its main content. Place the trigger immediately after the sentence that establishes why a meeting is useful. Test the trigger in the editor’s preview and on the published page; a link that looks correct in the editor can still be affected by a theme’s button or link styles.
Choose a pop-up widget for persistent access
A floating widget makes scheduling available from multiple parts of a site without adding a full calendar to every page. Because it is global, inspect pages with chat controls, cookie notices, sticky headers, or mobile navigation. If the floating control obscures another action, move or restyle it through the options Calendly exposes when you generate the widget rather than editing the generated JavaScript by hand.
How the WordPress embed works
The generated snippet combines a target element with JavaScript that loads Calendly’s scheduler. WordPress outputs the target in the page, and the browser runs the script to request the current event availability from Calendly. This is why a plain text URL and an embed are different implementations: the URL sends the visitor to another page, while the script renders the booking experience inside the WordPress layout or opens it in a pop-up.
A WordPress theme can affect whether JavaScript runs and how the resulting element is styled. A successful save in the editor therefore is not proof that the public page works. Always open the public URL in a private browser window, select the event type, choose a time, and advance far enough to confirm that the booking form appears.
Advanced JavaScript implementation
Most site owners should use the code Calendly generates. Developers who need to control the target element, pass values from an application, or coordinate the embed with another script can use Calendly’s documented external widget library and call Calendly.initInlineWidget. The library is loaded from:
Rank #4
- Be Organized & Stay On Top Of Things 2026-2027: With the gorgeous desk calendar running from 2026/06 to 2027/12 planning ahead & boosting your productivity is super easy! See all appointments, deadlines, birthdays, US holidays & other dates (Valentine’s Day, lovebirds!) at a glance
- Your Unique Academic Wall Calendar 2026 and 2027: Use the family calendar (16x12”) as an extension of your brain & transform it into your organizational masterpiece - each day offers a spacious box for notes and there is an additional section for monthly to do’s & more
- Clean Minimalistic Design: Besides being a premium planning tool, the desk calendars are great decoration for your desk or wall; the modern minimalistic black & white designs add a relaxed atmosphere to your office, home or classroom
- Flexible Use: Your choice! Use the daily planner as a desk calendar or with the two hanging holes as wall calendar; tear off the page of each month or keep it - the ZICOTO daily calendar is here to streamline your life just the way you need to
- Superior Material: A durable birthday calendar so you can plan easily thanks to the high-quality materials. 4 clear plastic protectors for safe transport are incl. (Stickers are not incl.)
https://assets.calendly.com/assets/external/widget.js
The essential structure is a target div, the library, and an initialization call. Supply your own scheduling URL through the schedulingUrl variable rather than inventing a booking address:
<div id='calendly-target'></div>
<script src='https://assets.calendly.com/assets/external/widget.js' async></script>
<script>
const schedulingUrl = getSchedulingUrlFromYourApp();
Calendly.initInlineWidget({
url: schedulingUrl,
parentElement: document.getElementById('calendly-target')
});
</script>The getSchedulingUrlFromYourApp() name represents your own application logic; it is not a Calendly function. In a production implementation, ensure it returns the event or page URL copied from your Calendly account before initialization runs. Calendly also documents optional prefill and utm objects that can be added to the initialization options when your integration needs to pass visitor details or campaign parameters. Validate those values in your own code and keep the standard generated snippet as the fallback if the custom integration fails.
Recommended Free Tools
Testing checklist before you publish
- Correct destination: confirm that the embed opens the intended landing page or single event type, not an old or test event.
- Complete code: verify that the copied snippet was pasted in full, including the JavaScript portion.
- Front-end view: test the public page, not only the WordPress or Elementor editor.
- Responsive layout: check a wide desktop window and a narrow mobile window for clipping, horizontal scrolling, or an unusable pop-up.
- Booking path: choose an available time and proceed through the form far enough to prove that the event details and confirmation flow load.
- Other page elements: make sure a global pop-up widget does not cover menus, consent controls, or important buttons.
- Cache effects: if visitors see an older layout after an update, clear any page or browser cache used by your WordPress setup and test again.
- Fallback link: keep a normal Calendly scheduling link in nearby copy or contact details when a booking action is business-critical.
Troubleshooting common failures
The calendar area is blank
Return to Calendly and copy the code again from Add to website. A missing script line, truncated paste, or code inserted into a visual paragraph block can prevent the scheduler from loading. On WordPress.com, confirm that the current plan permits a Custom HTML block and JavaScript. On a self-hosted site, preview while logged out as well as logged in; editor privileges can make a script appear to work for an administrator when it is not present for ordinary visitors.
The page shows code as text
The snippet is in the wrong block type. Replace a Paragraph or Text block with Custom HTML in the WordPress block editor, or use Elementor’s Shortcode widget and paste the full snippet in its Content field. Do not wrap the code in extra formatting characters.
An extra scrollbar appears in Elementor
Inspect the inline widget for Elementor’s overflow-y:auto behavior and apply .calendly-inline-widget { overflow-y: hidden !important; } to the relevant page or site CSS. Recheck the full scheduler after changing overflow so that no content is clipped.
Best Value
- Stay Organized All Year: 2027 desk calendar (17"x12") offers ample space for monthly planning and organization. Perfect for long-term projects, school or teaching schedules and work commitments. Track deadlines, appointments, kid’s sports or school events, stay coordinated all year long.
- Functional Layout: Desk calendar 2027 have daily blocks every month, including holidays markings, notes on the right side of the desk calendar. Spacious daily grids allow quick planning, while bold date markers ensure you stay ahead of deadlines.
- Premium Quality & Durability: Desk calendar 2027 features a waterproof transparent cover and reinforced corners to resist spills and dirt, ensuring your calendar stays in perfect condition even with frequent handling.
- Versatile Placement: Equipped with two hanging holes and a sturdy rope, this calendar can be easily hung on the wall for quick reference or laid flat on your desk for everyday convenience.
- Thoughtful Gift Idea: This monthly calendar makes a thoughtful and practical gift for professionals, students, teachers, and busy parents. Ideal for birthdays, holidays, housewarmings, or back-to-school surprises – a gift that keeps them organized all year long!
The pop-up trigger does nothing
Confirm that the entire pop-up text or widget snippet was pasted and that the page is loading JavaScript. Test in a private window with browser extensions disabled, then inspect whether a theme script or optimization setting is delaying or removing the generated code. If the trigger remains unreliable, replace it temporarily with a normal link to the copied Calendly scheduling page so visitors still have a working booking path.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →The widget appears in the wrong place
A pop-up widget placed in Appearance > Editor is global by design. Remove it from the footer if it should appear only on one page and use a page-level Custom HTML block instead. If it is covering another floating control, adjust the widget settings offered by Calendly or change the conflicting site element rather than editing the generated script.
The booking page opens, but the wrong event is offered
Regenerate the code from the intended event type rather than from the general landing page. A landing-page embed can expose every active personal or team event type, while an event-page embed is limited to one event. Verify the event name and availability in Calendly before replacing the WordPress snippet.
Updating or removing an embed
To change the event or presentation, generate a new snippet in Calendly and replace the old code in the same WordPress block, Elementor widget, or footer location. To remove the scheduler, delete the Custom HTML block, Shortcode widget, or footer code and update the page or template. A normal WordPress link can be edited independently because it is only an anchor to the copied scheduling URL.
Which implementation should you use?
| Your situation | Recommended implementation | Reason |
|---|---|---|
| A dedicated page exists solely for appointments. | Inline embed for one event or a landing page for multiple event types. | The calendar remains visible and requires no trigger click. |
| A service page needs a short booking call to action. | Pop-up text in a page-level Custom HTML block or Elementor Shortcode widget. | The page stays compact while the scheduler opens on demand. |
| Visitors should be able to book from many pages. | Pop-up widget code in the WordPress theme footer. | The floating trigger is globally available. |
| Your WordPress.com plan blocks custom HTML or JavaScript. | A normal text or image link to the copied Calendly page, event, or team URL. | It avoids unsupported embed code while preserving the booking route. |
| You need application-controlled prefill or UTM data. | A developer-managed Calendly.initInlineWidget integration. |
The advanced API accepts a parent element plus optional prefill and utm objects. |
Final recommendation
For most WordPress.org pages, generate an inline Calendly snippet and paste it into a Custom HTML block. Use pop-up text when the calendar should stay out of the page flow, and reserve a pop-up widget for site-wide access. Elementor users should place the complete code in a Shortcode widget and watch for the documented overflow issue. WordPress.com users should first check whether their plan supports custom HTML; when it does not, a standard link to the copied Calendly page is the dependable alternative.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
