# Embed Substack on Any Website

> Add a Substack subscribe form, feed widget, or popup to any website using HTML. Works with any site builder, CMS, or custom-built site — no plugins needed.

Source: https://supascribe.com/docs/embed-substack-on-any-website
Last updated: 2026-03-02

---
Supascribe works on any website that accepts custom HTML. Add the script tag once, place an embed div where you want the form to appear, and it renders automatically — no plugins, no APIs, no configuration files.

## What You Can Add

- **[Subscribe Form](https://supascribe.com/embeds/subscribe)** — a customisable email capture form with your branding, CTA, and a redirect after sign-up
- **[Feed Widget](https://supascribe.com/embeds/newsfeed)** — your latest Substack posts displayed automatically, updating whenever you publish
- **Both on the same page** — one script tag handles multiple embeds

## Step 1: Create Your Embed in Supascribe

1. Sign up at [Supascribe](https://supascribe.com) — free to start
2. Connect your Substack publication
3. Choose your embed type: Subscribe Form or Feed Widget
4. Customise the design — colours, fonts, button text, layout
5. Click **Publish** to generate your embed code

Your dashboard provides a snippet like this:

```html
<!-- Subscribe form -->
<div data-supascribe-embed-id="abc123" data-supascribe-subscribe></div>

<!-- Feed widget -->
<div data-supascribe-embed-id="abc123" data-supascribe-feed></div>

<!-- Script — add once per page -->
<script src="https://js.supascribe.com/v1/loader/example.js" async></script>
```

Copy the snippet exactly as shown — the embed ID and script URL are pre-filled with your account details.

## Step 2: Add the Embed to Your Website

### Subscribe form

Paste the embed div where you want the form to appear. Add the script tag once, just before the closing `</body>` tag:

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

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

### Feed widget

Replace `data-supascribe-subscribe` with `data-supascribe-feed`:

```html
<div data-supascribe-embed-id="abc123" data-supascribe-feed></div>

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

### Both on the same page

Place both divs wherever you want them. One script tag handles both:

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

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

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

## Step 3: Test It

Open the page in an incognito window after publishing. The embed should render in the correct position. Submit a test email to confirm subscriptions are being captured in your dashboard.

## Frameworks and Dynamic Sites

**React (CRA or Vite)**

Add the script tag to `public/index.html` before the closing `</body>`. Then use the embed div inside any component — no `useEffect`, no dynamic script loading.

See the [React code example](https://supascribe.com/examples/react) for a full component template.

**Next.js (App Router)**

Add the script tag to `app/layout.tsx`. The embed div works inside Server Components with no `"use client"` required.

See the [Next.js code example](https://supascribe.com/examples/nextjs) for the layout and component setup.

**Server-side languages (PHP, Python, Ruby, etc.)**

Add the script tag to your base layout template so it loads on every page. Place the embed div in any template where you want the form.

## Performance Notes

- Use the `async` attribute on the script tag — it prevents render blocking
- Place the script tag at the bottom of `<body>` for faster initial load
- Add the script once per page, not once per embed — it handles multiple embeds from a single load

## Platform-Specific Guides

If you're using a specific platform, these guides have exact steps for each editor:

- [WordPress](https://supascribe.com/docs/embed-substack-on-wordpress): Custom HTML block and widget setup.
- [Framer](https://supascribe.com/docs/embed-substack-on-framer): Embed component setup — works on the free plan.
- [Carrd.io](https://supascribe.com/docs/embed-substack-on-carrd-io): Embed element setup and Carrd-specific tips.
- [Wix](https://supascribe.com/docs/embed-substack-on-wix): HTML Embed element and custom code setup.
- [Squarespace](https://supascribe.com/docs/embed-substack-on-squarespace): Code block and footer code injection.
- [Shopify](https://supascribe.com/docs/embed-substack-on-shopify): Theme template and theme.liquid integration.
- [Weebly](https://supascribe.com/docs/embed-substack-on-weebly): Embed Code element and footer code.

## Need Help?

- Email: [gideon@supascribe.com](mailto:gideon@supascribe.com)
- Twitter: [@0xGideon](https://x.com/0xgideon)

## Frequently asked questions

**Q: Does this work on any website?**

Yes. If your website supports custom HTML, you can add the Supascribe embed. This includes all major site builders (WordPress, Squarespace, Wix, Carrd, Shopify) and custom-built sites.

**Q: Do I need to add the script tag to every page?**

No. Add the script tag once in your global layout or footer. Then place the embed div on any page where you want the form to appear.

**Q: Can I add both a subscribe form and a feed widget on the same page?**

Yes. Place both embed divs wherever you want them. One script tag handles both.

**Q: Does it work in React or Next.js?**

Yes. Load the script tag globally in your HTML file or root layout, then use the embed div in any component. No useEffect or dynamic loading required.

**Q: Do subscribers sync to my Substack list automatically?**

Yes. Every submission through the Supascribe embed is added directly to your Substack subscriber list.