" 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,orangeorgreenin theme or if you wanted to add your own colors scheme addcustomin theme and add your colors toprimary, 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 (
<div id="custom-substack-embed"></div>
);
};
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?