Embedded Meeting Iframe Height

[BenStark]

When embedding a Sales Meeting into my website, the height of the iframe does not match the height of the content.  Specifically, whent he form appers, the content has to scroll inside the iframe.  How do I break the Meeting widget out of this iFrame jail so that the entie contents is visible when the form is displayed? I tried setting a height for the iframe, but that didn't seem to affect the contents. What can I do?

[TomM2 · Accepted solution]

Hey @MariZanchetta If you're on enterprise you can now use HubSpot forms as the meeting link form, which would allow you to customise this as much as you like. 

[borjagarciac]

We have the same problem, and it is a serious problem. Not having all the form fields visible is a leakage point and potential leads don't sign up. Forms should display all required fields, including consent policies.

[DCiocca]

I am having the same problem here. This is a problem that needs fixed. On mobile, this causes major user confusion as it looks like they have filled out all of the required fields but still can't click the book button because there are other required fields below that requires a scroll from the user that isn't inuitive.

[lkpa]

I just wanted to second that I definitely see this as an issue. We do have people reaching out to us from time to time mentioning that the form "is broken" and they could not submit it. Also, co-workers have mentioned this.

I am a developer and I embed the forms to websites and since they are iframes on domains I do not control I can't control the height. 

I would prefere to have layout shifts on the page instead of scrollbars in this case.

It would be great to have a solution or workaround if anyone could point me in the right direction.

[MariZanchetta]

I have the same problem. And it's not ideal, the last question is "hidden" and the user needs to realise they must scroll down in order to see it. It's not intuitive at all.

Instead of making changes to the iframe, couldn't Hubspot make the form fields more flexible?

If I could add the Company Name field next to the Email field (in the same line), or the Mobile number to the same line next to the Company name, just as it is with First and Last names, that would make the form shorter and sort this problem!

@kvlschaefer @Tom 

[TomM2 · Accepted solution]

Hey @MariZanchetta If you're on enterprise you can now use HubSpot forms as the meeting link form, which would allow you to customise this as much as you like. 

[MariZanchetta]

Hi @TomM2 , thanks for getting back.

I'm on the Professional plan, so I won't have access to that.

I do appreciate that some features are only available in some plans, however, this seems like an issue that should be sorted out for all users (not the access to this new meeting link form, but the problem with the form itself).

The fact that a visitor needs to scroll down the form to view the last question(s) when there is enough space available for the form to be fully displayed doesn't make any sense, and I believe it is hurting my conversion rate metrics.

I hope Hubpost considers a way of sorting this out, either by fixing the iframe or providing us an option to add questions in the same line.

many thanks!

[basdenhoed]

I totally agree with you. This is really a fundamental feature within Hubspot. We use Calendly now, because it is in there.

[TomM2 · Accepted solution]

Hey @MariZanchetta I can definitely agree, it might be a good idea to add a feature request on the ideas forum to bring this to the attention of the HubSpot product team. 

[TomM2]

@BenStark Looks like this is due to the form being so long. I see the first, email enter page takes up the whole iframe. 

The iframe doesn't embed into the DOM it loads dynamically. I'm not aware of any workarounds to force the entire iframe to be a specific size and I would suspect it's built this way specifically. The iframe gives the meeting a specific styling so external scripts and styling don't affect it. 
It looks like everything is a visible height, the first page and the time booking, it's just that the form is larger it requires a scroll. I'd imagine this is an intentional design decision by HubSpot to ensure there's not an inconsitent size while navigating between pages, if the entire iframe was longer the initial page would be too long and the time booking page may be too long if there were few times available. The other option would be to have each page jump in height. 

To my knowledge there isn't, and likely intentionally shouldn't be a way to change the height on these embeds so everything is visible instead of a scroll. 

[BenStark]

I tried scaling the height of the iframe with both CSS and JavaScript but neither changes the height of the content inside the frame.  It just makes the iframe taller without affecting the content.

[kvlschaefer]

Hi @BenStark,

Thanks for reaching out to the Community and for including the steps you have taken so far! 

Would you be able to share the link to the page where the meeting widget is embedded? Can you also share a screenshot of what you're seeing on your end?

Thank you! 

Best,

Kristen

[BenStark]

Here is a link to the page. The screenshot is in my original post, but here it is again.

[kvlschaefer]

Hi @BenStark,

Thank you for the link to your page and the screenshot!

I wanted to invite our subject matter experts to see if they have advice.

Hi @TomM2, @Anton, @Teun - Do you have any insight for @BenStark?

Thank you!

Best,

Kristen