Embed Substack on Framer

The fastest way to add a Substack subscribe form to your Framer site is Supascribe. Add an Embed component, set the type to HTML, paste your snippet, and publish. Takes about five minutes — and it works on Framer's free plan.

#What You Can Add to Framer

• Subscribe Form — capture email subscribers on your Framer page with custom colours, fonts, and CTA text
• Feed Widget — display your latest Substack posts so visitors can preview your writing before subscribing
• Popup Form — a subscribe popup 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 or Feed Widget
4. Customise the colours, fonts, headline, and button text to match your Framer design
5. Click Publish to generate your embed code

Your dashboard shows a snippet like this:

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

The embed ID and script URL are pre-filled with your account details. Copy the full snippet.

#Step 2: Add the Embed to Framer

1. Open your Framer project
2. Click Insert (the + icon in the top-left toolbar)
3. Scroll to Utilities and select Embed
4. In the right-hand properties panel, set the type to HTML (not URL)
5. Paste your full snippet into the code field
6. Resize and position the component on your canvas
7. Click Publish to make it live

#Step 3: Test It

Framer's canvas editor does not execute JavaScript. The embed appears blank in the editor — a grey placeholder box where the form will be. This is expected behaviour.

To see the form render, click the Play button (Preview) in the top bar. The form renders correctly in preview mode. After publishing, it also renders on your live site.

Submit a test email in preview mode to confirm subscriptions are being captured in your Supascribe dashboard.

#Framer-Specific Tips

Adding both a subscribe form and a feed widget

If you want both on the same page, add two separate Embed components. Paste the full snippet (div + script) in the first. In the second, paste only the div tag — the script only needs to load once:

<!-- First Embed component: full snippet -->
<div data-supascribe-embed-id="abc123" data-supascribe-subscribe></div>
<script src="https://js.supascribe.com/v1/loader/example.js" async></script>
 
<!-- Second Embed component: div only, no script -->
<div data-supascribe-embed-id="abc123" data-supascribe-feed></div>

Custom Code injection vs Embed component

Framer's Page Settings include a Custom Code section where you can inject code into the document head or body. This requires a paid Framer plan. For the Supascribe embed, the Embed component on the free plan works just as well — both approaches produce the same result on your published site.

Redirect subscribers after sign-up

One thing the native Substack embed can't do: send subscribers to a custom page after they sign up. With Supascribe, you can redirect new subscribers to a thank you page, a lead magnet download, or your best posts. Set the redirect URL in your embed settings before generating the snippet.

Match your Framer design

Framer sites often use strong colour contrast and minimal layouts. In Supascribe's embed builder, match your primary button colour and background to your Framer theme for a native look. The live preview shows you exactly how the form will appear before you copy the code.

#Explore Other Embed Options

#Need Help?

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