How can I hide the scrollbar in an embedded Calendly widget?

Other Questions Calendly
1

I’ve added a Calendly booking widget to my website but I’m having trouble with the scrollbar that appears inside the widget. The scrollbar is causing layout problems and doesn’t match the design of my site.

Here’s the code I’m currently using:

<!-- Booking widget integration -->
<div class="booking-widget-container" data-url="https://calendly.com/mydomain/consultation" style="min-width:300px;height:600px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- End booking widget -->

Is there a way to remove or hide this scrollbar through CSS or by modifying the widget parameters? I want the widget to display properly without the internal scrolling functionality interfering with my page layout.

2

try adding overflow: hidden; in your div’s CSS. Also, consider increasing the height to like 700px to avoid content getting cut off after the scrollbar’s gone.

3

Yeah I hit this same problem with Calendly widgets last year. overflow: hidden works but cuts off content you actually need.

Better approach - hide just the scrollbar while keeping scroll functionality:

.booking-widget-container iframe {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.booking-widget-container iframe::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

Users can still scroll with mouse wheel or touch, but no ugly scrollbar. Way cleaner than killing overflow entirely.

Bump your height to 650px minimum. 600px is too short for most Calendly forms - you’ll get scrolling anyway.

This video shows the CSS method in action if you want to see how it works.

4

CSS tricks work but you’re stuck with Calendly’s limitations. I’ve hit this exact problem building booking systems for clients.

The scrollbar isn’t the real issue - it’s having zero control once the widget loads. When Calendly updates their CSS, your fixes break.

I started building custom booking flows that connect directly to calendar APIs instead. Same user data, same destinations, but you control everything.

Build your frontend form however you want. No scrollbars, no embedded widgets, no surprises. Then automate the backend for calendar creation, confirmations, reminders - all the booking stuff.

Done this for three companies now. Custom solution always looks better, loads faster, and doesn’t break when third parties update their widgets.

The automation does everything Calendly does but matches your exact design. No more fighting embedded content.

5

Having the same issue right now. The CSS fixes people mentioned work, but try this first - check your Calendly widget settings and switch the embed type. Use popup or inline instead of the standard embed. Popup works best since it opens in an overlay and completely avoids scrollbar problems. Inline embeds sometimes render better depending on your container. If you’re stuck with your current embed, make sure your container positioning is right. Add position: relative to your booking-widget-container div - it helps the iframe render properly. The scrollbar often shows up because the widget can’t figure out the right dimensions in your page layout. Also, Calendly’s behavior changes based on your booking form length. Shorter forms need less space than complex multi-step ones. Go into your Calendly form settings and cut any fields you don’t actually need - it’ll reduce the height and might fix the scrollbar issue.