Embed Substack on Ghost

Ghost supports custom HTML and JavaScript through Code Injection (site-wide) and HTML cards (per-post or per-page). Both work for Supascribe embeds. Code Injection is the simplest route for a subscribe form that appears across your site.

#What You Can Add to Ghost

• Subscribe Form — a custom-branded email capture form that adds subscribers to your Substack list
• Feed Widget — your latest Substack posts shown automatically on any page, updating when you publish
• Popup Form — a subscribe overlay triggered by exit intent, scroll depth, or time on page

#Step 1: Create Your Embed in Supascribe

1. Sign up at Supascribe — free to start
2. Connect your Substack publication
3. Choose your embed type: Subscribe Form, Feed Widget, or Popup
4. Customise the colours, fonts, and button text
5. Click Publish to generate your embed code

Your snippet looks like this:

<div data-supascribe-embed-id="abc123" data-supascribe-subscribe></div>
<script src="https://js.supascribe.com/v1/loader/example.js" async></script>

#Step 2: Add the Embed to Ghost

#Option A: Code Injection (site-wide — recommended)

Use this to add the form globally — it will be available on every page of your Ghost site. You control where the form visually appears by adding the div to individual posts or pages separately (see Option B), while the script loads once from Code Injection.

To inject site-wide:

1. In your Ghost admin panel, go to Settings
2. Click Code Injection
3. Paste your full Supascribe snippet into the Site Footer field:

   <div data-supascribe-embed-id="abc123" data-supascribe-subscribe></div>
   <script src="https://js.supascribe.com/v1/loader/example.js" async></script>

4. Click Save

#Option B: HTML Card (page-level)

Use this to add the embed to a specific post or page without affecting the rest of your site.

1. Open a post or page in the Ghost editor
2. Click + (add block button) in the editor
3. Search for HTML and select the HTML card
4. Paste your full Supascribe snippet into the card:

   <div data-supascribe-embed-id="abc123" data-supascribe-subscribe></div>
   <script src="https://js.supascribe.com/v1/loader/example.js" async></script>

5. Click outside the card to close the editor
6. Save and Publish your post

The HTML card works on all Ghost plans — including free self-hosted Ghost — with no restrictions.

#Option C: Theme Files (self-hosted Ghost only)

If you run self-hosted Ghost and want the embed hardcoded into your theme:

1. Open your theme directory
2. Edit default.hbs (applies to all pages) or post.hbs (applies to posts only)
3. Paste the script tag before the closing </body> tag
4. Place the div wherever the form should appear in the template

#Step 3: Test It

After saving, open the page in an incognito window. The subscribe form or feed widget should render correctly. Submit a test email to confirm it appears in your Supascribe dashboard and your Substack subscriber list.

If the form doesn't appear:

• Confirm the script tag and div are both present (not one without the other)
• Check that Code Injection was saved successfully
• View the page source and search for your embed ID

#Ghost-Specific Tips

Membership visibility

Ghost lets you control who sees HTML card content: all visitors, free members, or paid members only. If you want the subscribe form visible to everyone (including non-members), leave the card visibility set to Public.

Redirect after sign-up

Set a custom redirect URL in Supascribe before generating your snippet. This sends new subscribers to a thank-you page, a curated post selection, or a lead magnet — rather than Ghost's default page or a generic Substack confirmation screen.

Exit popup placement

For the popup embed, placement in the HTML card doesn't determine where the popup appears visually — the Supascribe script handles the overlay positioning. Add the popup div anywhere in the page structure or load it via Code Injection.

Multiple embeds on one site

If you have a subscribe form on posts and a feed widget on your homepage, the script tag only needs to load once. Add it to Code Injection Site Footer once, then use only the div in each HTML card.

#Explore Other Embed Options

#Need Help?

• Email: [email protected]
• Twitter: @0xGideon