Embedding GuideGhost CMS

How to Embed a Widget in Ghost

Ghost's card-based editor makes embedding third-party HTML and iframes straightforward. This guide walks you through both the HTML card (recommended for Embeddy widgets) and the built-in Embed card, plus how to restrict widget visibility to specific membership tiers.

1. Prerequisites

  • •An active Embeddy account with at least one published widget.
  • •A Ghost site (Ghost.org hosted or self-hosted) where you have Editor or Administrator access.
  • •Your Embeddy iframe embed code — copy it from your widget's Embed tab in the dashboard.

Your embed code looks like this:

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

Replace WIDGET_ID and PROPS_ID with the actual values from your dashboard — they are pre-filled when you copy the code.

2. Method 1 — HTML Card (Recommended)

The HTML card lets you paste any raw HTML — including iframes, scripts, and third-party widget snippets — directly into your Ghost post or page. This is the most reliable method for embedding Embeddy widgets.

Why this method? The HTML card renders your code exactly as written. Ghost does not sanitise or modify the HTML inside it, so your iframe and any inline attributes (width, height, frameborder) are preserved.

  1. 1

    Open your Ghost Admin

    Navigate to https://your-ghost-site.com/ghost and sign in. Go to Posts or Pages and open (or create) the content where you want the widget.

  2. 2

    Open the card menu

    Click the (+) icon that appears when you hover on a new line in the editor, or type / to open the card search inline.

  3. 3

    Select the HTML card

    In the card menu, search for "HTML" and click it. A text area with a grey background will appear in your editor.

  4. 4

    Paste your Embeddy iframe code

    Click inside the HTML card text area and paste your embed code. The card will show a live preview once you click outside it.

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

    Publish or update

    Click Publish for a new post, or Update for an existing one. Visit the live URL to confirm the widget renders correctly.

3. Method 2 — Embed Card via URL

Ghost's Embed card is designed for pasting URLs to supported platforms (YouTube, Spotify, Twitter, etc.) so they render as rich embeds. You can also use it with Embeddy's direct embed link URL.

Note: The Embed card uses oEmbed/iframe detection. If Ghost does not automatically render the Embeddy URL as an embed, fall back to Method 1 (HTML card) which always works.

  1. 1

    Copy your direct embed URL

    In the Embeddy dashboard, copy the direct embed link (not the full iframe tag — just the URL):

    https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID
  2. 2

    Add an Embed card

    Click the (+) card menu and select Embed. An input field will appear.

  3. 3

    Paste the URL and press Enter

    Paste your Embeddy direct embed URL into the Embed card input and press Enter. Ghost will attempt to load a preview.

If the Embed card shows an error or blank space, switch to the HTML card method above — it gives you full control over the iframe dimensions and attributes.

4. Member Visibility Control

One of Ghost's most powerful features is granular visibility control for individual cards. You can restrict your Embeddy widget so it only appears to specific membership tiers — for example, showing a premium interactive quiz only to paid members.

How to set card visibility

  1. 1

    Click on your HTML card to select it.

  2. 2

    In the card toolbar that appears above or below the card, click the eye icon.

  3. 3

    Choose one of the visibility options: Public (everyone), Members only (free + paid), or Paid members only.

  4. 4

    Save and publish. Ghost will automatically show or hide the card based on the viewer's membership status.

Public

Visible to all visitors, including anonymous readers.

Members only

Visible to any signed-in member (free or paid tier).

Paid members only

Visible only to subscribers on a paid membership tier.

5. Troubleshooting

Widget not showing on live site

Make sure the post or page has been published (not just saved as draft). Ghost does not render custom HTML cards in preview mode for unpublished posts.

HTML card shows blank space

Check that the iframe src URL is correct. Open browser DevTools > Console and look for blocked content or mixed-content warnings. Ensure your Ghost site is served over HTTPS.

Widget is cut off vertically

Increase the height attribute in your iframe code. For widgets with dynamic content (e.g. carousels that expand), consider setting a taller fixed height or using a percentage-based height with a wrapper div.

Widget appears on wrong membership tier

Re-click the HTML card, open the eye icon in the card toolbar, and double-check the selected visibility tier. Ghost applies these restrictions on the server side, so they are reliable.

Theme overrides iframe width

Some Ghost themes apply max-width or overflow: hidden to content containers. Try wrapping the iframe in a <div style="width:100%;overflow:hidden"> or contact your theme developer.

6. FAQ

Can I embed multiple Embeddy widgets on the same Ghost page?

Yes. Add a separate HTML card for each widget. Ghost places each card as an independent block, so there is no conflict between multiple iframes.

Is there a character limit for the HTML card?

Ghost does not document a hard character limit for the HTML card. A standard Embeddy iframe snippet is well within any practical limit.

Will the widget work in Ghost's email newsletter?

No. Ghost strips custom HTML (including iframes) from email sends. The widget will only render on the web version of your post. Consider adding a text CTA and link directing email readers to the live post.

Can I use the HTML card in Ghost pages (not just posts)?

Yes. The HTML card is available in both posts and pages in Ghost. The embedding process is identical.

Does embedding an iframe slow down my Ghost site?

Iframes load asynchronously in modern browsers, so they do not block page rendering. Embeddy widgets are served from a fast CDN. For best performance, place the iframe below the fold where possible.

Ready to embed on Ghost?

Build your widget in minutes with Embeddy's no-code editor, then drop the iframe code into your Ghost HTML card.

Start for Free
PreviousWebflowNextHubSpot