How to fix Calendly app configuration issues on the Dawn theme?

[_underlena]

I am having issues configuring my Calendly app correctly now that I have shifted over to the Dawn theme (previously Brooklyn). I can't seem to remove the scroll bar from the app embed, so you a user only ever see a small section of the calendar rather than the whole thing.

The following suggestions from Calendly aren't helping me:

Can you try adding this bit of code to your CSS file on the page?

.calendly-inline-widget iframe {
height: 100% !important;
}

If that doesn't work, try:

.calendly-inline-widget iframe {
height: 1000px !important;
}

The other solution in the community (https://community.shopify.com/c/shopify-design/full-length-of-the-calendly/m-p/1667763#M444994) isn't working for me either.

Is anyone else having the same issue? 

[Moeed]

Hey @_underlena 
Kindly share your Store URL and Password if enabled

[_underlena]

Hi Moeed, the url is www.underlena.com

[Moeed]

Can you please share a screenshot as well of exactly what you're looking to remove?

[_underlena]

Perhaps  'remove' is the incorrect word - as you can see, the Calendly embed doesn't have enough space on the page to show the entire app, so you can only see a tiny bit of the app at a time. I would like to make the 'window' larger so you can see the entire app. 

[Moeed · Accepted solution]

Hey @_underlena 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
.calendly-inline-widget {
    height: 750px !important;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[_underlena]

Brilliant Moeed, thanks so much that worked perfectly! 

[AsYouCanSee]

Hello Moeed, i'm having the same problem, I'm trying to figure out how exactly to add my calendly link properly. 

My site: (asyoucansee.com)

Example site: (https://groupie.store/pages/contact-us)

I'd like it to be like that when you click on "Book An Appointment" on their site^

I'm not sure I actually did this correctly because it takes me off of my website when I click book appointment rather than poping up as a tab like the example site.

Also, I'm struggling to add this to the mobile version of my site. (asyoucansee.com)  "Book an appointment" tab doesn't show up on mobile version 

[PageFly-Richard]

Hi @_underlena 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.calendly-inline-widget {
    height: 800px !important;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly