Troubleshooting Calendly embeds

If your Calendly embed isn’t working as expected, this guide can help. Below are common issues and how to fix them.

Fix scrolling and image loading issues

If your page won’t scroll or images don’t load, Calendly’s embed styles may be conflicting with your website’s layout.

Try this CSS fix:

body {overflow: unset !important;}

Using Squarespace?
Also add:

.site-wrapper {height: auto;}

These changes allow your page to scroll normally and prevent layout conflicts, especially if your site template overrides Calendly’s height settings.

Prevent ad blockers from hiding embeds

Browser extensions may block Calendly embeds. To help visitors:

• Display a message like:
  “Please turn off your ad blocker to view this calendar.”
• Add a fallback button that opens the scheduling page in a new tab.

Fix dropdown menus on mobile

Dropdowns in embeds can open off-screen on mobile devices. Try these fixes:

• Use a shorter embed height
• Replace dropdowns with radio buttons (for short lists)
• Switch to a pop-up embed, which fits better on mobile

Adjust layout based on container width

Calendly’s layout responds to its container’s width.

• To show side-by-side layout: Set width to 1000px or more
• To switch to stacked layout: Reduce width below 650px

Learn how to control embed layout and sizing

Center your embed on mobile

If your embed appears off-center on mobile:

• Make sure the container is at least 320px wide
• Remove extra padding or margins around the embed

Fix embeds appearing at the bottom of the page

If you use HubSpot, Marketo, or similar tools and your embed appears in the wrong place, check that this stylesheet is included:

<link href="https​:​//assets.​calendly.c​om/assets/​external/w​idget.css" rel="stylesheet">

Without it, styles may break and push the embed to the bottom.

Embed not working after you change your Calendly link

Seeing a “calendly.com refused to connect” error? Your embed may use an old or incorrect link. Fix it by:

• Generating a new embed code in Calendly
• Replacing the old code on your site

Or inspect the link using ⌥⌘I (Mac) or right-click > Inspect, then update it manually.

Remove extra scroll bars

Check out this guide: Remove the embed scroll.

Tip: Use “Inspect” in your browser to test different embed heights.

Website builder specific issues

If you’re having any issues with specific website builders, please see our linked resources.

• Squarespace - Embed doesn’t appear in editor
• Shopify - Popup close button doesn’t appear
• Wordpress - Embed not working in Elementor