React Example - Supascribe Examples

This is a basic example of how to embed the Subscribe Embed into a React application. Use this as a template to understand how to add Supascribe to your own React 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 React Component

// components/SupascribeEmbed.tsx
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-feed />;
}

Using the Component in a Page

// App.jsx or App.tsx
import SupascribeEmbed from "./components/SupascribeEmbed";

function App() {
  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>
  );
}

export default App;

Alternative: Direct Script Loading

If you prefer to load the script directly without a component, you can add it to your index.html file:

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>React App with Supascribe</title>
  </head>
  <body>
    <div id="root"></div>

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

Or you can add it to a Footer component:

// components/Footer.tsx
import { useEffect } from "react";

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

  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>
      </div>
    </footer>
  );
}

Then use the embed div directly in any component:

// components/NewsletterSignup.jsx
export default function NewsletterSignup() {
  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-feed/>
    </div>
  );
}

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