How to implement popups on your Website

How to Use Pop-ups to Engage with Your Website Visitors

In this post, I want to share a few thoughts on implementing pop-ups on your website and give you a checklist on what to ask yourself before implementing it the right away.

The term pop-up triggers ugly memories of the old days of the web, when a website opened another browser window (showing you promotions or ads) that you had to close manually. Soon browsers blocked pop-ups by default. The term pop-up nowadays is used for displaying content to the user, which is triggered after a specific action or time spent on a website. It’s still a pop-up but is not opened in a separate browser window, instead floating on the website you are viewing at the moment.

You could call it a:

  • Floating widget
  • Action bar
  • Message or notification box
  • Call-to-action box
  • Toast notification

This is how it typically looks:

Icegram PopUp Demos
Screenshot – Icegram PopUp Demos site

 

Optimising a website to convert a user landing on your page to a qualified lead, subscriber, or customer is one of the big challenges a digital marketer faces. Hundreds of companies specifically try to solve this issue by providing software or consulting for implementing landing pages and call-to-action buttons the right way. There are even conferences on the topic of Call to Action.

Typically, businesses always want a web visitor to take an action, depending on the sort of business you are providing that could be any of the following:

  • Buy a product
  • Book a service
  • Subscribe to a newsletter
  • Fill out a contact form
  • Read another article
  • Any other sort of action that creates value for both your visitor and you

Each page on a business website should have some sort of call to action. But implementing a pop-up allows you to trigger a specific message right in front of the user — it’s hard to ignore. This can be annoying if it’s implemented the wrong way. More on that later.

Online marketers can choose from hundreds of tools to implement pop-ups. This is a related remark to my last post about WordPress. Over the last years it has become much easier for marketers to implement all sorts of pop-ups. With the ease of allowing marketers to trigger such an event, it’s also used too often and in the wrong ways by marketers.

Tools to Implement Pop-ups on Your Website

I will list just a few. There are hundreds of solutions out there. Here is a list of tools I have played around with.

Icegram

Icegram is a WordPress plugin that I used on AmbassadorBase to create a list of email subscribers. This is a pure and simple solution to pimp your WordPress site with all types of pop-up elements. It’s very easy to implement and is the solution I have the most experience with. You can easily control how often a visitor sees the pop-up, and it supports different styles and does not self-promote its service.

Icegram Website Screenshot
Icegram Website Screenshot

SumoMe

The component is called list builder, but SumoMe comes with a lot of other features like heatmaps, etc. Again, there is a WordPress plugin to get you started easily.

Sumome List Builder Website Screenshot
Sumome List Builder Website Screenshot

Optinmonster

Triggering a pop-up is just one of many features optinmonster provides. It’s a suite of tools that online marketers can use to engage visitors. Again, there’s is a plugin if you are using WordPress.

Optinmonster Website Screenshot
Optinmonster Website Screenshot

HubSpot Leadin

Leadin is a component from HubSpot to implement a pop-up, and WordPress is supported.

Hubspot Leadin Website Screenshot
Hubspot Leadin Website Screenshot

Hotjar

I blogged about Hotjar separately; it comes with a convincing feature set. It does not have a specific overlay/action bar component but has a polling component. I still wanted to mention it here because polls are also a great way of converting website visitors.

Hotjar Website Screenshot
Hotjar Website Screenshot

All of these tools allow you to start on a free plan. If you need deeper customisation and don’t want people to notice which service you use, you have to pay (and for other advanced customisation, of course). If you do not use WordPress, you can add the necessary code to your site within minutes. If you look at the claims on their websites, they are more or less the same. So these tools offer very similar services; check them out and evaluate what best fits your needs.

A Few Examples of Pop-ups from an Implementation Perspective

SumoMe’s Own Overlay

One of their products is a list builder component you can easily add to your website with a scriptlet or a WordPress plugin. Before the pop-up was triggered, I navigated from the homepage of the service to the list builder page, so there was at least one action on the site before I got the opportunity to decide if I wanted to subscribe for more information.

What I also like about that message is that it clearly says you get four emails. Lots of services say ‘Never miss a post’ or ‘Sign up to get tips and tricks’, which is very generic, and my inbox is already full. So giving a clear estimate of what the user gets and how often is a great way to drive the click-through rate.

PopUp on SumoMe List Builder Website
PopUp on SumoMe List Builder Website

Overlay on Bloghands

I discovered this blog via the Inbound community. In general, I like the minimal design approach of the blog. It’s what I also implemented for the Fresh van Root blog. After a few seconds and before I clicked a single article on the blog front page, a pop-up already asked for sign up to download an ebook with over 130 pages. The offer sounds interesting, but right now I can’t think about reading 130 pages. I just discovered the page and before I have read anything, I would not download a 130-page guide.

The overlay is implemented using Hubspot’s Leadin component, which can be very easily added to your website and for free.

 

Screenshots popup on Bloghands
Screenshot popup on Bloghands

