# Remove frame from scheduling meeting embed

**URL:** <https://community.hubspot.com/t/remove-frame-from-scheduling-meeting-embed/120479>\
**Category:** APIs & Integrations\
**Tags:** cms-content, forms, professional\
**Created:** [November 14, 2024, 9:39am UTC](https://community.hubspot.com/t/remove-frame-from-scheduling-meeting-embed/120479 "2024-11-14T09:39:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ventit1](https://avatars.discourse-cdn.com/v4/letter/v/e5b9ba/32.png) [@ventit1](https://community.hubspot.com/u/ventit1)\
**Post date:** [November 14, 2024, 9:39am UTC](https://community.hubspot.com/t/remove-frame-from-scheduling-meeting-embed/120479/1 "2024-11-14T09:39:34Z")

</div>

**Context:** We would like to use HubSpot meeting form on our integrations page and would like them to look similar to [Amaka](https://amaka.com/integrations/square/quickbooks/) and [Bookkeeper](https://www.bookkeep.com/accounting-automation-for-shopify-ecommerce-brands/)

.  
Right now we created the meeting form, connected to calendar and set up it with an embed code, however it doesn’t look the same (additional Frame added). We tried to make changes inside HubSpot setting, but there’s nothing to set up it. Also I tried to change css styles with !important, but this is the first time in my life it didn’t work. Can someone help resolving it please?

Test page: [Hassle-Free Afterpay Xero Integration with Synder](https://integrations-d4924c.webflow.io/xero-afterpayn)  
Screenshot: 1st form is from our sales team that has to be inserted without additional frame, 2nd one is mine with no frame initially (exactly how it should look like)

 ![HubSpot meeting scheduler.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/0/054b1be73c4f46dc2f81b81d2d2571f5d4beb011.png)

---

<div class="post-metadata">

**Author:** ![OllyB](https://avatars.discourse-cdn.com/v4/letter/o/6de8d8/32.png) [@OllyB](https://community.hubspot.com/u/OllyB)\
**Post date:** [November 14, 2024, 10:56am UTC](https://community.hubspot.com/t/remove-frame-from-scheduling-meeting-embed/120479/2 "2024-11-14T10:56:36Z")

</div>

> * * *
> 
> [@](https://aeroshield.me/how-to-watch-hotstar-in-uae-dubai/)[v](https://x.com/roobet2025?lang=en)[e](https://medium.com/@vpnprivacy.services/is-it-worth-to-build-a-shelter-on-hawaii-bbb6c6177aa4)[n](https://sahrzad.online/how-to-unblock-badoo-in-uae-dubai-oman-saudi-arabia-and-others/)[t](https://www.facebook.com/roobetpromoreferralcode777)[i](https://aeroshield.me/how-to-unblock-tinder-in-uae-dubai/)[t](https://aeroshield.me/duelbits-referral-promo-code/)[1](https://aeroshield.me/rollbit-promo-codes/) wrote:
> 
> **Context:** We would like to use HubSpot meeting form on our integrations page and would like them to look similar to [Amaka](https://amaka.com/integrations/square/quickbooks/) and [Bookkeeper](https://www.bookkeep.com/accounting-automation-for-shopify-ecommerce-brands/)
> 
> .  
> Right now we created the meeting form, connected to calendar and set up it with an embed code, however it doesn’t look the same (additional Frame added). We tried to make changes inside HubSpot setting, but there’s nothing to set up it. Also I tried to change css styles with !important, but this is the first time in my life it didn’t work. Can someone help resolving it please?
> 
> Test page: [Hassle-Free Afterpay Xero Integration with Synder](https://integrations-d4924c.webflow.io/xero-afterpayn)  
> Screenshot: 1st form is from our sales team that has to be inserted without additional frame, 2nd one is mine with no frame initially (exactly how it should look like)
> 
> ![HubSpot meeting scheduler.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/0/054b1be73c4f46dc2f81b81d2d2571f5d4beb011.png)

> * * *

Embedding HubSpot meeting forms often results in an iframe that can be challenging to style due to its isolation from your website’s CSS. To achieve a seamless integration similar to Amaka and Bookkeeper, consider the following approaches:

1. **Use Raw HTML Forms** : HubSpot allows you to embed forms as raw HTML, which enables direct styling without the constraints of an iframe. To implement this:

By embedding the form as raw HTML, you can apply your custom CSS directly to the form elements, ensuring consistent styling with your website.

[HubSpot Community](https://community.hubspot.com/t5/CMS-Development/Form-fixing/m-p/564223)

1. **Adjust the Embed Code** : If using raw HTML isn’t feasible, you can modify the iframe’s attributes to better align with your site’s design:

These adjustments can help the embedded form blend more naturally with your page’s aesthetics.

1. **Custom CSS Application** : When embedding forms, ensure that your custom CSS is correctly applied:

This direct application allows for precise control over the form’s appearance.

[HubSpot Community](https://community.hubspot.com/t5/CMS-Development/How-do-I-add-custom-CSS-to-a-Hubspot-form/m-p/421178)

1. **Consult HubSpot Resources** : HubSpot’s community forums and knowledge base are valuable resources for troubleshooting and best practices:

Engaging with these resources can provide insights and solutions tailored to your specific needs.

By implementing these strategies, you can enhance the integration of HubSpot meeting forms into your website, achieving a cohesive and professional appearance.

---

<div class="post-metadata">

**Author:** ![ventit1](https://avatars.discourse-cdn.com/v4/letter/v/e5b9ba/32.png) [@ventit1](https://community.hubspot.com/u/ventit1)\
**Post date:** [November 14, 2024, 11:10am UTC](https://community.hubspot.com/t/remove-frame-from-scheduling-meeting-embed/120479/3 "2024-11-14T11:10:36Z")

</div>

1 - This isn’t a form, but meeting scheduler, there;s no raw html option.

2 - Didn’t work

3 - Again, not raw HTML, but iframe

4 - It’s what I’m doing right now :))))

---

<div class="post-metadata">

**Author:** ![ventit1](https://avatars.discourse-cdn.com/v4/letter/v/e5b9ba/32.png) [@ventit1](https://community.hubspot.com/u/ventit1)\
**Post date:** [November 14, 2024, 11:33am UTC](https://community.hubspot.com/t/remove-frame-from-scheduling-meeting-embed/120479/4 "2024-11-14T11:33:40Z")

</div>

So I sloved it with a simple code. The thing is to make styles BEFORE js hubspot script builds the iframe. Here is the embed worked: \<div class=“meetings-iframe-container” data-src=“[https://meetings.hubspot.com/synder/intro-call-with-synder-team-integrations?embed=true](https://meetings.hubspot.com/synder/intro-call-with-synder-team-integrations?embed=true)”\>  
\<iframe src=“[https://meetings.hubspot.com/synder/intro-call-with-synder-team-integrations?embed=true](https://meetings.hubspot.com/synder/intro-call-with-synder-team-integrations?embed=true)” width=“100%” data-hs-ignore=“true” style=“min-width: 312px; min-height: 615px; height: 715px; border: none;”\>\</iframe\>  
\</div\>  
\<script type=“text/javascript” src=“[https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js](https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js)”\>\</script\>