Embed Substack Signup Form in React

" This article is published using Lamento🍋

I have used substackapi to achieve this Custom Embed Substack Signup Form

Configuration:

substackUrl: Copy your Substack domain URL and replace akileshio.substack.com with yours ```

substackUrl: "akileshio.substack.com",

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3pvrfr53fhrilrd5g6l.png)

* **theme**: To customize colors you can use pre-defined style `purple`, `orange` or `green` in theme or if you wanted to add your own colors scheme add `custom` in theme and add your colors to `primary, input, email & text`

theme: "custom",
colors: {
primary: "#FFFFFF",
input: "#334155",
email: "#FFFFFF",
text: "#000000",
}


**Here is your final code:**

import React, { useEffect } from 'react';

const SubstackWidget = () => {
useEffect(() => {
// Define the CustomSubstackWidget on the window object
window.CustomSubstackWidget = {
substackUrl: "akileshio.substack.com",
placeholder: "example@gmail.com",
buttonText: "Subscribe",
theme: "custom",
colors: {
primary: "#FFFFFF",
input: "#334155",
email: "#FFFFFF",
text: "#000000",
},
};

// Create a new script element
const script = document.createElement('script');

// Set the source of the script to the Substack widget script
script.src = "https://substackapi.com/widget.js";
script.async = true;

// Append the script to the body
document.body.appendChild(script);

// Cleanup function to remove the script when the component unmounts
return () => {
  document.body.removeChild(script);
}

}, []);

return (

);
};

export default SubstackWidget;


I you want to make your users redirect to custom URL after they signup, visit (substackapi)[https://substackapi.com/] to Unlock  Custom Redirect for $3.99/month.

Blog

Embed Substack Signup Form in React

Akilesh

Configuration:

Join Our Newsletter. No Spam, Only the good stuff.

Related