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: "[e-mail]",
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.

Comments

[Nathan Tarbert]

Thanks, this is helpful!

[Akilesh]

Your welcome, keep an eye out for useful content ☺️

[Liamsherwood]

This did not work for me. In my nextJS project, I use the Custom Substack Embed as you set it up here, as a CSR component which i import elsewhere. The

is empty in my elements tab. Any ideas as to why this could be?

[Akilesh]

Hi can you share your code snippet and recently developer of this SubstackAPI have migrated his site please refer supascribe.com for latest information sorry it took me years to reply to your message