Substack

Connecting Substack to Webflow brings subscription forms, individual post embeds, and full newsletter archives onto your Webflow pages. Visitors subscribe from your own domain. Your latest posts display alongside the rest of your site content. The two platforms split responsibility cleanly: Webflow handles design and hosting, Substack handles email delivery and subscriber management.

This integration is most relevant to independent writers, journalists, content marketers, SaaS founders, and creative professionals who publish newsletters on Substack but want a branded web presence. Webflow agencies also benefit when packaging newsletter setup as part of client website projects.

How to integrate Substack with Webflow

What is Substack? Substack is a publishing platform that lets writers create newsletters and manage subscription-based audiences. Each post publishes to a public Substack website and delivers to subscriber inboxes simultaneously. The platform supports free and paid newsletters, podcasts, video, and short-form social posts called Notes.

Teams and solo creators pair Substack with Webflow when they want full design control over their web presence without giving up Substack's email delivery and subscriber management. The typical setup uses Webflow for the public-facing site and Substack for newsletter operations, keeping both platforms focused on what they do well.

The Substack-Webflow integration supports 3 approaches:

• Code Embed elements handle signup forms, subscribe buttons, and post embeds without writing code.
• Third-party archive tools display full newsletter archives with search and filtering and an auto-updating post feed embed.
• The Webflow Data API gives you full control over CMS content sync, but requires server-side development.

Most implementations combine two or more of these approaches depending on the complexity of the setup.

Add Substack components with Code Embed elements

Substack provides three types of embeddable components: a signup form (iframe), a subscribe button that triggers a modal overlay, and individual post or Note embeds. All three work in Webflow through Code Embed elements placed directly on the page canvas. No API tokens or third-party accounts are required. You copy a snippet from Substack's dashboard, paste it into a Code Embed element in Webflow, and publish.

You can add the element on any plan, but it will not display on a free staging subdomain. Substack embeds also do not appear in Webflow's canvas preview. You must publish the site to see them.

Embed the signup form

The signup form is an iframe that renders Substack's native subscription interface on your page. It collects email addresses and feeds them directly into your Substack subscriber list.

To embed the signup form:

1. Open your Substack dashboard and go to Settings > Growth features (or type "growth" in the left sidebar search box).
2. Copy the iframe embed code displayed in the Growth features section.
3. Before pasting, change width="480" to width="100%" in the snippet to prevent overflow on mobile screens.
4. In Webflow, click the Add panel (+) and search for "Embed."
5. Drag the Code Embed element onto your page canvas.
6. Double-click the element, paste the iframe code, and click Save & Close.
7. Click Publish and verify the form on your live site.

To hide the publication logo from the form, slide the Show pub logo on embed toggle to the left in the same Growth features section. Substack generates an updated snippet. Copy and use that version instead.

The form's fonts, colors, and button styles cannot be changed from outside the iframe. Browser security restrictions isolate iframe content from external CSS. If you need a fully styleable form, third-party tools offer custom-styled subscribe forms that connect to Substack's subscription endpoint.

Add a subscribe button

The subscribe button triggers Substack's native subscription modal as an overlay. No page redirect is needed. This works well in navigation bars, hero sections, and CTA areas where layout space is limited.

To add the subscribe button:

1. In your Substack dashboard, go to Share > Embed.
2. Choose a button style (primary or secondary) and customize the button text.
3. Copy the generated HTML snippet, which includes both button markup and a script tag.
4. In Webflow, drag a Code Embed element onto the page and paste the full snippet.
5. Click Save & Close, then Publish.

The modal appears on click and handles the full subscription flow without leaving your page.

Embed individual posts or Notes

You can embed specific Substack posts or Notes as readable content blocks on any Webflow page. Embedded content preserves original formatting, including images, videos, and text styling. If you edit the original post in Substack, the embedded version updates automatically.

To embed a post:

1. Open the post in your browser and click Share > More > Embed.
2. Copy the code snippet.
3. In Webflow, drag a Code Embed element onto the page, paste the snippet, and click Save & Close.

To embed a Note:

1. Open the Note and click the share icon (↑).
2. Select Embed note and copy the generated code.
3. Paste it into a Code Embed element in Webflow.

Post embeds are useful for displaying content samples as social proof on newsletter landing pages. Place them alongside your signup form so visitors can preview your writing before subscribing.

Display newsletter archives with third-party tools

Substack has no native feature for displaying a full post archive on an external site. Third-party tools fill this gap by pulling your Substack content into browsable, searchable archive layouts that you embed in Webflow.

Build with the Webflow Data API and Substack RSS

For full control over how Substack content appears in Webflow, you can build a server-side integration using the Webflow Data API and Substack's RSS feed. This approach requires writing and hosting server-side code. It is best suited for developers who need custom field mapping, content transformation, scheduled syncs, or event-driven workflows that go beyond what embeds offer.

The available data sources and endpoints include:

