topic Re: Removing padding on Meeting Scheduler embed UI in APIs & Integrations

Removing unnecessary whitespace on Meeting Scheduler embed UI

DanielZarick — Wed, 13 Mar 2024 23:45:46 GMT

Hi there!

I'm one of the co-founders of Arrows, a HubSpot Ventures portfolio company, and we work very closely with the HubSpot platform.

Below you'll see two images where we embed a HubSpot meeting scheduler on our website and inside our product (we also allow any user to embed their HubSpot meeting scheduler in their own Arrows onboarding plans).

I've added a red border around the <div> which wraps the HubSpot scheduler embed, so you can see how much unnecessary padding and margin is added.

Is it possible for the Meeting Scheduler embed to have zero padding or margin on it? This would be a huge UI improvement for us and our shared customers.

Re: Removing padding on Meeting Scheduler embed UI

Jnix284 — Wed, 13 Mar 2024 18:27:00 GMT

Hi @DanielZarick you can try to overwrite the embed class that's being used to control the height of the meetings embed.

There is no padding added to the class, the height is set to "auto" and when I overwrite to 630px it removes the padding below and doesn't crop the calendar (it was hard to tell if 631px was adding padding or cropping) - either way it did the trick:

.hs-embed-wrapper { height: 630px; }

With that said, changing from "auto" messes with responsiveness, so you're going to want to add media queries for each breakpoint to set the height based on the corresponding width.

Hopefully you or your devs can take it from here 🙂

Re: Removing padding on Meeting Scheduler embed UI

DanielZarick — Wed, 13 Mar 2024 23:45:15 GMT

Hey Jennifer—I'm expecting that HubSpot can fix this on the platform level, as there are multiple divs and containers inside the iframe that have different amounts of padding and margin on them to create the extra white space. This is pretty atypical for an embedded tool (e.g. Youtube doesn't add extra spacing around videos when embedded).

Re: Removing padding on Meeting Scheduler embed UI

Jnix284 — Wed, 13 Mar 2024 23:50:56 GMT

Hi @DanielZarick thanks for clarifying, in that case I would recommend adding your post to the Ideas Discussion where the HubSpot Product Managers check ideas for future improvements.

The other discussions in the community are moderated by Community Managers and answers are provided by other members of the community and it doesn't directly reach the product teams.

It can be a challenge to get visibility to the team for new ideas, getting upvotes and comments will help gain traction quicker - sharing the idea link with your network on LinkedIn would likely do the trick 😉

Re: Removing unnecessary whitespace on Meeting Scheduler embed UI

dvdvd — Tue, 26 Mar 2024 14:58:40 GMT

I also have this problem. @DanielZarick how are you getting the meeting form to have background colors? Mine always shows with a white background, which looks super bad on our off-white marketing site.