Wisepops logo
cover10

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%

popup animated

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.

full screen popup campaign

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.

ProsCons
The format ensures the message is seen by all website visitorsCan disrupt the user experience by making the rest of the page inaccessible
Increases chances of conversions like sign-ups or purchasesMay 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).

💡 Tip:

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

full screen popup example 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:

Blume converts 5% of new visitors with website popups

Asphalte

full screen popup with closing button

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

full screen popup 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

full screen popup example

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.

second step full screen popup

How to add phone number signup fields to popups:

Nikura

full screen popup

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:

phone number signup full screen popup

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

trustpilot
"Great tool to build your email list and increase web sales"

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

Heidi B., Trustpilot

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"):

full screen popup template

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

creating a full screen popup

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:

on landing

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:

syncing an email app in a full screen campaign

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

wisepops
Need more ideas to engage your visitors with our popup builder?

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

multistep

8/30/2024

Learn how multistep popups work to generate conversions. See examples and how to create a multistep popup for your website.

main cart

10/7/2024

See cart abandonment examples and learn how to create an effective cart abandonment popup and recover sales.

Help