How to Embed a Substack Form in Your Website
• This article contains affiliate links •
Substack has been generating a lot of interest recently in author and writer communities. If you’re planning to use it for a simple newsletter, don’t forget to embed Substack in your website so people can sign up directly to hear from you.
What is Substack?
Substack allows writers to publish content and send basic newsletters to subscribers. It’s not a full email marketing tool, but it’s attracting fans because it’s extremely straightforward (bare bones?) and makes it especially easy to offer a paid newsletter option.
The folks at HootSuite go so far as to call Substack:
“The biggest disruption to journalism, personal writing and thought leadership since the blog boom of the 2000s.”
Substack is appealing because you can share thoughts quickly, allow comments from readers, and potentially build a writing portfolio fast. You can even monetize your work, if your followers are willing to pay for it. You choose whether the material you publish is behind a paywall, or free.
From my perspective, Substack does seem to be the hot new platform of 2022 for my clients, and its simple interface is highly praised.
However, it’s not for everyone. I dig deeper into the Pros and Cons of Substack here.
Don’t choose Substack if:
You have multiple streams of income, different lead magnets, or need to segment / tag your email list. If that’s your business model, I recommend ConvertKit instead.
You’re fed up with the free plan on Mailchimp. I single out Mailchimp because this is the complaint I hear most often. Substack’s purpose is different, so don’t use it simply as a salve for your Mailchimp pain. If that’s your concern, take a look at MailerLite instead.
You’re hoping to grow your following with no effort. Like most other platforms, if you want to build your Substack audience, it’s not enough to just start “broadcasting”. You’ll need to engage, link, comment, and collaborate with others.
You want to make big money. An average paid subscription on Substack is about $5, so you’d need a large number of loyal consumers if you want to pay your bills this way.
Example of a Substack form embedded in my client Jessica Nordell’s Squarespace website. Jessica’s site was originally developed in collaboration with Charlotte Duckworth Studio.
Substack might be a good choice if you:
Want a really simple newsletter tool.
Are thinking of asking people to pay to receive (some of) your writing.
Are interested in — or at least neutral toward — the “social” aspect of growing your following there.
Have a main website using a simple tool like Carrd, so you’re looking for a separate place to host blog-type articles and updates.
What does Substack cost?
Getting started as a publisher on Substack is free.
If you choose to offer paid subscriptions, Substack takes a 10% cut. Also, payments are processed by Stripe, with further fees of 2.9% plus 30c per transaction. According to my calculations, if you charge $5, you’ll keep $4.05 for yourself.
And to embed your Substack sign up form on your Squarespace website (see below), you will need the Squarespace Business plan in order for the code supplied by Substack to work.
How to embed your Substack sign up form on your Squarespace website
In general, all your marketing should drive people to your website. This is a domain that you own, and it will remain the same even if your sales platforms and email list provider change. So, don’t start giving out your Substack link directly. In a few years, if you change service, you don’t want people reaching a dead end.
Instead, you should embed your Substack form in your website, and share this link.
A Substack - Squarespace integration isn’t hard to set up. The general principle in these instructions will work with other website platforms too.
Related: new done-with-you group program to build your Squarespace website, with guidance from me.
Watch as a video, or scroll down for written info + screenshots
Step 1: Create your Substack account and publication
Sign up for a Substack account, if you don’t have one already.
As part of this, you’ll be asked to select your interests. Substack then recommends other writers, so you should opt in or out, depending on whether you want to hear from them.
Create your profile.
You’ll do profile basics during the account creation process, but you’ll probably want to refine it later.
Create your Substack publication, including a name for it and short summary.
Pay attention to the default URL, too, and see if you can choose something more applicable.
Initially, skip the invitation to import your email subscribers. If you don’t yet have any, obviously you can’t, and even if you do, I think you should experiment a little with Substack before moving all your eggs to this basket.
In particular, I strongly recommend you skip the suggestion to add friends and family to your list. In my opinion, this contravenes privacy laws, including the CAN-SPAM act.
It’s also a good idea to create at least one or two posts, so that potential subscribers can see what you’re about, before they decide to follow you.
Be sure to opt in or out of the suggested publications.
As well as a publication name and description, edit the URL too.
I strongly recommend you do not add subscribers without their permission. This contravenes spam laws, even if you mean well.
Step 2: Find the Substack code to embed
Go to the Settings page of your publication.
Find this by clicking on your profile icon (top right), then clicking Writer Dashboard and Settings
Alternatively, the url of this page is yoursubstackurl.substack.com/publish/settings
Optional: set your styles and colors to match your website branding.
Look for the Style section and then click Edit Theme.
When you’re done, come back to the Settings page.
Scroll down to the section titled Import Your Email List
Under the heading Embed signup form on other websites, copy the code there. It begins <iframe src= and ends with </iframe>
The embed code you need is on the Settings page of your Substack publication.
Step 3: Embed the Substack code in Squarespace
On your Squarespace website:
Click Edit on the page where you want the sign up form to appear.
Consider adding the form to your website footer, so it shows on every page.
Add a Code Block and click the pencil icon to edit it.
Delete the placeholder text, <p>Hello, World!</p>
Then paste in your Substack code.
Strongly recommended: find the part in the code where it says width="480" and change that to width="100%"
Why? The code they supply looks really bad on some mobile phones: it falls off the side. By specifying a percentage of the available width, your form should look better.
If your form looks too wide on your (desktop) Squarespace page, adjust the width of the Code Block.
If you’re designing with Fluid Engine, simply drag to adjust the width.
In the older Squarespace “Classic” Editor, you’ll add spacer blocks to get the look you want.
Add to your web page any text that’s necessary to introduce what people will receive, and/or link to your privacy policy.
Don’t forget to check the mobile view of your page, especially if you’re designing using Fluid Engine.
Save your changes.
Add a Code Block to your Squarespace page
Remove the placeholder code and paste in the Substack code.
Assuming you set your styles inside Substack, the resulting sign up form should blend well with your website colors when embedded in Squarespace.
Step 4: Test it
Test your new Substack - Squarespace integration by signing up yourself. If you have a Gmail account, I’m a big fan of testing by creating test addresses with the plus sign.
Example: if your email address is janedoe@gmail.com, you could test with janedoe+substack1@gmail.com
Example: if your email address is bobthewriter@gmail.com, you could test with bobthewriter+test1@gmail.com
In both cases, emails sent to the test address will be delivered to your Gmail account with no special set up needed. You can put anything you like after the + sign in the middle of your address.
Words of caution about Substack
I’m not affiliated with Substack and I’ve only used it a little. However, as well as the reasons above why it might not be right for you, I’d like to point out that Substack strikes me as a little amateurish.
Caution #1 : Privacy, Spam legislation, and email deliverability
I already stated above, I’m extremely surprised that during the publication creation process, Substack invited you to add friends and family without their permission.
Not only does this go against good marketing karma, it could lead to your communications getting marked as spam. I’m dismayed that Substack prompts this. It hints to me that they don’t truly understand email marketing.
Even if you don’t fall for this amateurish blunder, if enough other Substack publications get marked as spam, it will directly damage your ability to reach subscriber inboxes too.
Related: Deliverability 101 article from ConvertKit. (I am a ConvertKit affiliate)
Caution #2: Is Substack cutting corners?
Unless you’re a whizz with custom code, it’s hard to change the Substack form. Aside from the tweaks you made to your style settings, you’re stuck with the layout and their branding.
But worse than that, the embed code they supply looks pretty bad on a mobile phone. Your sign up box falls off the side of the phone screen, if it’s smaller than their default width of 480 pixels. It took me mere seconds to spot that and improve it.
^^ Scroll up to Step 3 of my instructions to see where to replace "480" with "100%"
Unless you tweak the standard code, your Substack form falls off the side of a phone screen. Above: the result from using width="480"
The fix for your Substack form falling off the side of a phone screen. Above: the result from using width="100%"
And with so many of your audience potentially visiting your website on a phone, I don’t understand why Substack would offer something so thoughtless.
My impression is this might be a bare bones service, with quality to match. Might they be cutting other corners too?
Nonetheless, Substack is popular and gaining traction
I understand why Substack is gaining fans, and it could indeed be a handy little tool for you. Here’s my more detailed analysis of Substack Pros and Cons.
If you do choose to start a publication and embed Substack in your website, let me know how it goes!
•
Are you ready to sell more books?
If you want an author website that delights your readers and sets you up for business results, let’s design, build, and launch your online home in just 2-3 weeks. Learn more, and then schedule a complimentary chat with me.
Other resources for supercharging your author email list
And for the essential steps in your website project, take a look at my free 50 Step Website Checklist.