How to hide certain fields in the InlineWidget of react-calendly

Other Questions Calendly
1

I’m using the react-calendly library to embed a scheduling tool into my website with the InlineWidget feature. Currently, it displays fields for name and email that I would prefer to keep hidden from viewers.

I’ve searched through the available react-calendly documentation but haven’t found any properties that would let me hide these input fields. Does anyone have any tips for customizing the visibility of fields in the embedded Calendly widget? I’m open to using CSS or any alternative methods that could help.

Thanks in advance for your advice, as the widget shows more fields than necessary for what I need.

2

you’re kinda outta luck with that - calendly’s free plan doesn’t allow for ui control, as ryanl said. i struggled with css too, but the iframe makes it tricky. might wanna look into calendars like calendso or acuity if you want more options for field visibility. way better flexibility!

3

Had this exact problem six months ago with a client’s Calendly setup. The react-calendly library doesn’t have props to hide fields, but CSS targeting works well. Just use CSS selectors to target the input containers and set display: none. The catch? Calendly loads in an iframe, so you’ve got to wait for it to fully load before your styles kick in. I used CSS with !important declarations plus some JavaScript to make sure it worked across browsers. You can also try Calendly’s prefill parameters if you’ve got the user data - just pre-populate fields to make fewer visible. Just don’t hide required fields or you’ll break the booking flow. Test everything after you implement it.

4

CSS won’t work - Calendly blocks external styling because of iframe restrictions and CORS policies.

You need the prefill feature with embed parameters instead. Just pass user data through prefill URL parameters when you set up the InlineWidget.

Try this:

prefillOptions={{
  name: "User Name",
  email: "[email protected]"
}}
hideLandingPageDetails={true}

This fills the fields automatically so users don’t see empty inputs. The hideLandingPageDetails prop cuts out extra UI stuff.

I’ve used this setup for enterprise clients wanting cleaner booking flows. Fields are still there but they’re filled and way less noticeable.

If you want them completely gone, you’ll need Calendly’s premium embedding options or switch to a different scheduling library with better UI control.