Last updated: September 17, 2024
Available with any of the following subscriptions, except where noted:
Content Hub
Professional
,
Enterprise
|
With the content embed feature, you can create sections of content in HubSpot, then embed them into your website. To add a content embed to an external website page, you can either use the content embed plugin for WordPress's Gutenberg editor, or copy the embed code directly in HubSpot. Below, learn more how to copy the content embed code, along with best practices for maintaining your page's Cumulative Layout Shift (CLS) score.
Please note: embedded content is not loaded through an iframe, but is injected via JavaScript. Search engines can execute JavaScript and will pick up on the embedded content, therefore avoiding any SEO challenges that iframes can present.
Copy the embed code
To copy the embed code for a content embed section:
- In your HubSpot account, navigate to Content > Embeds.
- Hover over an embed, then click More and select Get Embed Code.
- In the dialog box, click Copy to copy the embed code.
You can then paste the embed code into your external content as needed.
Please note:
- A content embed receives its styling from the page it's embedded on, not from HubSpot. To adjust the content embed's appearance, you'll need to update the page's CSS. If you're using WordPress, learn how to add custom CSS.
- The content embed code does not include your HubSpot tracking code. You'll need to separately install the tracking code on external pages to take advantage of HubSpot features such as traffic analytics and private consent banners.
Understand best practices for embedding content
Depending on how you use the embed code, it's possible that the content may impact your page's Cumulative Layout Shift (CLS) score, which measures how much your page content moves around in the visitor's viewport while loading. There are two factors that will impact your CLS score:
- The location of the embed, including whether it's above or below the fold and where the script is embedded.
- The height of the embed, which is directly related to the modules included in the content embed. The more modules that are included, the more your page layout may shift as content loads.
If you're seeing a negative impact on your CLS score after embedding content, review the best practices sections below for potential solutions.
Embed below the fold
When possible, content should be embedded below the fold of the page. This is because CLS score applies to above-the-fold content, since that's typically what the visitor sees on initial page load. Embedding content below the fold will reduce any initial layout shift caused by the content embed, improving user experience and mitigating negative CLS score.
Change the embed script location
By default, the content embed code includes the embed script within it (line 2 below).
<div id="hs-embed-61405464936-1wgzc8"> <script type="text/javascript" src="[EMBED SCRIPT SRC]">
</script> <script> hbspt.content.create({...}); </script></div>
When embedding content on an external page, it's recommended to move the embed script to the <head> of the page rather than next to the embed creation script.
Set a minimum height
The height of the content embed container will impact how much the content around it shifts while loading. The height of the container depends on the modules and content included — the more content in the embed, the more the page will shift.
For this reason, if you're embedding your content above the fold, it's recommended to set a minimum height of the embed by including an inline min-height CSS rule in the embed container wrapper.
If you're embedding content into an external CMS, there may be layout options available to you in the external page editor to update the embed height. Otherwise, you can manually add this styling to the embedded content's top-level <div>, as shown below.
<div id="hs-embed-61405464936-1wgzc8" style="min-height: 500px;"> <script type="text/javascript" src="[EMBED SCRIPT SRC]"></script> <script> hbspt.content.create({...}); </script></div>
Please note: if you customize the embedded content on a per-page basis, you may need to update the minimum height rule on each page so that the content displays properly.
To find the minimum height, you can inspect the page where the content is embedded. For HubSpot pages, you can use the page preview feature to find the minimum height before publishing the page. Learn more about previewing content in WordPress.
While viewing the page with the content embedded:
- Right-click the content embed, and select Inspect.
- In the inspector panel, hover over the top-level
<div>of the embedded content. - To view the calculated height, some browsers will display the height of the container on hover, or you can click the Computed tab in the developer tools drawer and look for the height attribute.
