← Back to blog

How to Add an Interactive Demo to Ghost

August 19, 2026

Ghost is one of the easier platforms for this: the editor has an HTML card, and it does not strip iframes.

The decision worth thinking about is not how, but where -- a demo inside a post behaves quite differently from one on a landing page.

Inside a post or page

In the editor, add an HTML card and paste your embed code. Ghost renders it as-is, and the card previews live so you can confirm before publishing.

Give the iframe `width: 100%` and an explicit aspect ratio. Ghost themes are content-width constrained, so a fixed pixel width will overflow on narrow screens.

A demo inside a post is a different thing

Readers arrive at a post for the writing, not for your product, so an embed mid-article competes with what they came for. That is fine when the demo IS the point -- a feature announcement, a tutorial -- and intrusive when it is not.

For posts where the demo is supporting evidence rather than the subject, a linked card converts better than an embed and keeps the reading experience intact.

Site-wide placement

  • Code injection in Ghost settings adds markup to every page, which is right for analytics and wrong for a demo.
  • Theme editing is the honest route for a demo on your homepage: edit the theme templates directly.
  • A dedicated page with just the demo and a call to action is usually the better answer, and needs no theme work at all.

Newsletter sends

If your Ghost post goes out as an email, the HTML card will not survive it. Email clients strip iframes, so subscribers get nothing where the demo was.

Put a linked image above the embed for that reason. Web readers see both; email readers see an image that takes them to the demo.

Frequently asked questions

Can you embed an interactive demo in Ghost?
Yes. Add an HTML card in the editor and paste the iframe embed code -- Ghost renders it without stripping anything. Set width to 100% with an explicit aspect ratio, since Ghost themes are content-width constrained.
What happens to a Ghost embed when the post is emailed?
It disappears. Email clients strip iframes, so newsletter subscribers see nothing where the demo was. Put a linked image above the embed so email readers get something clickable.
Should the demo go in a post or on its own page?
A post if the demo is the subject, such as a feature announcement or tutorial. If it is supporting evidence for something else, a linked card converts better and does not compete with what the reader came for.

Keep reading

This is what Demorta does

Click through it — the same kind of demo you can record of your own product.

Try it on your own product

Record your first interactive demo free.

Five demos on the free plan, forever. No credit card, no trial countdown, no sales call. Install the Chrome extension, click through your product once, and you have a shareable link in about ten minutes.

Start free →