topic HubSpot ROI Calculator Partner website in Blog, Website & Page Publishing

HubSpot ROI Calculator Partner website

stacy_jenkins — Tue, 30 May 2023 21:44:30 GMT

I am adding the HubSpot ROI calculator for Partners to our website. I followed the instructions: https://docs.google.com/document/d/1whdIylKzD3Vsl_siVQXd-bEDC_BQeydchtMhv8xPpow/edit?usp=sharing

Everything works, but I hate the scroll bars for this widget.

Step 7 says I can change the height of the widget to full page. I am using Divi in WordPress. I am unsure how "the height of the container would need to be overridden." I understand how to add custom CSS, but I am missing the step on how to override the embedded javascript. I am sure it is something simple and I am missing it. Has anyone else added this HubSpot calculator and made it full page view in Divi? I'd appreciate your expertise.

Thank you!!

Re: HubSpot ROI Calculator Partner website

Jnix284 — Wed, 31 May 2023 00:36:31 GMT

Hi @stacy_jenkins you'll need to add this code to the CSS, no need to change the javascript.

Desktop: #hs-roi-calculator-embed > div > div { height: 2580px!important; } Tablet: @media (max-width: 1015px) { #hs-roi-calculator-embed > div > div { height: 3380px!important; } } Mobile: @media (max-width: 570px) { #hs-roi-calculator-embed > div > div { height: 4950px!important; } }

This article explains how to add CSS to Divi - option 2 and 3 would be the best and easiest ways.

Hope this helps!

Re: HubSpot ROI Calculator Partner website

stacy_jenkins — Wed, 31 May 2023 01:11:05 GMT

I appreciate your help and time. The steps you shared are what happen after
you disable the javascript. I already went to the advanced tab of the
module and under Custom CSS Main Element, I added the height and max-width
parameters given in the instructions on the Google Doc. With Divi, you
don't paste the code with braces, we need to input the parameters. I did
this for each device type. So, how do I override the javascript, or how
does the pasted HubSpot code point to the advanced CSS in Divi? I am
missing one step somewhere. Any thoughts?

Re: HubSpot ROI Calculator Partner website

stacy_jenkins — Wed, 31 May 2023 02:05:27 GMT

I found part of the solution. https://diviengine.com/how-to-escape-custom-css-in-divi-modules-a-guide-to-advanced-styling/. The open and close curly braces are already there in the Divi Advanced CSS. I just needed to know about the close curly brace to start. "A single curly brace will escape the CSS in the area you are working in." I knew it had to be something simple. The ROI calculator now fills the majority of the page. It still cuts off a little before the end, but it's better. I can tweak a little more too. Thank you! Please let me know if you find anything else.

Re: HubSpot ROI Calculator Partner website

Jnix284 — Thu, 01 Jun 2023 01:50:19 GMT

I'm sorry I didn't get your other message @stacy_jenkins , I only got a notification for the second one that said you found part of the solution 😞

Can you share a link to the page where you have it added, I can look to see if there is anything you can do to modify the code so it doesn't cut off at the very end.

Re: HubSpot ROI Calculator Partner website

stacy_jenkins — Thu, 01 Jun 2023 12:27:43 GMT

Thank you! This is just my rough website, so far. https://staging.marketingmonsoon.com/hubspot-roi-calculator/

Re: HubSpot ROI Calculator Partner website

Jnix284 — Thu, 01 Jun 2023 13:38:00 GMT

@stacy_jenkins

I looked back at the break points and desktop is set to 2580, which is very specific, but when I measure the iFrame content with a screenruler, it looks to be just over 2600 - since it's so long, it's not easy to get an exact measurement, so before we try anything else, would you test what happens if you change the CSS from 2580 to something much greater, like 2700, so we can see if that eliminates the scroll bar?

If we can verify that we can remove the scroll bar, we can then fine tune the height of the iframe.

Re: HubSpot ROI Calculator Partner website

stacy_jenkins — Thu, 01 Jun 2023 13:49:53 GMT

I tried from 0 to 4000, nothing changed and the scroll bar remained in place.

Re: HubSpot ROI Calculator Partner website

Jnix284 — Thu, 01 Jun 2023 14:15:21 GMT

@stacy_jenkins it's most likely coming from the browser then, but one last thing we can try is changing the initial height in the iframe script (even though it says 100% for the height, it also says 800 initially) - if we change the 800 px to the 2700 px, then the browser won't be responsible for taking the iframe and rendering it based on the media query...without knowing more about the script on the backend, that's the best I can think of. If that doesn't work, it would take a more experienced developer than I am to resolve