Backlinko

This pop-up on Backlinko is taking the whole screen, which is annoying to me. The cancel link says “No, I do not want higher rankings”. Of course I do, but I do not want to give you my email.

Popup on Backlinko Screenshot
Popup on Backlinko Screenshot

 

Things to Consider Before Implementing a Pop-up

  • What is your offer? If you want to collect email addresses just because it’s possible, then don’t! Think about what type of audience is visiting your page and what you can offer that visitors would think is worth taking the action of getting in contact with you or leaving an email.
  • Should the user have taken an action and, if yes, how many before I present a pop-up? Consider the following:
    • Amount of time spent on a site
    • How many clicks made?
    • How far has been scrolled?
    • How often did the user come back to my site (if a user comes back often, chances are much higher that he/she is interested in getting in touch, subscribing, following more closely, giving you data, etc.). However, it could also mean the user is already very actively following you, and you could annoy loyal users with a pop-up.
  • Which audience is visiting your site and are they potentially already annoyed by overlays, pop-ups, floating widgets, etc.?
    • Writing this from a perspective as a digital marketer, I would say the target group of my site is already annoyed by too many pop-ups.
  • Which service best fits your site?
    • How easy is it to customise the design of the pop-up? Can you add your own branding?
  • Connect to your marketing services
    • How easily can you connect the pop-up to your existing database and CRM? If you take personal data, email addresses, or collect any form of data, where does it get stored?
  • Questions on technical implementation
    • This is again something done very easily in WordPress. If you are not using WordPress, how can you implement this feature in your CMS?
  • What type of metrics/data does the solution provide?
    • Tracking your click-through rate on call-to-action pop-ups is crucial to further optimise your efforts and estimate the general usefulness of presenting it to users.
  • A pop-up is another thing to monitor and tune
    • It’s implemented very fast but don’t forget to constantly tune and customise your pop-up. Once you are successful in converting your most loyal users to email subscribers, you should display something new to them.
  • How does it fit in your overall site structure and design? What other actions already try to get the attention of the user?
    • Do you have already a floating social media sharing toolbar, a chat widget, and a feedback form? Adding another layer of information is maybe just too much. Think about what you can remove before adding another element that attempts to get the user’s attention
  • Be very clear and concise about what a website visitor gets if you ask for personal data.
    • Having a claim like ‘get our ebook’ or ‘get top posts via email’ is very blurry, try to be specific and tell exactly what’s on offer and how often a user is contacted.
  • Finally, where do you want to display the pop-up?
    • Header, footer, centre of the page, full screen, etc. There are many options!

Blocking Ads and the New Type of Pop-ups Soon?

As I wrote in the introduction to this post, the old version of pop-ups was blocked pretty quickly by users. First, by installing a separate browser plugin, then by the browser software by default. Users become annoyed quickly by websites yelling at them. Look at all the happenings around the issues with online advertising in the media business. Users install ad block software to avoid being tracked and spied on. Pro users also use browser plugins like Ghostery to go a bit further and block scripts that do not block advertising but block tracking scripts like Google Analytics, Facebook Connect, Hotjar, or hundreds of other analytics and spy tools. Look at what Ghostery blocks, while I am logged in to inbound:

Blocked scripts on inbound.org by Ghostery
Blocked scripts on inbound.org by Ghostery

So while the web is discussing the online advertising bubble and when it will pop, think about the next era of users blocking not only advertising but all the fancy marketing analytics tools you use to spy on users and display pop-ups. Lots of people (especially so-called power users) will soon block all sorts of pop-ups like the ones discussed in this post, so prepare for designing your page to convince people with well-designed content and make it very easy to get in touch with you from any point on your site.

Conclusion

As a digital marketer, it’s tempting to use one of the many tools to make your website visitors aware of an offer that you want them to notice. As more and more digital marketers are using these tools, you have to be very careful in determining when to trigger a pop-up. The best conversion is made by great content. My personal opinion is that the trend of loading pop-ups will soon go away, and you will implement a subtler content-driven approach again.

Subscribe to Creators of All Trades newsletter

Discover trending apps and must-reads across social, marketing, productivity, design, tech, and startups. Subscribe now and elevate your game!

3 Responses

  1. Have you ever considered the prospect of using website push notifications to engage website visitors? Web push notifications can drive up to 9X conversions for your campaigns. Solve a host of website engagement problems with web push notifications. Visit us at moengage.com where you can learn more about engaging and converting your website visitors

    1. Hi Suraj, thanks for the tip, I will take a look at it. Push notifications in the browser are better structured and the user has to manually allow the push per site, but in my experience this is another layer of distraction. I can imagine this is interesting for things were i need to be informed in the minute, like tickets go on sale, new product available to order etc…
      Right now I see push notifications heavily used for simple content updates, I get them already via RSS etc.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Curation & Analysis

Join 1600 B2B Creators who get our bi-weekly curated newsletter.

Hand-picked content & apps across social, tech, AI, productivity!