Can I embed a Hubspot landing page into Wordpress?

[RHirani80]

Hello Hubspot experts,

I am trying to add a Hubspot landing page to a Wordpress page, by way of an iFRAME or an embed code.

Is that possible?

Is there a different way to accomplish that?

[himanshurauthan · Accepted solution]

Hey RHirani80,

You can use HubSpot landing pages in WordPress, you just need to create an iframe and add landing page URL to iframe src with height and width, and then simply use that iframe in your WordPress site.

Example:

<iframe src="https://hubspot-sites.com/landing-page" height="200" width="1200" title="Iframe Example"></iframe>

Regards,

[GiantFocal]

Even though this is an old discussion, just sharing my thoughts in case someone needs additional insights.

Instead of embedding a page in an iFrame on a WordPress site, it's better to connect a subdomain to HubSpot and link directly to it.

iFrame-based pages not only load slowly (as they technically load two websites), which will definitely have an impact on your landing page conversion, but they also offer zero search engine optimization.

In contrast, hosting your landing pages on a separate subdomain on HubSpot provides you with all the benefits.

For instance, here is a typical setup:

domain.com -> WordPress

marketing.domain.com -> HubSpot

Best regards,

Abraham @ GiantFocal

[Indra]

@GiantFocal,

Your completely right. If it's possible to set the landingpage up as an (sub)domain it's always best to go for that option. If not then they can go for the iframe solution. But that isn't recommended seo wise.

[Studio8]

Hi, I'm hoping someone could help with my landing page on wordpress.

I have added the below code to a HTML block on a Wordpress page

<iframe src="http://27150482.hs-sites-eu1.com/pdm-solution-test-drive-in-2024" width="100%" style="height:100vh;" title="Iframe Example"></iframe>

The wordpress page is https://www.diagsol.co.uk/pdm-test-drive/ but it isn't pulling through the landing page.

I tested this a week ago and it worked, I then made the page a draft page in Wordpress as we weren't ready to go live. Now I have published the wordpress page again it doens't work.

Could anyone offer some advice?

Much appreciated in advance

Thanks

Stu

[Indra · Accepted solution]

Hi @RHirani80,

If you want the landing page to be full screen, make sure your body has a margin of 0 and set an overflow hidden.

So your css will be like:

body{
  margin: 0;
  overflow: hidden;
}

Also for your iframe, make sure it's full with and has a height of 100vh like:

<iframe src="https://hubspot-sites.com/landing-page" width="100%" style="height:100vh;" title="Iframe Example"></iframe>

 Make sure the height is set by the style, otherwhise the 100vh won't work.

You can see a working example example at this codepen

[himanshurauthan · Accepted solution]

Hey RHirani80,

You can use HubSpot landing pages in WordPress, you just need to create an iframe and add landing page URL to iframe src with height and width, and then simply use that iframe in your WordPress site.

Example:

<iframe src="https://hubspot-sites.com/landing-page" height="200" width="1200" title="Iframe Example"></iframe>

Regards,

[webdew]

Hi @RHirani80 ,

You need to use plugin, please refer the link: https://blog.hubspot.com/website/iframe-wordpress-plugin

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[CanadianClub]

I am experimenting with HubSpot landing pages on Wordpress too. 

At this time,  I am a free Hubspot user who is not renewing my Salesforce Essential contract in Feb.  I am trying to put my Hubspot landing page on my Wordpress website using the Simple IFrame plug-in.  I have tested the HS landing page as a link on my wordpress site and it works fine with a redirect (instead of a thank you) to a WP download page once the associated form is filled out.   I created a blank WP page and titled it IFrame.  I created a Simple IFrame block on the page.  I  have added the url to the IFrame URL box in the plug-in along with the 1200 x 200 size parameters that were specified.   I am expecting to to see the landing page in the block but nothing happens.  What am I doing wrong?

Below is the code that Simple IFrame generated when I clicked code view. 

 ****************************************************************************************************

<!-- wp:unapersona/simple-iframe {"iframeSrc":"http://takingcareofcanadianbusiness-1.hubspotpagebuilder.com/ccaas6-12","iframeWidth":"1200","iframeHeight":"200","allowFullscreen":false,"useLazyload":false,"useImportant":false} -->
<iframe style="width:1200;max-width:1200;height:200" src="http://takingcareofcanadianbusiness-1.hubspotpagebuilder.com/ccaas6-12" class="" frameborder="0"></iframe>
<!-- /wp:unapersona/simple-iframe -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

*************************************************************************************************

Your insights would be greatly appreciated.

Barry T.

[Indra]

Hi @CanadianClub,

You can try changing the values from your Gutenberg fields to:

<!-- wp:unapersona/simple-iframe {"iframeSrc":"http://takingcareofcanadianbusiness-1.hubspotpagebuilder.com/ccaas6-12","iframeWidth":"100%","iframeHeight":"100vh","allowFullscreen":false,"useLazyload":false,"useImportant":false} -->
<iframe style="width:100%;max-width:100vh;height:100vh" src="http://takingcareofcanadianbusiness-1.hubspotpagebuilder.com/ccaas6-12" class="" frameborder="0"></iframe>
<!-- /wp:unapersona/simple-iframe -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

[natsumimori]

Hi  @RHirani80 , thank you for your post.

@Kevin-C and @webdew > Would you mind sharing your advise for @RHirani80 ?