How can I remove the scroll bar from the Calendly booking tool in Webflow?

TL;DR
  • Adjust Calendly widget size by ensuring embed dimensions match the content, testing different heights.
  • Modify embed code with appropriate height and width parameters.
  • Add custom CSS in Webflow's Project Settings to style the widget and use overflow: hidden;.
  • Publish and test the site on various devices to confirm no scroll bars appear.

If your Calendly booking tool is showing a scroll bar in Webflow and you’d like to remove it, follow these steps for a clean integration:

​

1. Adjust Calendly Widget Size

  • Check the dimensions of your Calendly embed. Often, the scroll bar appears due to mismatched widget sizes.
  • Set the height of the Calendly embed code to ensure it matches the content inside. You may need to test different heights to find the optimal one.

​

2. Update Embed Code

  • Go to the Embed element in your Webflow project where the Calendly widget is added.
  • Modify the Embed code to adjust the height and width parameters. Make sure the height attributes are set appropriately in the embed code (e.g., height="700").

​

3. Use CSS for Styling

  • Go to Project Settings in your Webflow project, then select the Custom Code section.
  • Add custom CSS to style the Calendly widget as needed. You can set overflow: hidden; within a styled div container to prevent scroll bars.

​

4. Preview and Test

  • Publish your Webflow site to see the changes live.
  • Test the Calendly booking tool on various devices to ensure no scroll bars appear and the tool looks as expected.

​

Summary

To remove the scroll bar from the Calendly booking tool in Webflow, adjust the embed size, update the embed code, and use CSS styling to limit overflow. Always test the final integration to ensure it displays correctly across devices.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What GIF compressor can I use to compress a 6.3MB GIF to below 4MB for uploading on Webflow? Additionally, can I delay the playback of the GIF until it is fully loaded on the page to improve loading speed? Thank you, Josiah.
How can I redirect the non-www version of my domain name to the www version using Webflow without having to publish the website in two places?
What is the most effective way to connect Webflow and Google Sheets to create a dynamic 'reviews' page that updates automatically with new reviews from the Google Sheet?
Do I need to use HTML when importing Markdown in Webflow for my blog? Is there a more efficient way to update the tags and content in multiple blogs?
Is there a reliable custom code to remove scrollbars on all browsers for elements in a Webflow website?
Has anyone experienced a situation where a CSS class is being added to the Body tag upon page load in Webflow, which overrides the default site styling? The attribute being added is 'data-wf-spring-theme-render' with a corresponding value. Thank you.
How can I add jQuery scripts like a slider or toggle navigation to Webflow and preview the effect?
How can I create a subdomain with separate pages in Webflow for an existing project?
How can I properly load a script in Webflow after the page has been fully loaded, specifically for a popup created with Calendly?
Has anyone successfully used Webflow and Shopify together to run an e-commerce store? If so, can you provide any feedback on this process?
Is it possible to trigger different hover effects on each child element when hovering over a parent element in Webflow or CSS?
What are some alternative options to the Soundcloud embed widget for hosting audio tracks on a Webflow site with text and image commentary below?
How can I improve the mobile score above 90 on Google audits for webflow, particularly addressing the issue of First Contentful Paint 3G timing?
How do I create a fixed div that stops scrolling in Webflow like the effect on my old site?
How can I create a custom navigation bar in Webflow with centered menus and logo, and properly link the menu items to pages without any underlines or blue color?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?