All Collections
Dynamic Content
Adding a Pop-Up on Your Website
Adding a Pop-Up on Your Website

This guide covers best practices for adding pop-ups to your site, balancing functionality and user experience for optimal impact.

Updated over a week ago

Adding pop-ups to a website can significantly enhance user engagement and provide vital information at key moments in the user journey. However, they can also have an adverse effect if not properly implemented.

In this guide, we will delve into the best practices for integrating pop-ups into your website. From understanding tracking mechanisms to embedding forms and managing potential conflicts, we cover all the essential aspects. Our goal is to help you use pop-ups effectively, ensuring they contribute positively to your site's user experience and overall performance.

Conditions, Triggers, & Advanced Rules:

Pop-Ups can be annoying to users. So conditions, triggers and advanced rules for popup behaviors will need to be considered carefully. Here are some of the options, just so you'll know what to expect:

CONDITIONS:

  • On which page(s), posts, archives, etc. will the pop-up be displayed?

  • On which page(s), posts, archives, etc. will the pop-up be excluded from?

TRIGGERS:

  1. On Page Load: If set to Yes, set the number of seconds to wait, upon page load, before popup is triggered.

  2. On Scroll: If set to Yes, select direction (Up or Down) and the amount to scroll before popup is triggered. Down scroll is based on the percentage of the page scrolled down; Up scroll is based on the number of pixels scrolled up.

  3. On Scroll To Element: If set to Yes, enter the Selector name (CSS ID) that will trigger the popup when user scrolls to it. You must add the CSS ID to the Advanced tab of the element as well.

  4. On Click: If set to Yes, enter the number of clicks that will trigger the popup

  5. After Inactivity: If set to Yes, enter the number of seconds of user inactivity that will trigger the popup.

  6. On Page Exit Intent: Set to Yes to trigger the popup when user’s mouse activity indicates intent to exit the page

ADVANCED RULES:

  1. Show after X page views: If set to Yes, set the number of page views before popup is triggered.

  2. Show after X sessions: If set to Yes, set the number of user sessions before popup is triggered (a session starts when the user visits the website and ends when the user closes the browser).

  3. Show up to X times: Max times the popup will be displayed per session, per day, per week, per month or in total (persisting). If Count is set to On Open, this will only allow the popup to open as many times as the number set. If Count is set to On Close, the popup will only open until the user has closed it for the Xth time, after which it will not open again. This setting is set in the Local Storage and will remain there until deleted.

  4. When arriving from specific URL: If set to Yes, Show or Hide the popup if a user arrives from a specific URL (enter the specific URL). Regex is an option for advanced users to set advanced rules for matching URL patterns.

  5. Show when arriving from: If set to Yes, show if user arrives from search engines, an external link (enter URL of specific link) and/or an internal link (enter URL of specific link).

  6. Hide for logged in users: Set to Yes to hide popup for all logged-in users or from select custom roles. (Website caching can prevent this feature from working properly.)

  7. Show on devices: Set to Yes to choose to show on Desktop, Tablet, and/or Mobile devices.

Tracking

Since Pop-ups do not have a URL, they are seen by search engines as an element of each page they are displayed on. So they are not independently trackable through Google Analytics in the same way that pages are.

However, tracking codes may be added to track clicks on internal elements in some instances. Setting up this type of tracking can be a complex task, and would not be included in the cost of setting up the pop-up.

Forms

Although it is possible to embed forms in a pop-up, you can't have more than 1 form on a page, so the pop-up would need to be disabled on pages that already have a form to minimize the risk of conflicts.

Potential Conflicts

Having multiple pop-ups on a website increases the risk of conflicts, especially if more than one popup is triggered on a single page. So we recommend avoiding excessive use of pop-ups on a website.

Cost:

Typically a pop-ups takes about 2 to 3 hours between consulting, design, development and optimization. But, like a web page, that can vary depending on the type and amount of content, and the desired functionality. Also, the size and complexity of the website can pose challenges with pop-ups, so troubleshooting conflicts can also add to the cost. After clarifying what your needs are, and the scope of work involved, your account manager can provide an estimate for the project.

Conclusion

The proper use of pop-ups on your website can be a powerful tool for engaging visitors and conveying crucial information. We hope this guide has shed light on the nuanced approach required for their successful implementation. Remember, the key is to balance functionality with user experience, ensuring that your pop-ups are helpful, not intrusive.

If you have further questions, the New Urban Media support team is always ready to assist.


Did this answer your question?