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:

• What is a full-screen popup?

• Why try full-screen popups?

• Full-screen popup examples

• How to make a full-screen popup

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.

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.

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).

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)

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.

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.

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:

1. Create a campaign

2. Personalize the design

3. Choose when to display

4. Connect your email app

5. 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

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.

🎨 More templates here

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:

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:

• How to make a discount popup [+examples]

• Countdown timer popup examples

• How to create a spin-to-win popup

• Best practices for popups

• Mobile popups guide