Webflow Calendly remove the scrollbar

Hi,

I’m currently working on a client site and I ran into an issue with the booking tool. The addon Calendly provided comes with a revolting scroll bar. I did some research and found a solution.

Click on the blue “Termin Vereinbaren” button to see the booking tool.
Client project = https://advokatur-fanger.webflow.io/

Solution Calendly :

Remove scroll bars

Depending on the host and theme you’re using for your website, your visitors may encounter a Calendly embed module with a scroll bar. The scroll bar appears when the embed exceeds the size of the container, which is controllable in your site layout. To remove the additional scroll bar, you can increase the height specified in the code copied from your account:

<div class="calendly-inline-widget" data-url="https://calendly.com/yaron-fanger" style="position: relative;min-width:320px; **height:750px** ;" data-processed="true">

I placed the div block into bevor the tag, with no success.

Any help is appreciated,

Take care & enjoy the weekend

I’m facing the same issue! Were you able to find a solution to this?

Hey @Breadbarry, I was able to poke around and come up with a solution.

The code that you copy from Calendly’s inline embed option has some height parameters. I think that standard is at 630px. I was able to get rid of the scroll bar entirely for desktop view by changing the height parameter on the code snippet to 650px.

The scroll bar does come back for tablet and mobile views but I’m happy with how the project looks on those view ports so I left it as is.

My suggestion to get rid of the scroll bar on tablet and below, set the embed element to a fixed height. Play around with the values and see what works.

1 Like

you just need to create a class add the width and height and remove the inline styling from the calendar embend code. use the media query to remove the scroll bar on all devices by setting the different height, width for mobile, tablet and desktop.

Hi,

I have been searching for your to get rid of the scroll bar but on mobile.

Do you have an idea of what would the css code look like to get rid of this damn bar, especially on mobile ? ^^

Yes. The problem with Calendly’s scrollbar is that it’s not appearing on the outer <div>, or even on the script-generated <iframe>. It’s appearing on the <body> element within the <iframe>- which you cannot affect with CSS or Script.

The best solution in Webflow is to size the outer <div> so that the <iframe> and its internal content won’t display a scrollbar unnecessarily- and when the scrollbar is needed, that it will give it a minimal appearance for mobile view.

Here’s how…

  1. Create your HTML embed, and paste in your Calendly embed code.

Then…

OPTION #1: Brute-Force

  1. Edit the embed code, so that inside of the <div>'s style attribute, the height is 665px;
style="min-width:320px;height:665px"
  1. Save & Close your code window

OPTION #2: Breakpoint-aware

  1. Edit the embed code, so that inside of the <div>'s style attribute, the height is 100%;
style="min-width:320px;height:100%"
  1. Save & Close your code window
  2. Select the HTML Embed element in the designer
  3. Select your desktop breakpoint at the top, and set the Height of the embed to 659px
  4. Select your mobile-portrait breakpoint, and override that Height to 665px

Publish your site to staging, and test on your target devices.

Notes;

  • The brute force approach will add 10 to 20px of space at the bottom in some breakpoints. Generally, it’s not that visible, depending on your Calendly widget and site background styling.
  • These numbers work for me on Aug 2022, if Calendly changes anything in their HTML content, those number might change, but the approach should still work.
  • Calendly’s CSS already applies a “touch” scrollbar effect, which is mobile friendly. You will see that scrollbar as a very thin line, and only when you are scrolled in the widget. Scrolling does appear to be needed if you have more than 2 booking options available.

For the techies:;

The CSS media breakpoints that Calendly is using in its CSS appears to be different from Webflow’s. Technically, you should be able to use descending breakpoints ( desktop → mobile ) of 646px, 659px, 646px, and 665px. However if you do that, and drag-resize your window on a desktop browser, the scrollbar will reappear between breakpoint transitions. The two-breakpoint approach is a bit sloppier with the extra 13px at the bottom on desktop, but solves that discrepancy. Visually, I don’t notice a difference.

1 Like

Oh thanks!

It helped a lot ! :slight_smile:

1 Like