Substack

How to integrate Substack with Webflow

Managing your website on one platform while running your newsletter on another creates design inconsistencies and disconnected subscriber experiences. When you build landing pages separately from where you capture subscribers, you lose control over brand presentation and user flow.

Integrate Substack with Webflow by embedding native Substack forms and individual posts using the Code Embed element, or using third-party services like Stackblocks for custom archive displays.

Embed Substack forms and posts directly

Integrate Substack into Webflow by using Substack's embed codes with Webflow's Code Embed element.

Navigate to your Substack Settings > Import (or Share > Embed for individual posts) to generate subscription form code, then paste it into a Code Embed element in Webflow. This works for subscription forms, individual posts, and subscribe buttons. Embeds only render on published sites, not in the preview.

Generate the following embed codes directly from Substack:

• Subscription forms through Settings > Import in JavaScript snippet or iframe format
• Individual posts via the Share > Embed post option
• Subscribe buttons from Share > Embed that trigger Substack's subscription modal
• Newsletter widgets with configurable button styles and colors

Embeds render only on published sites. Test all implementations on staging URLs before deploying to production. The iframe-based forms maintain Substack's styling and security while integrating into your site layout.

Customization of the iframe form appearance is limited due to iframe isolation (security restrictions that prevent external CSS from modifying embedded content).

You can only toggle the display of the publication's name and logo, while the form styling itself cannot be modified through CSS.

Add subscription forms to pages

Place subscription forms anywhere in your Webflow layout by dragging a Code Embed element from the Add panel. Navigate to your Substack publication's Settings page and click Import to copy your subscription form code, then paste it into the Code Embed element's code editor.

The embed form uses iframe format and allows you to toggle the display of your publication name and logo, though styling customization is limited due to iframe isolation.

Example embed code format:

<iframe src="https://yourpublication.substack.com/embed" width="480" height="320" style="border:1px solid #EEE; background:white;" frameborder="0" scrolling="no"></iframe>

The iframe embed format provides isolation and security. Set width to 100% for responsive behavior. Avoid fixed heights that cause content clipping. Forms automatically adapt to mobile breakpoints without additional configuration.

Display individual posts and notes

Embed specific newsletter content by navigating to the post, clicking Share, and selecting Embed post. The generated code keeps original formatting including images, videos, and text styling. Paste the embed code into Webflow's Code Embed element where you want the content to appear. Embeds only render on published sites, not in Webflow's preview mode.

This method works for both published posts and Substack Notes. The embedded content updates automatically if you edit the original post in Substack. Use this approach to feature specific newsletter issues on landing pages or show content samples for potential subscribers.

Implement subscribe buttons

Subscribe buttons provide a lightweight integration option. Generate button code from your Substack dashboard > Share > Embed, choose a button style (primary or secondary), customize button text and appearance, and copy the generated HTML snippet. The button includes JavaScript modal attachment, so clicking triggers Substack's native subscription modal.

Buttons integrate into navigation menus, hero sections, or call-to-action areas. According to Substack's Subscribe Button Plugin documentation, the modal maintains Substack's user experience while appearing as an overlay on your Webflow site.

This approach works when you want subscription functionality without dedicating layout space to full forms.

Display archives using third-party tools

Tools like Stackblocks extend Substack embedding capabilities. These services generate custom embed codes that display newsletter archives with filtering, search, and flexible layouts.

Create a Stackblocks account and provide your Substack URL. Configure the archive appearance using their visual editor. Copy the generated embed code and paste it into a Webflow Code Embed element. Publish your site to view the integration, as embeds only render on published sites.

Third-party embedding capabilities include:

• Newsletter archive displays with customizable layouts
• Post filtering and search functionality
• Individual post embeds across published content
• Design flexibility beyond native Substack embeds

Third-party tools require ongoing service subscriptions and add external dependencies to your integration. For Substack-Webflow integrations specifically, tools like Stackblocks can provide newsletter archive displays with custom layouts and search functionality, but introduce additional vendor lock-in and subscription requirements beyond the core platforms.

What you can build

Integrating Substack with Webflow through embed methods displays Substack subscription forms within your Webflow site layout using embed codes and Code Embed elements.

• Newsletter landing pages with custom design and fast loading: Build a single-page landing site with a hero section featuring your newsletter value proposition, a three-column feature section explaining what subscribers receive, testimonial sections with embedded individual Substack posts as social proof, and Substack's subscription form in the footer
• Content hub with newsletter archives: Display your complete Substack publication archive on your Webflow site using third-party tools like Stackblocks so visitors can browse past issues and search content from your main website
• Multi-step subscription funnels: Build multi-page flows in Webflow with content preview pages, resource downloads, or demos that lead to Substack subscription forms embedded at specific points in the navigation flow
• Portfolio sites with newsletter integration: Build portfolio pages in Webflow with your work, case studies, or projects and embed Substack subscription forms in specific page locations using Webflow's Code Embed element