Last updated Mon Sep 16 2024
Create a Full-Screen Popup in 5 Steps [+Examples]
Want to add a full-screen popup to your website?
This quick guide will show you how to do it and how other successful businesses are converting their visitors with this popup type.
Get started:
Easily add a full-screen popup to your website
Engage your visitors with behavior-based popups that achieve conversion rates of up to 25%
What is a full-screen popup?
A full-screen popup is a type of popup that takes up the entire screen to grab the attention of website visitors. Full-screen popups typically require users to take some sort of action and make the rest of the website inaccessible until closed or the desired action is completed.
For online businesses, full-screen popups (also called welcome mats) are a popular way to engage website visitors by focusing their attention immediately. Some of the common use cases for full-screen popups are email and phone number capture and collecting customer feedback.
Changed your mind? More types here:
Why try full-screen popups?
Here are a few things to keep in mind if you'd like to add a full-screen popup to your website.
Pros | Cons |
---|---|
The format ensures the message is seen by all website visitors | Can disrupt the user experience by making the rest of the page inaccessible |
Increases chances of conversions like sign-ups or purchases | May hurt SEO if not implemented correctly (eg without the "X" button) |
Ideal for promoting important announcements or marketing offers | |
Can be customized to be more contextual | |
Useful for gathering customer feedback or product preferences |
Although there are some cons, you can take care of them by:
a) making the campaign easy to close and
b) not showing it right away.
Both fixes are easy to do, even without experience (you'll see that in the how-to section below).
Full-screen popups can be highly effective when used strategically. They are perfect for capturing emails, guiding users to the right products through interactive quizzes, and driving conversions. When deployed thoughtfully—avoiding overuse and targeting the right moments—these popups can help you achieve their marketing goals faster.
Examples of full-screen popups
Here are a few examples of online businesses using full-screen campaigns.
Blume
Blume, a skincare brand, is asking new visitors about their main skin concerns in this campaign. This way, Blume is collecting valuable information that'll help them personalize marketing campaigns.
All those who answer the question will also get a discount at the end, which they can apply to the checkout in one click:
Asphalte
Asphalte is a brand that makes clothing only by picking design ideas from customer surveys done each season. So, they need to engage as many visitors as possible to get that feedback. That's exactly what they're using full-screen popups for.
This example campaign above is one of the campaigns they're running. The popup copy is short and to the point and the CTA button is clear and eye-catching. When we click Welcome aboard, we go straight to the survey page.
CTR of this full-screen popup: 25%
According to Ben Matteo, head of growth at Asphalte, full-screen popups give the brand around 4,000 new emails every month.
📈 Read case study (also available in French)
📔 Related:
Nickey Tahoe
This is an example of a welcome full-screen popup that appears about five seconds after visitors arrive at Nickey Tahoe. It contains a short welcome message for customers and offers to sign up for news and updates.
Learn more:
Finn
Finn sells dog vitamins and supplements, so they ask visitors about what problems they're looking to solve. When they choose, the popup transforms into a signup form; first for emails and then for phone numbers (see below).
This example shows that full-screen popups can be so versatile. In this one campaign, Finn captures feedback, emails, and phone numbers.
How to add phone number signup fields to popups:
Nikura
Nikura's full-screen popup is made for lead capture. There are two windows: for emails and phone numbers. The email one (above) is displayed first.
The phone number one has a different text, offering to sign up for early access to sales and other deals:
How to make full-screen popups
Follow these steps to create a full-screen popup:
Create a campaign
Personalize the design
Choose when to display
Connect your email app
Publish
In this tutorial, I'll be using our popup builder (rated 4.9 on Capterra and Shopify).
Get a free account to begin:
Unlimited free trial, no cc needed
"Adding Wisepops to my Shopify site has greatly increased the number of email subscribers while also encouraging sales with a coupon code. It's great that you can customize how often you want it to show up to your web visitors and that there are so many templates and options to use."
Step 1: Create a campaign
Click Create campaign in the Wisepops dash.
Then, choose the template. There are a few nice full-screen templates available, which will make things easier for us.
I'll pick one of those templates (it's called "Email and Information Signup Fullscreen"):
Step 2: Personalize the design
Our template requests quite a bit of info: email, birthday date, and an answer to the question of your choice. You can definitely leave all of it, but I'll take out the birthday field and the answer options to make signing up as easy as possible.
Customizing or removing a field is very easy—just click the element to view your options.
For this template, I will:
Add a background image (Design > Style > Background image toggle button; I'll use an image by Maja Cvetojević)
Write a new text and change its color from black to white (click the text > use the color selection menu above the preview)
Remove the birthday signup field and the choices (click them and remove using the menu that will open on the left)
Customize the email signup field (change the color and the corners using the menu above the preview)
Apply the design to Step 2 automatically (Design > Blocks > Apply this design to all steps) and add the discount code there
Need some help?
This video will walk you through a popup creation process:
Helpful resources for converting more visitors with discounts:
Step 3: Choose when to display
Go to Display rules in the main menu.
By default, your full-screen popup will appear after four seconds after a visitor lands on your website. If you’d like to change this, add your number in Show only after:
Step 4: Connect your email app
If you want to send the emails you collect to your email marketing app on autopilot, click the signup form and then choose Sync in the menu on the right.
There, find your email marketing app:
📕 List of integrations: Wisepops integrations
📘 For Klaviyo users: how to target Klaviyo segments with your campaigns
Step 5: Publish
Your full-screen popup is ready to go!
See how it looks by choosing Preview in the top right corner of your screen.
To display the campaign on your website, simply add the Wisepops code snippet with just a few clicks: how to install Wisepops.
Next steps
If you'd like to try more popup types and strategies to convert your website visitors, check out these guides:
Oleksii Kovalenko
Oleksii Kovalenko is a digital marketing expert and a writer with a degree in international marketing. He has seven years of experience helping ecommerce store owners promote their businesses by writing detailed, in-depth guides.
Education:
Master's in International Marketing, Academy of Municipal Administration
Related articles
8/30/2024
Learn how multistep popups work to generate conversions. See examples and how to create a multistep popup for your website.
10/1/2024
See cart abandonment examples and learn how to create an effective cart abandonment popup and recover sales.