Grow Your Subscribers with Custom, Inline CTAs
Collect subscribers while they read your content by adding an in-line subscription call-to-action
Creators often ask us for best practices and tactics for obtaining more subscribers.
One method that we recommend repeatedly is implementing a "inline call-to-action (CTA)" to web posts.
First, what is an inline CTA?
Simply put, this is a form that appears within the normal flow of content that encourages a reader to subscribe.
This method can be very effective, compared to a pop-up or subscription form in the header or footer, because you're reaching the user in a very natural way the midst of a user experience where they are necessarily giving you their attention.
By placing your CTA this way, it's almost certain that a user who comes across it will be engaged and finding your content interesting or valuable.
These characteristics increase the chance that they will want to subscribe.
Fortunately, we makes it easy to generate the pieces needed to create an inline CTA for your content.
- Upgrade to any of our paid plans
- This tutorial uses light HTML and CSS, so knowledge of these languages is a plus.
- Inline CTAs will only render on web posts (they don't show up in emails)
- First, you will navigate to Settings -> Subscribe Forms from the beehiiv dashboard
- You will need to create a new form, so click New, give it a name and description of your choice, and select the color and font styles that match your brand.
- We recommend using a thank you message like "Thank you for subscribing."
- When you click "Save" and navigate to the next page, you will have three different embed options
- Slim <- This will be what we use
- In a new tab, open the post to which you want to add the CTA
- Create a Custom HTML widget roughly halfway down the post
- Copy the following code into the Custom HTML field:
Now we will customize our CTA:
<code><p style="text-align:left;font-size:24px;font-family:'Poppins',Helvetica,sans-serif;color:#393939;line-height:36px;font-weight:Bold;margin:0; color: var(--wt-text-on-background-color) !important">beehiiv Growth Tips and Updates</p> </div>
You will replace "beehiiv Growth Tips and Updates" with your own copy.
For advanced users: you can update the styling of this header by updating the CSS within the first 'style' tag.
<code><p>Tips, tricks, and suggestions to help creators use beehiiv.</p></code>
Update the text above to your own copy that supports your header.
Update the Form
<code><iframe src="https://embeds.beehiiv.com/edf41519-9892-48c8-ae15-411e4bd20d5e?slim=true" frameborder="0" style="margin: 0; border-radius: 0px !important; background-color: transparent; "></iframe></code>
Go back to the Subscribe Form screen where the embed options are listed from the beginning of this tutorial. Copy your slim imbed code and replace the code where you see the <iframe></iframe> tags.
Once this has been implemented correctly, your code will render as, or something similar depending on your copy and design changes:
beehiiv Growth Tips and Updates
Tips, tricks, and suggestions to help creators use beehiiv.
Once this is implemented in your post, you'll be on your way to collecting new subscribers from your web posts!
Did you find this article helpful?
(1 = No, 5 = Absolutely)