15 Popup design examples that work

A collection of 15 popups that drive results.

Use these examples as inspiration when creating your own pop-ups. They're easy to replicate and they work!

When implementing a popup into your website you want to ensure you maximize its effectiveness, otherwise what is the objective you are trying to achieve? Popups are designed to grab attention and over time convert more of your visitors into either customers or subscribers to help your blog and business grow to success.

In this article, we’ll cover 15 great popups that both overlay the website but also are embedded into the page. Popups can work in many ways, some more effective than others.

1. Grammarly

Grammarly is a very popular tool for improving text as you write it throughout the web using their chrome extension.

Below is a preview of their premium modal.

Screenshot 2022-08-09 at 09.52.08.png

Our version

Since we are on Embedery.com we have built a template you can start using.

Our editor allows for a ton of creativity to help you get started building the ultimate experience to convert your customers.

https://get.embedery.app/gallery/drive-sales--upgrade--sales-upgrade-now.png?v=1

Check out the template here.

Wired

Wired is a popular tech magazine visited by hundreds of thousands to millions of people every month. Their website has a very unique and beautifully designed look.

This popup is embedded into the bottom of the page, but clearly stands out as you scroll down the page.

811B1914-4D89-4C17-BF5A-67FC6FD8F522_1_105_c.jpeg

Our version

We have also created our own version of this popup to see how Embedery compares and to show you how it would look.

https://get.embedery.app/gallery/grow-audience--list-building--subscribe-inline.png?v=1

Check out the template here.

AppFigures

AppFigures shows a nice popup that looks great on mobile, they do a good job in providing a convincing copy to help convert more.

0DB7D9CB-091C-4623-B21E-0478ED745D7E_1_105_c.jpeg

Our version

Here is our version, we use Google fonts in Embedery at the moment, so matching the font was a little tricky, but overall the core structure is there.

https://get.embedery.app/gallery/grow-audience--list-building--subscribe-panel-3.png?v=1

Check out the template here.

Euronews

Euronews is a popular magazine that reports on world events and events around Europe. They have a simple yet effective popup that appears at the bottom of their page when on mobile.

They are constantly experimenting with different popups to optimize traffic to convert to subscribers.

923E105C-1FCD-4F24-A918-EEC124F46CF6_1_105_c.jpeg

Our version

Here is our version, we don't provide inline images like those used in the header above, so an emoji stepped in to fill the gap.

https://get.embedery.app/gallery/grow-audience--list-building--subscribe-panel-4.png?v=1

Check out the template here.

YouTube

YouTube has recently started pushing their premium plan, the popup that appears below I’m sure is familiar, but it does a good job convincing the user to try out premium using indirect copy.

3C97D7D6-3183-4C02-950C-1817F8D2365B_1_105_c.jpeg

Our version

https://get.embedery.app/gallery/drive-sales--upgrade--sales-drive-premium.png

Check out the template here.

New York Times

69EA70CC-9FA2-410C-AA69-D5A6720499AF_1_105_c.jpeg

Our version

This popup is designed to sit inline on the webpage.

https://get.embedery.app/gallery/grow-audience--list-building--subscribe-panel-9.png

Check out the template here.

Cabify

C8EE2535-6BC3-45B6-BE26-667DCE034347_1_105_c.jpeg

Our version

https://get.embedery.app/gallery/grow-audience--lead-generation--invite-refer.png

Check out the template here.

Inc Magazine

CF0F6331-A359-46DE-9C8E-6E5934BE4C54_1_105_c.jpeg

Our version

https://get.embedery.app/gallery/grow-audience--list-building--subscribe-panel-6.png?v=1

Check out the template here.

Canny Creative

Screenshot 2022-10-02 at 09.56.15.png

Our version

This popover is a nice way to drive a visitor to a certain page to sign up and download a free e-book. With the element, we make use of the absolute element to position the double chevron image along with a two-column container to provide the image on the left.

https://get.embedery.app/gallery/grow-audience--lead-generation--download-now.png

Check out the template here.

Zendesk

Zendesk.png

Our version

For this popup, we had to be a bit creative and create our version of the person above using Figma, but it tries to align with Zendesk. This popup is a great starting point to align to your brand.

https://get.embedery.app/gallery/grow-audience--lead-generation--join-demo.png

Check out the template here.

UI Design Daily

45D75ED0-F3E4-4A15-B7A5-C373408DAA45_1_105_c.jpeg

Our version

Here is our version of this email subscribe popup, we could have continued to add more detail to the popup, but it's quite similar.

https://get.embedery.app/gallery/grow-audience--list-building--subscribe-panel-10.png

Check out the template here.

The Economist

Screenshot 2022-10-02 at 09.59.14.png

Our version

This bottom bar popup does a great job of capturing the visitor's attention while interacting with the website. The button below would link to a dedicated page to encourage the visitor to sign up to become a premium reader.

https://get.embedery.app/gallery/grow-audience--list-building--subscribe-panel-8.png

Check out the template here.

WillBrowning.me

66220BDF-E13C-4C59-BB5C-C97DBF6229AC_1_105_c.jpeg

Our version

https://get.embedery.app/gallery/grow-audience--list-building--subscribe-panel-5.png

Check out the template here.

ShopCircle.co

Screenshot 2022-10-02 at 10.51.19.png

Our version

Here is our version, this popup makes use of the column container and the absolute container, thanks to these blocks we can create a similar-looking popup.

https://get.embedery.app/gallery/grow-audience--list-building--subscribe-panel-7.png

Check out the template here.

Share this article.