How do I embed HTML in a Ghost post?

Ghost's editor is card-based. Type a forward slash and choose HTML, or click the plus icon and select HTML card. Paste the iframe snippet into that card — Ghost renders it as raw HTML on the published post.

Will the embed match my Ghost theme's width?

Most Ghost themes cap post content at a fixed reading width. The iframe will sit inside that width by default; set the iframe or its wrapper to width 100% so it fills the available column instead of using a fixed pixel width.

Does this work on Ghost(Pro) as well as self-hosted Ghost?

Yes. The HTML card behaves the same on Ghost(Pro) hosting and on self-hosted installs — it's a core editor feature, not a plugin.

For Ghost

Interactive hotspot images inside Ghost posts.

Ghost's HTML card takes raw iframe embeds without a plugin. Paste it into a post and readers get a clickable diagram instead of a flat screenshot.

Start free See the live editor

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

HTML card, built in

Every Ghost editor has an HTML card by default — no theme edits or member-only integrations needed.

Works with any theme

Because it's plain HTML inside the post body, it inherits the theme's content column width automatically.

Good for newsletters too

Ghost's email version of a post strips iframes, but the same post on the web keeps the interactive embed live for readers who click through.

What you get

No plugin or theme.gscss changes required
Works on Ghost(Pro) and self-hosted Ghost equally
Fits inside the post's normal content width
Good for long-form explainer and tutorial posts
Update the hotspot image without republishing the post

Where it fits in a Ghost publication

Ghost is popular with independent writers and publications doing long-form explainers, tutorials, and product breakdowns — content where a single well-annotated image can replace several paragraphs of description. A hotspot image inside a tutorial post lets you label UI elements or diagram steps in place, instead of numbering a screenshot and writing "see arrow 3 below." It also holds up better in RSS readers and link previews than a series of cropped screenshots, since it's one embed instead of five images. Learn more about the format on what is an interactive image.

Setup at a glance

Ghost · HTML card inside any post or page

Time: About 4 minutes
Requirement: Ghost(Pro) or self-hosted Ghost — no plugin needed

Card: HTML
Hosting: Ghost(Pro) & self-hosted
Newsletter: Falls back to the image

Step by step

How to add an interactive image to Ghost

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

01
Upload your image
Create the interactive image and upload the visual for your post.
02
Add annotated hotspots
Drop a dot on each detail you'd normally explain in a caption, and write the card content.

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
Add an HTML card
In the Ghost editor, type /html on a new line and paste the snippet into the card.
05
Publish the post
Publish and read the post on desktop and phone. Readers can tap hotspots inline without leaving the article.

Troubleshooting

Fixes for the Ghost issues people hit

The embed is narrower than my images

Ghost themes cap content width. Wrap the card in a full-width or wide card if your theme supports it, and keep the iframe at width 100%.

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