Hubspot Embed Code is changing the styling of the rest of my page

Design help Custom code
1

Hi there,

I am running in to a problem I have not experienced before when embedding custom code on to one of my pages.

One of our developers created a custom calculator for a project on Hubspot and provided an embed code so we could add it to our portal. Upon adding the code and publishing, it makes my nav-bar logout button huge and adds a background as well as changes the background colors, size, and font of various other parts of the page. I cannot seem to figure out why or how to stop it from doing this. I’ve used embed codes several times before but i’m running in to this problem with this one for the first time.

Here is what my navbar normally looks like:

image
image452×103 4.89 KB

And here is what happens after publishing my embed code:

image
image488×107 3.76 KB

It also makes the sizing and text colors incorrect in my footer on the page as well:

image
image708×370 13.9 KB

here is what my custom code looks like:

image
image1353×684 123 KB

I tried adding an iframe but that then seems to strip the embed of all styling and doesn’t size correctly.

Any advice or guidance is greatly appreciated. Thank you!

Here is my site Read-Only: Webflow - Iveda Partner Portal

2

Hi William,

Do you have a test login in order to see the navbar change on staging?

https://knowledgebase-4919be.webflow.io/log-in

3

Absolutely. I made the page temporarily available. I think that should work. Thank you

4

I’m not familiar with hubspot’s embedding options but quite commonly embedding is done as an IFRAME to isolate CSS changes to that part of the document.

In your case, you have the CSS directly in your main page, so it’s affecting your elements. That might be a normal setup, or it might not. The main impact seems to be that all buttons are styled.

You can see that [1] [2] is coming from [3] pico.min.css, part of the Hubspot integration.

You could try switching to an IFRAME-based embed, or you could avoid using a <button> element, either would likely mitigate this.

Probably unrelated, but also check out [4] and [5], two separate programming problems that will both affect the operation of your page.

image
image1920×952 158 KB

5

Thank you very much. I tried using an iframe early on but for some reason it then would not display the embed at all. Which I’m guessing is Hubspots fault. I’ll keep trying to play with an iframe and see if I can get that to work.

6

More likely it just didn’t have a size. the content likely loaded but wasn’t visible without a width/height on the iframe. But that’s just a guess, typically the embed too will generate the embed iframe code with usable default settings.