Next.js Example - Supascribe Examples

A simple example of embedding the Supascribe Embed in a Next.js application. Learn how to integrate Supascribe newsletter forms into your Next.js website with step-by-step code examples.

This is a basic example of how to embed the Subscribe Embed into a Next.js application. Use this as a template to understand how to add Supascribe to your own Next.js website.

Important: Make sure you're using your own embed code from your Supascribe dashboard. The examples below use placeholder values that you should replace with your actual embed ID.

Go to Dashboard

Basic Next.js Component

// components/SupascribeEmbed.tsx
"use client";

import { useEffect } from "react";

interface SupascribeEmbedProps {
  embedId: string;
}

export default function SupascribeEmbed({ embedId }: SupascribeEmbedProps) {
  useEffect(() => {
    // Load Supascribe script
    const script = document.createElement("script");
    script.src = `https://js.supascribe.com/v1/loader/${embedId}.js`;
    script.async = true;
    document.body.appendChild(script);
  }, [embedId]);

  return (
    <div data-supascribe-embed-id={embedId} data-supascribe-subscribe></div>
  );
}

Using the Component in a Page

// app/page.tsx
import SupascribeEmbed from "@/components/SupascribeEmbed";

export default function HomePage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-4">Subscribe to Our Newsletter</h1>
      <p className="text-gray-600 mb-8">
        Stay up to date with the latest news and updates.
      </p>

      <SupascribeEmbed embedId="example"/>
    </div>
  );
}

Alternative: Direct Script Loading

If you prefer to load the script directly without a component, you can add it to your root layout in the body:

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My Next.js App",
  description: "A Next.js app with Supascribe integration",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}

        {/* Supascribe Script (Only add this once per site) */}
        <script src="https://js.supascribe.com/v1/loader/example.js" async/>
      </body>
    </html>
  );
}

Or you can add it to a Footer component:

// components/Footer.tsx
export default function Footer() {
  return (
    <footer className="bg-gray-100 py-8">
      <div className="container mx-auto px-4">
        <p className="text-center text-gray-600">
          © 2024 My Website. All rights reserved.
        </p>

        {/* Supascribe Script (Only add this once per site) */}
        <script src="https://js.supascribe.com/v1/loader/example.js" async/>
      </div>
    </footer>
  );
}

Then use the embed div directly in any component:

// app/page.tsx
export default function HomePage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-4">Subscribe to Our Newsletter</h1>
      <p className="text-gray-600 mb-8">
        Stay up to date with the latest news and updates.
      </p>

      {/* Supascribe Embed Code */}
      <div data-supascribe-embed-id="example" data-supascribe-subscribe/>
    </div>
  );
}

Note: Replace the code with your actual embed code from your Supascribe dashboard in all the code examples above.