Embedding GuideHubSpot

How to Embed a Widget on HubSpot

HubSpot's page editor is powerful but has one key gotcha: the Rich Text Editor strips custom HTML and JavaScript. To embed an Embeddy widget, you must use the Custom HTML module instead. This guide covers three methods — the Custom HTML module for single pages, Design Manager for site-wide snippets, and head injection for script-based embedding.

⚠

Do NOT paste your embed code into the Rich Text Editor

HubSpot's Rich Text Editor sanitises all HTML input. It will silently strip your iframe and any script tags, leaving nothing visible on the published page. Always use the Custom HTML module described in Method 1.

1. Prerequisites

  • •An active Embeddy account with at least one published widget.
  • •A HubSpot account with access to Marketing Hub (Starter or above) or a CMS Hub subscription to edit website pages.
  • •Your Embeddy iframe embed code — copy it from your widget's Embed tab in the dashboard.
  • •The page you want to embed on must be a HubSpot-hosted page (Website Pages, Landing Pages, or Blog Post). External pages embedded in HubSpot CMS via external hosting are not covered here.

Your Embeddy iframe code:

<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0">
</iframe>

2. Method 1 — Custom HTML Module (Recommended)

The Custom HTML module is HubSpot's purpose-built tool for injecting raw HTML, iframes, and scripts into a page. Unlike the Rich Text Editor, it does not sanitise its content.

Use this method when you want to embed a widget on a specific page or landing page. It takes about two minutes and requires no coding beyond pasting the iframe snippet.

  1. 1

    Open the HubSpot page editor

    In HubSpot, go to Marketing > Website > Website Pages (or Landing Pages). Click the name of the page you want to edit, then click Edit.

  2. 2

    Add a module to the page

    In the page editor, click Add module (or click the blue + button in a row/section where you want the widget to appear). The module library panel will open on the left.

  3. 3

    Search for and add the Custom HTML module

    In the module search box, type "HTML". You will see Custom HTML in the results. Drag it onto the page canvas or click the + button next to it.

  4. 4

    Paste your Embeddy iframe code

    Click the Custom HTML module on the canvas. In the left panel, find the HTML text area and paste your Embeddy embed code:

    <iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0">
</iframe>
  5. 5

    Publish the page

    Click Publish in the top-right corner. Important: if the page is unpublished, the Custom HTML module will not be visible to live visitors even if you save the draft.

Reminder: Snippets that are in a draft (unpublished) state are invisible on the live page. Always click Publish — not just Save.

3. Method 2 — Design Manager Snippet

If you want to reuse the same Embeddy widget across multiple pages or templates, create a coded snippet in Design Manager. This is the HubSpot equivalent of a reusable component.

When to use this method: You want the same widget to appear on many pages (e.g. a newsletter signup or live chat widget) without manually adding it to each one.

  1. 1

    Open Design Manager

    Navigate to Marketing > Files and Templates > Design Manager.

  2. 2

    Create a new HTML file or snippet

    In the file tree, right-click a folder and choose New file. Select HTML + HubL as the file type. Give it a descriptive name such as embeddy-widget.html.

  3. 3

    Paste your embed code and save

    Paste your Embeddy iframe into the editor and click Save. You can optionally use HubL for personalisation (e.g. pass a contact property as a URL parameter):

    {# Optional: personalise via HubL #}
{# {% set first_name = contact.firstname %} #}

<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0">
</iframe>
  4. 4

    Include the snippet in your template

    Reference the snippet in any HubL template using the include tag, or add the module to templates in the Design Manager template editor.

4. Method 3 — Page Head Injection

For placing code in the <head> of a single HubSpot page — useful for analytics scripts or initialisation code — use the per-page Advanced settings.

Note: This method injects code into the page <head>, which is useful for scripts but not for rendering visible content mid-page. For placing the widget visually inside the page body, use Method 1.

  1. 1

    Open the page in the editor

    Go to your page in the HubSpot page editor.

  2. 2

    Open Page Settings > Advanced

    Click Settings in the top navigation of the editor, then select the Advanced tab.

  3. 3

    Paste into the Head HTML field

    Find the Head HTML field and paste any script or link tags. Note: an iframe tag placed here will not render visibly — use this only for initialisation scripts.

  4. 4

    Save and publish

    Click Apply, then Publish the page.

5. Troubleshooting

Widget is invisible on the live page

The most common cause is that the page is still in draft/unpublished state. Click Publish. Also verify you used the Custom HTML module, not the Rich Text Editor.

Pasted embed code into Rich Text Editor — now nothing shows

HubSpot silently strips HTML from the Rich Text Editor. Remove the text block, add a Custom HTML module in its place, and paste the iframe code there.

Custom HTML module appears blank in the editor preview

HubSpot sometimes does not render iframe content in the editor preview. Publish the page and check the live URL — the widget will appear there.

Widget is cut off or overflows its container

Adjust the height attribute in your iframe code, or wrap the iframe in a div with overflow: hidden. HubSpot's page columns may also constrain width — check the column width setting in the section editor.

Cannot find the Custom HTML module

The module may be hidden depending on your HubSpot subscription tier or theme. Check with your HubSpot portal admin. Alternatively, use the Design Manager method (Method 2) to create an HTML file directly.

6. FAQ

Can I embed a widget on a HubSpot blog post?

Yes, but with limitations. Blog posts in HubSpot use the Rich Text Editor by default, which strips HTML. You need to add a Custom HTML module to the blog post template in Design Manager, or insert a Custom HTML module within the post body if your theme supports mixed module/rich text layouts.

Will the widget affect my HubSpot page's SEO score?

Iframes are transparent to HubSpot's SEO recommendations. HubSpot injects Custom HTML module content via JavaScript, which modern search engines handle well. The widget itself will not negatively impact your page's SEO score in the HubSpot recommendations panel.

Can I personalise the widget using HubL contact properties?

Yes, if you use Design Manager (Method 2). You can pass HubL variables (e.g. {{ contact.firstname }}) as URL query parameters in the iframe src. Note that HubL variables are only resolved server-side on HubSpot-hosted pages for known contacts.

Can I add the widget to a HubSpot email?

No. Email clients do not support iframes. The widget will not render in HubSpot email sends. Instead, include a link to the live page where the widget is embedded.

Do I need a developer to embed the widget on HubSpot?

No. Method 1 (Custom HTML module) requires no coding — just paste the iframe code. Method 2 (Design Manager) requires basic familiarity with the Design Manager interface but no programming knowledge.

Ready to embed on HubSpot?

Create your widget in Embeddy's no-code builder and paste the iframe code into your HubSpot Custom HTML module in minutes.

Start for Free
PreviousGhostNextElementor