• The Substack RSS feed provides post titles, URLs, dates, excerpts, and full HTML content with no authentication required.
• The Webflow CMS Items API handles creating, updating, and publishing CMS collection items.
• Webflow webhooks trigger server-side actions when form submissions, CMS item changes, or publish events occur.

Substack has a limited Developer API, but it restricts queryable profiles and does not cover post content or subscriber management. The RSS feed remains the primary data source for any Substack-to-Webflow sync.

Sync RSS posts to CMS collections

A server-side script can poll the Substack RSS feed on a schedule, parse each post, and write it to a Webflow CMS collection using the Data API. This gives you control over field mapping, slug generation, and content formatting before items publish.

To implement RSS-to-CMS sync:

1. Fetch the RSS feed from https://YOURPUBLICATION.substack.com/feed and parse the XML to extract <title>, <link>, <pubDate>, and <content:encoded> for each item.
2. Retrieve your target collection ID using GET /v2/sites/{site_id}/collections with a Bearer token scoped to cms:read.
3. For each new post, create and publish a CMS item in a single request using POST /v2/collections/{collection_id}/items/live with fieldData mapped from the RSS fields (name, slug, post body, published date, source URL).
4. For bulk imports (up to 100 items per request), use POST /v2/collections/{collection_id}/items/bulk followed by POST /v2/collections/{collection_id}/items/publish to stage and then publish items separately.
5. To update existing items when Substack posts change, maintain a slug or ID map and use PATCH /v2/collections/{collection_id}/items/{item_id}/live.

Polling more frequently than every 15 to 30 minutes yields no practical benefit from the RSS side. Handle 429 Too Many Requests responses by reading the Retry-After header and pausing before retrying.

Display Substack content client-side with JavaScript

If you do not need CMS storage, you can render a live Substack post feed directly on a Webflow page using client-side JavaScript. This approach fetches the RSS feed at page load and builds a post list in the browser.

Direct browser requests to Substack's RSS feed trigger CORS errors. Route the request through an RSS-to-JSON proxy like rss2json.com to get a JSON response.

To add a client-side feed, place a div container using a Code Embed element on the page, then add the fetch script in the custom code footer section of your site settings:

const substackUrl = 'https://YOURPUBLICATION.substack.com';
const feedUrl = `https://api.rss2json.com/v1/api.json?rss_url=${substackUrl}/feed`;

fetch(feedUrl)
  .then(res => res.json())
  .then(data => {
    const posts = data.items.slice(0, 5);
    const container = document.getElementById('substack-feed');
    posts.forEach(post => {
      const el = document.createElement('div');
      el.innerHTML = `
        <h3><a href="${post.link}">${post.title}</a></h3>
        <p>${post.pubDate}</p>
        <p>${post.description}</p>
      `;
      container.appendChild(el);
    });
  });

The JSON response includes title, link, pubDate, description (excerpt), and content (full HTML) for each post. Content rendered this way loads dynamically and is not stored in Webflow CMS. The rss2json.com proxy is a third-party service with its own usage limits, so evaluate it before using in production.

Route Webflow form submissions with webhooks

Webflow webhooks fire when events occur on your site, including form submissions. You can register a form_submission webhook to send submitted data to your own server for processing.

To set up a form submission webhook:

1. Create the webhook using POST /v2/sites/{site_id}/webhooks with triggerType set to form_submission and url pointing to your server endpoint.
2. On your server, verify incoming requests using the HMAC-SHA256 signature in the x-webflow-signature header.
3. Extract the email address from the verified payload and process it through your subscriber management workflow.

There is no official Substack endpoint for adding subscribers programmatically. Community-discovered internal endpoints exist but use session cookie authentication with no stability guarantee. For production systems, consider routing form submissions to an email platform with a documented API, or collecting submissions for manual import into Substack via CSV.

What can you build with the Substack Webflow integration?

Integrating Substack with Webflow lets you run a newsletter-powered web presence on your own domain without building a separate email marketing system.

• Newsletter landing pages: Build a custom-designed landing page in Webflow with a Substack signup form in the hero section, embedded post excerpts as content samples, and a subscribe button in the navigation. Visitors subscribe and read previews without leaving your domain.
• Portfolio sites with newsletter capture: Place Substack subscription forms at the end of case study pages or in the footer so visitors can subscribe at their peak engagement moment. Your portfolio and newsletter grow from the same site.
• Content hubs with searchable archives: Display your full Substack newsletter archive on a Webflow page, with post filtering and search. Visitors browse your back catalog alongside the rest of your site content.
• Multi-step subscription funnels: Create multi-page Webflow flows with content previews, resource downloads, or product demos that lead to a Substack subscription form at the final step. Visitors engage with your content before they see the subscribe prompt, resulting in higher-intent signups.

If you need more control over content sync, field mapping, or event-driven workflows, the API integration path covers those cases with full flexibility.