Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Calendly Embed

Solved

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

_underlena
New Member
4 0 0

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? 

Accepted Solution (1)
Moeed
Shopify Partner
6330 1716 2069

This is an 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>

 

Moeed_0-1686545747274.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 8 (8)

Moeed
Shopify Partner
6330 1716 2069

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

 

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


_underlena
New Member
4 0 0

Hi Moeed, the url is www.underlena.com

Moeed
Shopify Partner
6330 1716 2069

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


_underlena
New Member
4 0 0

Screen Shot 2023-06-12 at 4.36.17 PM.png

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
Shopify Partner
6330 1716 2069

This is an 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>

 

Moeed_0-1686545747274.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


_underlena
New Member
4 0 0

Brilliant Moeed, thanks so much that worked perfectly! 

AsYouCanSee
Visitor
2 0 1

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
Shopify Partner
4801 1085 1753

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.