" 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",
* **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.
Top comments (3)
Thanks, this is helpful!
Your welcome, keep an eye out for useful content ☺️
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?