Simple tips for creating Ghost notification popups
Instructions on how to create notification popup for ghost blog are super fast and simple.
One of the ways to help you increase conversion rates quite effectively is Popup, so professional popup tools like ConvertBox always cost quite a lot, including lifetime.
To save you money, I'll guide you through creating a simple notification popup that's more than enough for you to use for your basic needs.
Add popup snipet code to Ghost website
Copy and paste the code snipet below according to the instructions (the copy button will appear in the right corner when you hover over the code).
The code is super lightweight, weighing just over 2KB without gzip.
You have 2 ways to add depending on your wishes.
- Add the whole site. Add the style to the site head and the rest to the Ghost's body tag.
- Add a popup to the specified post or page. You add styles and and the rest to .
Post headerPost footer
Note, you can only choose one of 2 ways, not using both will cause an error. You should consider which one suits your needs best.
How does this popup work?
The popup will be displayed an unlimited number of times, unless the viewer clicks the "X" button to close the popup, it will not be visible for the next 7 days.
This means that when viewers don't want your popup to bother, they will press the "X" button to close the popup, when they view your other pages will no longer be visible, even when they return to your site. The reader experience will be guaranteed.
When viewers click on the CTA call button, the popup will stop showing for 3 days to avoid feeling spammed for viewers.
To change the page redirect of the CTA button and the default display date, follow the instructions below ↓
How do I customize the popup display?
To change the path to the desired landing page, change code #2 to the slug of the page or the URL you want. For example, you change from
To change the content, edit the CTA button text and text as shown above
[Demo] ghostFam just release new services and
Learn More .
To change the default number of days you change (3 days) and (7 days) to the number of days you want. The way to calculate dates is to use <number of days>*24*60.
This is just a simple but highly effective code snipet for you. You can use it on any landing page or other platform as you like.
Please see the popup demo on this page on the left.
You may also like
How to configure Mailgun for email sending in Ghost
Check out our Mailgun configuration guide for Ghost to ensure you're getting the most out of email.
A guide to adding Giscus comments to Ghost
How to add Giscus comments to Ghost, add a choice of comment system for Ghost users.
How to customise the Ghost theme with Github
Tutorials on how to manage Ghost themes conveniently with Github.
Keep in touch
Be the first to know about new updates when you join the newsletter.
- Access exclusive articles
- Get notified when member-only articles are published