Does the Supascribe embed work on Webflow's free plan?

The Code Embed element requires a paid Webflow site plan. On the free Starter plan, the element is locked. The site-wide Custom Code option in Project Settings also requires a paid plan. If you're on the free plan, upgrade to any paid site plan and the embed will work.

Why doesn't my embed show in the Webflow designer canvas?

Webflow intentionally doesn't run JavaScript in the designer canvas to prevent unintended side effects while you're building. Your embed will render correctly in Preview mode and on the published site. To test before publishing, go to Project Settings → Custom Code and toggle on 'Run custom code in Preview.'

Should I add the script tag in the page-level embed or in Project Settings?

If you're adding embeds to multiple pages, add the script tag once in Project Settings → Custom Code → Body Code and use only the div in each page-level Code Embed. If you're embedding on one page only, paste the full snippet in the Code Embed element.

Do Substack subscribers added through Webflow sync automatically?

Yes. Every submission through the Supascribe form goes directly into your Substack subscriber list and triggers your standard Substack welcome email.

Can I add the embed to a Webflow CMS collection page?

Yes. Add a Code Embed element to your collection page template in the designer. The embed will appear on every page generated from that collection.

Embed Substack on Webflow

Add a Substack subscribe form, feed widget, or popup to any Webflow site. Step-by-step for page-level embeds and site-wide script loading.

Webflow supports custom HTML and JavaScript through its Code Embed element and Project Settings Custom Code. Paste your Supascribe snippet into either location and publish — the form or feed widget appears on your site immediately.

#What You Can Add to Webflow

Subscribe Form — an email capture form with custom branding, colours, and a post-subscription redirect
Feed Widget — your latest Substack posts displayed automatically, updating whenever you publish
Popup Form — a subscribe popup triggered by exit intent, scroll depth, or time on page

#Step 1: Create Your Embed in Supascribe

Sign up at Supascribe — free to start
Connect your Substack publication
Choose your embed type: Subscribe Form, Feed Widget, or Popup
Customise the colours, fonts, and button text
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>

The embed ID and script URL are pre-filled from your dashboard.

#Step 2: Add the Embed to Webflow

#Option A: Code Embed Element (page-level — recommended)

Use this when you want the embed on a specific page or in a specific location on your layout.

Open your Webflow project in the Designer
Navigate to the page where you want the embed
Click the Add panel (left sidebar)
In the Components section, find Code Embed and click it
Drag it to the correct location in your layout — inside a section, a div block, or directly on the page
Select the Code Embed element and click the code icon in the right panel to open the editor
Paste your full Supascribe snippet
Click Save & Close
Publish your site

#Option B: Site-Wide Script Loading (Project Settings)

Use this if you're adding embeds to multiple pages. Load the script tag once globally, then use only the div in each Code Embed element — no duplicate script loading.

Add the script globally:

Go to Project Settings (gear icon, top-right)
Click the Custom Code tab

Paste your script tag into the Footer Code section:

<script src="https://js.supascribe.com/v1/loader/example.js" async></script>

Click Save Changes

Add the div on each page:

For each page where you want the form to appear, add a Code Embed element with only the div — not the script tag:

<div data-supascribe-embed-id="abc123" data-supascribe-subscribe></div>

#Step 3: Test It

The Webflow designer canvas does not run JavaScript by default — the embed area will appear blank while you're designing. This is expected.

To test before publishing:

Go to Project Settings → Custom Code
Toggle on "Run custom code in Preview"
Click Preview (top-right of the designer) to open your site in a test environment
The subscribe form should render and work in preview mode

After publishing, open your live site in an incognito window and confirm the form appears and submits correctly.

#Webflow-Specific Tips

Placing the embed above the fold

For above-the-fold embeds on your homepage, drop the Code Embed inside your hero section div block. Keep the script loading in Footer Code (Project Settings) for better page performance — the script loads after your visible content instead of blocking it.

Popup embed

The Supascribe popup uses its own triggering logic. Add the popup div anywhere on the page — the exact position in the layout doesn't determine where it appears visually. The script handles the overlay positioning.

Redirect subscribers after sign-up

Set a custom redirect URL in your Supascribe dashboard before generating the snippet. This sends new subscribers directly to a thank-you page, a lead magnet, or a specific post — improving early engagement beyond what Substack's default confirmation screen offers.

CMS collection pages

To add the form to every blog post, drop a Code Embed element into the Collection Page template once. It will appear on every generated post page without any additional steps.

Do not include <html>, <body>, or <head> tags in a Code Embed element. These break the page structure and prevent your embed from rendering.

#Explore Other Embed Options

Any Website (HTML)

Install on any site using plain HTML.

WordPress

Custom HTML block, widget areas, and page builders.

Framer

Embed component setup — works on the free plan.

Carrd.io

Embed element setup — works on the free plan.

Squarespace

Code block and footer code injection.

#Need Help?

Email: [email protected]
Twitter: @0xGideon