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.com/assets/external/widget.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
Need Support? We've got you covered!
Every paid subscription includes Calendly Standard Support. However, only owners and authorized admins from your company can make certain account requests. Login to Calendly and navigate to the Help section where you can:
- Browse our Help Center.
- Join our Calendly Community to search, share, and connect with other Calendly users.
- Chat with us to receive real-time help.