ℹ️ Did you know?
What we now call Advanced Pop-ups used to be called House Ads. If you’ve been with us for a while, you might still see the tool labeled as House Ads in your dashboard. Don’t worry—it’s the same feature, just with a new name.
Introduction
Call-to-Actions (CTAs) and Advanced Pop-ups make it simple to create banners, pop-ups, and buttons that encourage readers to take action—such as subscribing to your newsletter or becoming a supporter.
To help you get started quickly, your website includes ready-to-use templates by default.
💡 Tip: When creating a new CTA or Advanced Pop-up, we recommend duplicating one of these templates and making your edits on the copy, rather than changing the original.
There are 3 types of CTAs that we find the most useful. Learn all about them in the following sections!
1. Slide-in CTAs
Slide-in CTAs are a type of popup or an opt-in form that slides in politely from the corners/sides of the screen.
👉 Our Recommendation:
When setting a slide-in CTA is to design it with the following two-step slides in mind:
SLIDE 1
First step is sharing with the user a direct question to confirm with them if they want to opt-in or out of an action - e.g. Ask them if they want to subscribe to your newsletter.
Heading: Make a direct ask. This will be the first thing a user reads, so be upfront about what you’re asking them to do. Make it clear and concise.
Example: “Subscribe to XYZ Publication” or “Sign up for the XYZ Publication newsletter."
Description: Tell them why and expand on the offering. Explain further what they’re signing up for. This can include how often and what day you send it, the content that’s included, etc. Make sure you tell them why they should subscribe.
Example: “Get important news from our community in your inbox twice a week” or “We’ll deliver local news direct to your inbox every Wednesday.”
Button: Make sure the button stands out by choosing colors that pop and a font that is big and bold.
SLIDE 2
The second step will only appear after a user has subscribed. It’s an opportunity to ask for their support and to offer more information.
Heading: Even though it’s unlikely that a user will contribute directly after subscribing, seize the opportunity to educate them on how you’re supported. Warm them up to the idea while you have their attention or emphasize your value proposition.
Example: “We’re funded by you” or “We rely on our members” or “100% local.”
Description: Let them know that you’re grateful for their subscription and that they can expect your newsletter in their inbox soon. Explain how their support makes a difference. A lot of readers are still getting used to the idea of voluntarily supporting local news. Explain that every reader who chooses to give matters greatly.
Example: “Thank you for subscribing! We’re powered by readers like you who invest in local news. Consider supporting us today.” or “Thanks so much! Check it out in your inbox and consider supporting us (or start supporting us today because we know you’ll love it)."
Button: Offer them more information. We don’t want their journey to stop here, even if they’re not ready to contribute. Give them the option to learn more about who you are, check out the team, or read through your guiding principles. But ultimately ask them to support you. Since support is the ultimate goal, give them the option to contribute. Even if they’re not ready yet, it prepares them to expect another ask down the road.
👉 Best Practices:
It's important to give the reader time to understand your website and navigate around, specially if this CTA is being used for Donate Campaigns.
On Configure, go to Launch > After Scroll/ Display Within Range and turn it on. Slide the Display at - Display when a user scrolls the page to 40%:
This way the CTA will only appear after the reader has scrolled down your page, making the experience less busy.
By default, the cookie CTA on the bottom will overlap any other CTA, including the Slide-in. To change the order and make the Slide-in appear on the top, ask the developers to add the following code on your website:
.cp-module-slide_in .cp-popup { z-index: 9999999; }
2. Pop-up CTAs
A Pop-up CTA is a light-box overlay that can be launched on any web page with a dedicated call to action.
💡 Our Tip:
Make it timely. Add a countdown timer or use time-sensitive language to put on the pressure.
👉 Best practices:
This type of popup is really invasive and disrupts the user journey in a very abrupt way. If triggered after the page loads or on multiple pages, it may causes the reader to leave your website.
For that, we recommend to:
Go to Configure > Launch
Click on After a Few Seconds on the Page and turn it off
You can either Click on After Number of Page Visits, turn it on and choose a number of pages visits necessary to trigger the popup, or trigger the popup After Scroll
For this specific CTA, make sure that the popup won't be triggered again after the reader closes it by clicking on Cookies, on the left navigation bar
3. Before/After CTAs
Before/After CTAs are banners or an opt-in form that can be embedded before or after your blog post on a page.
For example, placing a “Donate now” CTA at the bottom of all your posts its a great way to appeal to readers who are engaging with the work that you’re doing.
Here are some tips when setting up a before/after CTA:
Heading: Be direct. Don’t avoid the subject - make it clear that you’re asking for their support. They just spent a couple of minutes reading your article, they’re primed for the appeal.
Example: “This article is made possible by our readers” or “Enjoy the article? We need you to support this work”
Description: Emphasize the why! There’s a lot of room to play around here. The reader has already made it to the bottom of the article, so they’ll likely take an extra minute or two to read your appeal.
Button: Make it pop. Ensure that the user can’t miss the button, even if they don’t read through the text.
👉 Best practices:
Remember to set the Display Rules on "All posts" on Configure > Target
Managing CTAs
You can remove a CTA from your website by simply turning it OFF:
On your Main Menu, go to Advance Popups > Dashboard > there you will see all your CTAs > toggle ON/OFF
2. You can edit the copy of the desired CTA by clicking on the CTA name:
Double click the text to edit the copy. Click in "Save" and "Make public".
📱Desktop View versus Mobile View
When designing your CTAs, it’s important to style both the desktop and mobile versions.
To edit the mobile version, click the mobile icon in the top navigation next to Connect—this will let you see and adjust how your design appears on mobile devices.
Enabling a CTA on a specific page, category or post
You can enable a CTA on specific pages, categories or post. To do this:
Go to House Ads > Dashboard and open the desired CTA by clicking on the Name;
On the top left corner, click in "Configure";
On the sidebar, click in "Target";
Click on "Pages" and on "Display Rules";
Make sure to set All Posts on Display rules for in-line and before/after posts CTAs
Select "Target Specifics" to display the CTA on a specific:
Page: Type the title of the page
Post: Type the title of the post
Category: Type the category name
Disabling a CTA from a specific page, category or post
You can also disable the CTA on specific pages, categories or post:
Go to House Ads > Dashboard and open the desired CTA by clicking on the Name;
On the top left corner, click in "Configure";
On the sidebar, click in "Target";
Click on "Pages" and on "Display Rules";
Select "Target Specifics" and add the name of the page or title of the post:
You often don't want slide-ins CTAs on the following pages:
Privacy Policy
Support Us
Newsletter
Terms of Use and Payment Policy
Thank you
Contact us
Click in "Save" and "Make public"
🎨 Design tips
When editing your CTAs, make sure that it has enough:
Contrast: It’s important that buttons and texts stand out from the background. Images on the background are tricky, so you need to be extra careful;
Legibility: fonts needs to be big enough, specially on mobile. It’s hard to fix a number here, but it works best with fonts that are bigger than 16px;
Hierarchy: the button needs to stand out more than “Read more”, and other elements
Triggering PELCRO Modal
To trigger a Pelcro Modal using House Ads buttons, select the button on the House Ads editor and click on Advanced. On Custom Class, add:
pelcro-subscribe-button
❓ Need a different CTA?
Reach out to our team through the support request system at support@indiegraf.com to learn more!