Where do I paste the embed code in HubSpot?

On landing pages and website pages, drag a dedicated HTML module into the layout, or open the source code editor inside a rich text module and paste the iframe there. On blog posts, use the rich text editor's source code view the same way.

Will this work with HubSpot's drag-and-drop page editor?

Yes. HubSpot's CMS pages are built from modules, and the HTML module exists specifically for pasting custom code like this. It sits alongside your other modules on the same drag-and-drop canvas.

Can I use this on a gated landing page tied to a HubSpot form?

Yes. The interactive image is independent of HubSpot's form and smart content logic, so you can place it above or below a form module on the same page without conflicts.

For HubSpot

Hotspot images for HubSpot landing pages.

Drop an HTML module into your HubSpot page builder, paste one iframe, and turn a static screenshot into something prospects click through.

Start free See the live editor

Free forever plan · No credit card · Works in Wix, Webflow, WordPress, Shopify, Squarespace

HTML module, no dev sprint

Marketers can add the embed themselves through HubSpot's drag-and-drop module — no template edit request needed.

Pairs with forms and CTAs

Place the hotspot image above a HubSpot form module to demo a product before asking for an email.

Consistent across pages

Reuse the same embed on a landing page, a blog post, and a knowledge base article without rebuilding it three times.

What you get

Add it yourself via the HTML module — no developer ticket
Works on landing pages, website pages, and blog posts
Safe to place next to HubSpot form and CTA modules
Good for product demo pages and feature comparison content
Update once in Interactive Image, every page reflects it

Where marketing teams use this

HubSpot pages are usually built to move a visitor toward a form fill, and a screenshot of a product dashboard often does the least work of any element on the page. Turning it into a hotspot image gives visitors a reason to interact before they scroll to the CTA — pointing out a feature, a metric, or a workflow step with a short description in a popup. It's a good fit for product marketing pages, feature comparison posts, and gated resource pages that need one strong visual to justify the form. For the broader embed workflow, see the interactive image maker.

Setup at a glance

HubSpot · Rich text module (source code view) or custom HTML module

Time: About 6 minutes
Requirement: CMS Hub, landing pages, or the blog tool

Module: Rich text / HTML
Surfaces: Landing pages, blog, website
Tracking: Use tracked CTA URLs

Step by step

How to add an interactive image to HubSpot

Five steps, no developer. Everything below happens once — after that you edit hotspots in Interactive Image and your HubSpot page updates on its own.

01
Upload your image
Create the interactive image for your landing page or blog post.
02
Build the hotspots
Add a dot per feature with copy, media, and a CTA link pointing at your form or offer.

Copy the snippet

Copy the responsive iframe from the Embed panel.

<div style="position:relative;width:100%;padding-top:56.25%">
  <iframe src="https://interactiveimage.com/embed/YOUR-ID"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
    scrolling="no" loading="lazy"></iframe>
</div>

The Embed panel showing the responsive iframe snippet and a copy button

04
Paste into the editor
Open a rich text module, click the Advanced menu → Source code, and paste the snippet. On drag-and-drop pages you can also add a plain HTML module.
05
Publish and measure
Publish the page. Hotspot CTAs can point at HubSpot forms or tracked URLs so engagement lands in your reports.

Troubleshooting

Fixes for the HubSpot issues people hit

HubSpot stripped my code

The rich text editor sanitizes markup pasted into the visual view. Always paste inside Advanced → Source code, or use a dedicated HTML module.

The embed looks cropped or has scrollbars

The iframe height doesn't match the image aspect ratio. Copy a fresh snippet from the Embed panel — it bakes the exact ratio into a padding-based wrapper — or set the iframe height to width ÷ aspect ratio.

Hotspots look slightly offset from the artwork

That happens when the container letterboxes the image. Interactive Image measures the rendered image box, so hotspots stay glued to the artwork — just make sure you didn't force a fixed height that differs from the image ratio.

Changes aren't showing on the live site

Save in the editor, then hard-refresh the published page. The embed always renders the latest saved version — you never need to re-paste the snippet unless the aspect ratio changed.

Guides for other platforms

The same embed works anywhere you can paste an iframe or a link.

Turn any image into a guided experience.

Free forever plan. Paste one iframe into your site and ship.

Create your interactive image