The Scroll Triggered Popup extension is the ultimate tool to help you show eye catching acceptable popups. This is a perfect option for all the devices possible. You can show your popup offers on a mobile device, on a desktop, on a tablet, etc., being sure that it won’t disturb your site visitors.

Plugin Version: 3.3.0
 
WordPress plugin Popup Builder Scroll

Plugin Features

Simply select the part of the page for showing the popup, in percentages, and display the popup when the visitor reaches to that part scrolling down the page. You can be sure that the visitors have had time to have some knowledge about your website and might be interested in your offer while they scroll the page.

The Scroll popup extension can be a perfect means for bloggers, for example, if they want to collect more subscribers. As they can be sure that the readers are interested in the post as they scroll the page, and might be interested in more subscribing to your newsletter.

Specifications:

Release date: 11-10-2020
Last updated: 18-05-2022
Type: Paid
License: GPL 
Subject: Structure & Navigation
Compatibility: W5.x
Includes: Plugin
Language packs: English
Developer: Popup Builder

Rating:
4.5308056872038 1 1 1 1 1 (211 Votes)

Download by subscription!

You need to log in on the site and purchase a club subscription!

Share with your friends!

 

How to Configure Popup Builder Scroll in WordPress

This guide to Popup Builder Scroll will help you tie a popup to a visitor’s actual engagement with a page, plan a considerate display, configure the scroll event, and check that the offer does not interrupt reading. You’ll follow the setup from installation through measurable testing on different devices, then decide whether this trigger is right for your site.

This is not a separate type of popup. Popup Builder Scroll is an extension that adds the On Scroll event to a popup you have already created in Popup Builder. So it helps to think in terms of a sequence rather than simply “show a popup on scroll”: the page has a meaningful point, the visitor reaches it, a rule detects the scroll, the popup appears once at an appropriate moment, and you check the behavior in a new browser session.

This approach works especially well for a long article, service page, catalog, or post with a subscription form, where visitors should first have a chance to see the main value. It is a poor substitute for navigation, a required notice, or an aggressive attempt to stop every visitor. What matters is not the display itself, but whether the offer fits what the visitor has read so far.

Popup Builder Scroll guide cover showing how page scrolling can trigger a relevant popup
This instructional illustration shows the core idea: scrolling is not the goal in itself. It signals that a visitor has reached an important part of the page.

When scrolling is a useful signal

Popup Builder Scroll is useful when reading depth gives you a rough idea of a visitor’s intent. In an article, the trigger might follow the introduction and appear as the reader reaches the practical instructions. On a service page, it could appear after the description of the customer’s needs and before the contact form. In an online store, it might follow the product specifications, shipping information, or FAQs. In an educational resource, it could appear at the end of the first major section, once the reader understands the topic and can decide whether to get an additional checklist, consultation, or subscription.

Choose one clear value proposition for one specific context. An offer to download a guide after a section about configuration feels relevant. A random discount in the middle of an instruction interrupts the reader. The trigger itself cannot make an offer useful; it only chooses when to show it. First answer two questions: what has the visitor seen before the popup appears, and why is the next step a natural continuation of that material?

When a scroll trigger makes sense

On a blog, a popup can invite readers to subscribe for more on the same topic. On a service page, it could offer to collect a brief description of the visitor’s needs after they have read about how the service works. In a catalog for a complex product, it makes sense to wait until after the specifications and compatibility information rather than show the popup immediately. For a local business, it could invite visitors to book a consultation after they have reviewed the services and service area. In every case, the popup should use the same language as the page and offer a small next step rather than ask too much of the visitor.

On a short page, a scroll percentage is often unreliable because visitors reach it almost immediately. On a very long page with varied content, the same percentage can land in different sections across different versions of the page. In these cases, it is more useful to target a specific page element. The extension lets you enter a CSS class for the element that should trigger the popup. This turns a vague instruction like “after halfway down the page” into a more meaningful one, such as “after the program section” or “after the package details.”

Who should use it, and who should choose another approach

This tool suits an editor, marketer, or site owner who can identify meaningful points in a page and is willing to test a popup without pressuring readers. It works when there is one clear call to action, such as subscribing, submitting a request, viewing a resource, starting a product search, or saving a promo code. For a developer, it is a convenient way to tie a popup to an existing CSS class without building a scroll-trigger workflow from scratch.

Do not start with Popup Builder Scroll if you have not decided what content to offer, the form does not work well on mobile, or the page already has several competing popups. Fix the offer and page structure first. Do not use scrolling to show critical legal notices, required age confirmation, data-retention warnings, or actions visitors must take before reading. Those need a more direct and predictable method.

Three trigger options and what they mean

How to choose a Popup Builder Scroll trigger for your page
Condition What it tracks When to use it What to check
Percentage distance Relative reading depth The page has a fairly consistent length and one main topic Check that the popup does not appear too early on a small screen
Pixel distance Exact distance from the top of the document The height of the key section rarely changes Check whether banners, images, or editorial changes shifted the trigger point
Element CSS class Arrival at a specific section of the content The offer relates to a particular block or call to action Confirm that the class is present in the published markup and is not duplicated unnecessarily
Scroll up The reader’s return from the lower part of the page You want to offer a gentle reminder on mobile Check that normal reading and accidental scrolling do not trigger the popup

The table does not replace testing on the actual page. A percentage is convenient because it can accommodate moderate changes in page length. A CSS class gives you a closer connection to the content, but requires editors to use it consistently. Pixels are easier to use in a controlled template, but are more sensitive to new blocks. Scroll-up can be a gentle fallback on mobile, but it should not be treated as equivalent to every other exit trigger.

What to prepare before installation and the first display

Preparation saves more time than hunting for a hard-to-spot conflict later. The extension works with the main Popup Builder plugin, so first make sure the base plugin is installed, activated, and able to create a standard popup. Then choose one test page and one test use case. Do not start by showing the popup across the entire site. If something goes wrong, it will be harder to identify which page, template, or device is causing the unexpected behavior.

Review the popup content before configuring the trigger

Prepare a short heading, one sentence explaining the benefit, one clear call to action, and a way to close the popup. If you are collecting contact details, review the consent text, submission handling, and the page or message shown after a successful action. If the popup leads to another resource on your site, make sure that resource is available and matches the offer. Do not attach a scroll trigger to an empty or unfinished popup. It may open correctly, but visitors will encounter a broken journey and are unlikely to return to the action.

Keep the content concise. Scrolling shows that someone is engaged with the page; it does not mean they are ready to fill out a long form. For a first test, try a form with only a few fields, a button that leads to a product search, a short coupon code, or an offer to save the resource. Save a complex form, large catalog, autoplay video, or several unrelated buttons for a different page format.

Set up a reliable test

Open the page in a separate browser window where you can clear site data or use a new profile. Limits on repeat displays are tied to browser data, so a standard page refresh may not recreate a first visit. Before you start, write down the expected behavior in plain language: “On the test article, the popup appears after the benefits section. I can close it, another scroll in the same session does not bring it back, and the text and button fit on a phone.”

If you are using an element class, choose a clear name, such as scroll-offer-point, and add it to the right block in the editor or template. Do not use a random class created by the theme’s styling; it may disappear after a layout change. Avoid adding the same class to several sections until you have tested the behavior. The popup needs one clear reference point. Otherwise, it will be hard to tell which of several matching elements triggered it.

Install the base plugin and extension in the right order

Popup Builder Scroll has two distinct roles. The main Popup Builder creates and edits the popups themselves, including text, HTML, images, subscriptions, and other types available in your installation. The Scroll Triggered extension does not add a new popup type. It adds an event you can assign to a popup you have already created. This explains a common source of confusion: after installing the extension, someone looks for a “Scroll popup” in the list of types and assumes the extension is not working. The event is configured in the selected popup’s events section.

Start with the base plugin. In the WordPress admin area, go to Plugins → Add New, find Popup Builder, and install and activate it. If you already have the ZIP archive, you can also go to Plugins → Add New → Upload Plugin, select the archive, and install and activate it. The Popup Builder section should then appear in the left-hand menu. Only after the base plugin is active should you install the Scroll Triggered extension archive using the same standard upload method.

Keep installation separate from campaign setup. First confirm that both extensions are active. Then create a simple test popup without complex integrations. Once it saves and appears in the preview, assign the scroll event. This order helps you distinguish an installation problem from a trigger problem, and a trigger problem from an issue with the design or form.

Steps in the WordPress admin area

  1. Install and activate the main Popup Builder in the WordPress plugins section.
  2. Confirm that Popup Builder appears in the menu and that you can open the new popup editor.
  3. Upload the scroll extension ZIP archive through the standard plugin upload form and activate it.
  4. Create a test popup of a suitable type, give it a clear internal name, and save a draft.
  5. Open the popup settings, find the Events section, and select On Scroll.
  6. Configure one trigger method, save your changes, and test the page in a new browser session.

The popup’s internal name does not have to match the heading visitors see. A useful internal name identifies the page, condition, and version of the use case, for example Analytics article / after benefits / subscription. When you have several popups, this helps prevent a situation where the right rule is active on a page but the editor opens a different, similar popup to make changes.

Why you should not assign multiple events without testing

Popup Builder supports different events, including display on page load, click, hover, scroll, and others added by extensions. Each additional condition changes what visitors can expect. If you enable both page-load and scroll events for the same popup, it may appear before the visitor reaches the intended point. You will not be able to evaluate the reading experience fairly. For your first working setup, use only On Scroll and leave other automatic events disabled.

That does not mean you can never combine different methods. A site might have separate popups for different user journeys: one opens when someone clicks a help item, while another is offered to readers near the end of a long article. Each popup should have its own purpose, content, display limit, and test plan. A single popup that tries to handle every situation is hard to explain to the team and even harder to troubleshoot after changes.

How On Scroll turns page movement into a popup

The mechanics are straightforward, but it helps to understand them before choosing values. The browser loads the page document and tracks its scroll position. The setting in Events defines a threshold: a distance, a portion of the document, or an element identified by a CSS class. When the condition is met, Popup Builder has a reason to open the selected popup. Its regular settings then take effect: position, appearance, how it closes, limits on repeat displays, and, if configured, page display rules.

This leads to an important distinction: the event answers “when,” but it does not replace the settings that answer “where,” “for whom,” and “how often.” If the popup is not visible, the cause may be its display scope, page conditions, frequency limit, saved browser data, or conflicting styling rather than the scroll distance. If the popup appears but gets in the way, the issue is often its size, position, close behavior, or repeat frequency rather than the event.

Distance: percentages and pixels

A percentage represents a relative portion of the page scroll. For an article, it is less sensitive to small edits: adding two paragraphs keeps the trigger at roughly the same point in the reading experience. Start with a moderate depth that comes after the main explanation, not before it. Do not choose a value just because it looks “marketable.” Open the page, scroll to the point where the offer feels relevant, and then compare that position with the actual page depth.

Pixels make sense when the page is built from stable blocks and the target area stays in roughly the same position. For example, in a fixed landing page template, the height may change very little between the hero section and the benefits block. But if the top of the page contains rotating banners, ads, dynamic reviews, or editorial inserts, the chosen value can quickly become inaccurate. After a substantial page edit, check the pixel threshold again, just as you would any other interface element.

Use an element as a meaningful trigger point

The Element mode gives you a closer connection between the content and the offer. Assign a class to the target block, then enter that CSS class in the event field. For example, a comparison section on the page might use the class scroll-offer-point. When the reader reaches it, the popup can offer a more detailed explanation, a consultation, or a curated list. The class must be present in the published markup, not only in the editor’s draft.

Do not enter a selector unless you can verify it on the published page. An entry such as .scroll-offer-point must match the class added to the target container. If your editor has an “Additional CSS class” field, use it. If a developer adds the class to the template, include its purpose in the task notes. This is safer than relying on a theme styling class that may disappear when the design changes.

Scroll up as a special use case

The Scroll to top option responds to movement up from the lower part of the page. It can serve as a gentle reminder for mobile readers: a visitor finishes the content, starts moving back to a section they want to revisit, and sees a short offer at that point. This option requires especially careful frequency settings. People often scroll up on a phone simply to check something they have read, so the popup should be compact, easy to close, and should not appear with every upward movement.

In short: Create the popup separately from the trigger, enable one On Scroll event, then choose a percentage, pixel distance, or element based on the page rather than habit.

Configure Popup Builder Scroll after installation

After activation, do not automatically copy settings from another popup. A scroll event has a specific purpose: giving visitors time to engage with the current page. So configuration starts with choosing the popup, not with setting the threshold. Go to Popup Builder → Add New, choose an available popup type, enter concise content, and save it. Then return to Events, select On Scroll, and open the event settings.

Start with one trigger point and one offer. If the page describes a service, show the popup after the section about its terms and offer a natural next step. If it is an article, connect the offer to the topic. Do not try to test a percentage, an element, and scroll-up behavior at the same time in your first configuration. Each option represents a different hypothesis, and the test should make it possible to understand what affected the outcome.

Configure Distance

The distance setting determines when the popup opens. Start with a percentage if the page height may change. Open the published page in a separate test browser and read it at a normal pace. Identify the point where the visitor has received an answer to the page’s main question but has not yet finished their journey. That is where an offer can naturally lead to a next step.

After choosing a threshold, save the popup and run two checks. In the first test, scroll slowly from the top and note when it fires. In the second, drag the scrollbar quickly past the target point. If the popup opens with only one of these methods, do not try to compensate by changing the value at random. First check for another event, a frequency limit, or a page display condition. If both tests behave consistently, move on to the mobile version.

Choose a pixel value when you can name a specific reason for that point, such as the end of a fixed top section, table, or benefits block. After publishing a new banner, changing an image, or expanding the text, run the test again. Pixels are not inherently a problem, but they require more careful content maintenance.

Configure Element

Use the element condition when meaning matters more than distance. Add a separate class to the target block’s container. In the WordPress block editor, you can often do this in the block’s additional CSS classes. In a page builder, look in the section’s advanced settings; in a template, ask a developer to add it. Choose a class name that describes the block’s role, not its appearance. For example, scroll-offer-point is better than blue-section because the first name remains meaningful if the design color changes.

Enter the class in the event settings using the format expected by the field. Then open the published page and confirm that the target block appears only once. If the class is used twice, the trigger may be hard to explain: the popup could fire at the first match, earlier than expected. For different pages, create distinct trigger points or use one class only in a template you control closely.

<div class="scroll-offer-point">
  <h2>Compare the options</h2>
  <p>At this point, the reader has the key context.</p>
</div>

This snippet illustrates the markup, not a required editing method. In most cases, it is better to add the class through the editor or template. After publishing, check the public-facing page: adding a class in the admin form does not guarantee that it made it onto the actual page container.

Popup Builder Scroll setup diagram showing the On Scroll event, threshold, and meaningful page trigger point
This instructional diagram connects the event choice and threshold or CSS class with a point on the page where the popup can be tested.

Keep the event separate from display rules

After assigning On Scroll, check the settings that define where the popup can appear. Popup Builder has display rules that let you include or exclude pages and sections of your site. These rules have a different purpose from the event: they determine which pages the popup can appear on, while On Scroll determines when it opens on an eligible page. If you confuse these settings, you might mistakenly conclude that the scroll threshold is not working.

For the first test, choose one page or one clearly defined post type. A broad “everywhere” rule is usually a bad idea at this stage: the popup could appear in an archive, a utility template, or on a page where the offer has no context. Once the use case is working, expand its reach one segment at a time. After each expansion, check not only the target page but also nearby templates, such as posts, archives, search pages, product pages, and pages with shorter content.

Display frequency: prevent repeat interruptions

In Advanced, find the display limit setting. It lets you set how often the same visitor can see a popup, along with a period in days or a session-based option. This feature relies on browser data, so the same person may see the popup again in another browser, on another device, or after clearing their data. Do not assume this setting identifies a visitor precisely.

For a first, unobtrusive setup, choose a low frequency and check whether the popup reappears after being closed and after another scroll. If the offer appears on several pages, decide whether the frequency limit should apply to a particular page or across the site. For a local campaign, it may make sense to limit the popup on pages where the reader has already seen the offer. For a site-wide subscription popup, avoid following people from one article to the next.

Do not assume the popup is broken just because it does not appear in your browser. First open the page in a new private session or clear the site data, then repeat the test. Conversely, if the popup appears too often, check the saved settings, the frequency limit, and whether a second popup with similar content is also active.

Size, content scrolling, and how to close the popup

The event fires on the page, but visitors experience the popup as a whole. The advanced settings include options for position, animation, stacking order, scrolling within the popup, and disabling page scrolling. For most informational offers, start with a compact popup, a visible close button, and very little text. If the content exceeds the set dimensions, enabling scrolling inside the popup can prevent it from being cut off, but that is not a reason to put a long article inside it.

Locking page scrolling makes sense only when the popup requires a separate decision. For a voluntary subscription or a tip, it often makes the experience more cumbersome, especially on a phone. In a considerate setup, visitors can close the popup and continue reading without struggling to control the page. Choose animation to make the popup’s appearance clear, not to add spectacle: excessive movement can feel like an error or an ad before the visitor has read the text.

Popup order and competing use cases

If a page has multiple popups, pay attention to the stacking order setting. A popup with lower priority may be hidden behind another one. Do not try to fix this by simply raising every value. First ask why several automatic popups are allowed to appear on the same page. In most cases, it is better to separate them with display rules and frequency limits, keep one automatic popup, and make the others appear only after an explicit user action.

Configuration check: In a new browser session, the popup should open once after the selected section, remain readable on a phone, close without delay, and stay off unrelated pages.

Practical use case: offer help after visitors learn about a service

Consider a service page with a detailed description. The goal is not to interrupt visitors in the hero section, but to offer a short project brief to those who have reached the “How It Works” section. They have already seen the problem, the steps, and the key details, so the popup continues the conversation: “Want to discuss your project? Tell us what you need in a short form.” This is more considerate than showing a form as soon as the page loads, before the visitor has read the context.

Set the goal and prepare the page

Create a test copy of the page content or temporarily limit the display rule so you do not change the experience for every visitor before testing. Find the block that follows the explanation of the steps. If your editor allows it, add the additional class scroll-offer-point. In the popup, include a heading, one sentence, a button or short form, and an easy-to-find close control. Make sure visitors can continue reading from exactly where they left off after closing it.

The offer should follow naturally from the content visitors have just read. If the section explains how to prepare materials, the popup could list what to include in a request. If it explains the timeline, the popup could offer an initial assessment. Do not introduce a bold promise that has nothing to do with the page. Popup Builder Scroll detects interest through behavior, but the content still needs to deliver on the page’s promise.

Build the popup

  1. Go to Popup Builder → Add New and choose a popup type that fits your use case.
  2. Give it the internal name Service / after steps / brief to distinguish the test from other campaigns.
  3. Add a short heading, explanatory text, and one action: a link to a form or a few required fields.
  4. In Events, select On Scroll and set the trigger to the element .scroll-offer-point.
  5. In the display rules, include only the test page or the template that contains the target section.
  6. In Advanced, set a modest repeat limit, save your changes, and note how you will test a new visit.

Why use an element instead of a percentage here? A service page may change as an editor adds a review, a process photo, an answer to a question, or a new example. A percentage would shift the popup’s timing, while the class would remain tied to the same meaningful transition in the content. If someone deliberately moves the block in the editor, the trigger point moves with it, which usually matches the page author’s intent.

Test the visitor journey

Open the published page in a new private window. Start at the top and scroll as a real visitor would. When the target block enters view, the popup should open once the condition is met. Close it, finish reading, then scroll back up a little. Make sure that another scroll does not trigger a series of identical popups. If you are using a session limit, run a separate test after starting a new session.

Next, test the page on a phone. Mobile visitors have less screen space, are more likely to scroll accidentally, and the target block may span several screens. Check the heading size, whether the close button is easy to reach, whether any text is cut off, and whether the reading position is preserved. If the popup requires horizontal scrolling, covers all the text, or appears as soon as someone scrolls back up, do not try to fix it with a new animation. First shorten the content, change where it appears, or choose a different type of offer.

Popup Builder Scroll use case: a visitor reads a service page, reaches the steps section, and sees a relevant offer
This example connects a meaningful point on the page with the outcome: the form appears after visitors learn about the steps, not as soon as the page loads.

How the event, display rules, and limits work together

It helps to think of the finished configuration as four separate layers. The first is the content: what visitors see. The second is the event: why the popup opens at that moment. The third is the display rules: which pages allow this use case. The fourth is the repeat limit: how often the same popup can appear during a particular browser’s visit. When you name these layers separately, it is easier to locate and explain a problem to another editor.

Input, rule, visible change, and check

In our example, the input is the scroll-offer-point block entering view during scrolling. The responsible rule is the On Scroll event with the element condition. The state change is Popup Builder being allowed to open the selected popup. The visible outcome is a compact offer with a form or button on the same page. To verify it, start a new browser session, scroll normally to the block, close the popup, repeat the scroll, and test on a mobile screen.

This sequence helps separate observations from assumptions. If the block appears but the popup does not, check the element condition, display scope, and whether the extension is active. If the popup appears but offers no value, the issue is with the content, not the technology. If it keeps reappearing, check the display limit and test environment. If it covers the text, adjust the styling and close behavior. Do not change everything at once: make one change per layer and test one hypothesis at a time.

What a good outcome looks like

A good outcome is more than a popup that technically appears. Visitors should understand why they are being offered an action at that particular point. On a service page, it may make sense after the process has been explained. In an article, show it after the content has provided value on its own. In a catalog, it may follow specifications or a comparison. In an appointment form, it may come after the terms and FAQs. The popup should not hide important content, make visitors hunt for the close button, or reappear after every scroll.

It can help to keep a short test log for the team. Note the page, trigger point, condition type, offer text, display rule, expected frequency, and date of the last check. This is not bureaucracy; it protects against accidental edits. A month later, the team can still see why a class is on a particular block and which popup needs it. This is especially useful when several editors share the work, the page builder changes, or the template is redesigned.

Use case for a long article

On an educational page, do not show a popup before the reader has received a useful answer. Place the trigger point after the first major explanation or the comparison table. Offer something that deepens that topic, such as a short checklist, template, set of related lessons, or subscription for more. Do not turn the popup into a second advertising panel for a different subject. Readers should feel that you respect their path through the content rather than using scrolling as an excuse to interrupt it.

After editing the article, run the test again. New images, a longer introduction, or a moved table can change the reading experience even if the CSS class remains in place. Ask yourself: has the reader received the promised value before the popup appears? If not, move the trigger point lower or replace the offer with one that asks less of the visitor.

A considerate approach for a store

On a complex product page, the scroll event could follow the specifications, compatibility information, or shipping and return terms. In the popup, you might offer a comparison, an in-stock notification, or help choosing, if those options are actually available on the site. Do not use it to cover the cart, checkout, or required information. On a store page, it is especially important to check that the popup does not cover a key action or make it hard to return to the specifications.

Practical rule: If you cannot name an offer that follows naturally from the content before the trigger point, do not enable the scroll event on that page.

Check the behavior after publishing

Publishing the configuration is the start of testing, not the end. Popup Builder Scroll depends on the page’s actual markup, browser behavior, saved data, theme, and other extensions. So your test should follow a visitor’s journey rather than stop at previewing the form in the admin area. It helps to test first visits and return visits separately: the first check tells you whether the popup appears at the right point, while the second tells you whether it respects the display limit.

Desktop and mobile checklist

  1. Open the target page in a new private session so you do not use a saved display limit.
  2. Scroll through the document at a normal pace and check whether the popup appears after the chosen percentage, pixel threshold, or element.
  3. Close the popup and continue reading. Check that it does not cover important content or interfere with scrolling.
  4. Scroll through the page again in the same session to check the frequency.
  5. Open the same page on a narrow screen or in an emulator and check the size, ease of closing, and readability.
  6. Visit a neighboring page, archive, or template where the popup should not appear and confirm that the display rules work.

You do not need complex analytics for the first check. First confirm the basic sequence: visitors see the main content, reach a relevant point, get one clear offer, can close it, and do not see it repeatedly. Only then does it make sense to compare different wording or trigger points. If the sequence itself is inconsistent, any conclusions about visitor response will be unreliable.

What to check when using a CSS class

Open the published page and confirm that the trigger point is actually in the rendered markup. With a page builder, a class may sometimes be added to an internal editor element instead of the actual container on the public-facing page. A template change, page cache, or delayed content loading can also affect when the browser receives the target block. Do not try to compensate by arbitrarily increasing the distance. First confirm the trigger point itself.

If the same class is used on several elements, temporarily leave it on just one or rename it for the test. If the popup then opens correctly, you have found an ambiguity in the markup, not a technical incompatibility. Then restore the intended structure so each use case has its own clear trigger point.

Popup Builder Scroll troubleshooting diagram covering the On Scroll event, CSS class, display limits, and page behavior
This diagram helps you trace a symptom to the relevant configuration layer: the event, trigger point, display rules, or repeat limit.

Troubleshooting Popup Builder Scroll: symptoms, checks, and safe fixes

It is easiest to troubleshoot a scroll use case by starting with what you can observe. Change one setting at a time, save your changes, and repeat the test in a new session. This helps preserve the parts of the configuration that already work and keeps troubleshooting from turning into random edits across every field.

The scroll event is missing from the settings

Symptom: On Scroll is not available for the popup you created. Likely cause: Only the main Popup Builder is installed, or the extension archive was not activated. What to check: Review the plugin list and confirm that the scroll extension is active, then check whether the saved popup has an Events section. Fix: Activate the base plugin first, then the extension, and create or reopen the popup. When to roll back: If the problem started immediately after a batch update, do not manually change other popup settings until you confirm that both components are active.

The popup does not open when visitors reach the trigger point

Symptom: The page passes the target section, but nothing happens. Likely causes: The event was not saved, the CSS class is incorrect, a display rule excludes the page, or the browser already has an active display limit. What to check: Confirm that On Scroll is selected, the class matches the published markup, the current page is eligible, and the issue also occurs in a private window. Fix: Leave just one condition, narrow the display rule to the test page, and repeat the journey. When to roll back: If the change causes unexpected popups in other sections, restore the previous narrow rule and test one setting at a time.

The popup opens too early or too late

Symptom: The offer appears before the main explanation or after the useful action is over. Likely cause: The percentage was chosen arbitrarily, the pixel threshold became outdated after a page edit, or the trigger class is on the wrong container. What to check: Review the current block order on the published page, the height of any new content, and when the popup appears during normal reading on a phone. Fix: Move the meaningful trigger point or use an element class instead of a distance. When to roll back: If the new threshold makes another version of the page worse, restore the previous value and create a separate use case for the other template.

The popup keeps reappearing

Symptom: After closing it, visitors see the same popup again with every scroll. Likely cause: The display limit is not configured, its mode does not fit the use case, or a second similar popup is active on the page. What to check: Review Popup Showing Limitation, check how many popups have the same rules, and compare a test in a new browser with one in the same session. Fix: Set a sensible frequency, temporarily disable duplicates, and repeat the test. When to roll back: If the limit is too broad and hides a useful popup even on a test first visit, return to a shorter period and test the use case again.

The popup interrupts reading on a phone

Symptom: Text is cut off, the close button is hard to reach, the popup fills the screen, or it appears during a normal return to a section. Likely cause: Too much content, a poor position, page scrolling is locked, or the scroll-up trigger is too sensitive. What to check: Review the width, height, close behavior, content scrolling setting, and page movement in a real mobile browser. Fix: Shorten the text, leave one action, reduce interference with scrolling, and reconsider the trigger point. When to roll back: If the new design still covers the main content, disable automatic display on phones until you can test a separate setup instead of trying to hide the problem with animation.

The page behaves unpredictably after changes

Symptom: The Events section or display rules are empty, the popup behaves differently after clearing the cache, or the behavior changes when you enable a different theme or extension. Likely cause: A saved cache, a plugin conflict, a change to the theme markup, or several overlapping use cases. What to check: See whether the issue remains after clearing the cache, whether it recurs when you temporarily remove a recent change, and whether the trigger point exists in the source HTML. Fix: Test on a copy of the site, disable only one suspected component at a time, and record what you observe. When to roll back: If a design or optimization change suddenly breaks the popup, restore the last safe configuration and then check compatibility one layer at a time.

Safe practice: Before changing complex rules, save a list of the current settings and test on a copy of the site. Do not edit WordPress core files, the main plugin, or the extension to configure a scroll event.

Maintain the use case after the first tests

A working configuration should not become an invisible part of the page that no one checks. Changes to the top sections, theme, page builder, cache, offer text, or form can alter the actual visitor journey. After a major editorial change, run a brief check: start a new browser session, scroll normally, close the popup, scroll again, test on a phone, and visit a neighboring page. This takes little time and can catch problems faster than waiting for a visitor to report that a form was covered or an outdated offer appeared.

Also check that the content at the trigger point still matches the popup. If the article changes, the offer that follows it may lose its context. The scroll-offer-point class may technically remain in place while the page’s meaning has changed. When restructuring the content, do not hesitate to disable the automatic popup until you have decided what to do next. No popup is better than one that unexpectedly offers an action unrelated to what the visitor has read.

A simple maintenance plan for your team

For each use case, keep an internal record with the popup name, target page or template, event type, trigger point, display limit, offer text, and expected behavior. If the use case depends on a CSS class, note which block it is on and who is responsible for moving it during a redesign. This helps an editor avoid deleting a class that looks “unfamiliar” and prevents a developer from mistaking it for a styling detail.

When the text changes, update the offer first, then test when it appears. When the page structure changes, check the trigger point first, then the frequency. When the theme or optimizer changes, check the public-facing markup and cache behavior first, then the popup design. This sequence follows the actual dependencies: content determines meaning, markup determines the trigger point, rules determine where the popup can appear, and the limit determines the repeat experience.

Accessibility and respect for the reader

Scrolling is a normal action, not consent to being interrupted. Keep the popup short, provide a clear way to close it, and do not hide important page content. Do not aggressively disable familiar controls for a voluntary offer. If visitors need a form to contact you, keep another route to it in the regular page content so they can return to it without waiting for another popup. This makes the use case more useful for people who closed the popup, use a keyboard, or read at an unusual zoom level.

If the popup contains a form, check that field labels are clear and that the form shows the right state after submission. The trigger itself does not make a form accessible or easy to use. If the popup leads to another page, write the button label so visitors know what will happen next. If you invite them to save a resource, make sure the resource matches the section that comes before the offer. This is a simple matter of editorial discipline, but it is what separates a useful popup from a mechanical overlay.

Final Popup Builder Scroll check on a WordPress page, showing the content trigger point, popup, frequency limit, and mobile behavior
This final instructional illustration shows the complete flow: the page provides context, the event opens one relevant popup, and the frequency limit prevents repeated interruptions.

Questions about configuring the scroll event

Why does Popup Builder Scroll not appear as a separate popup type?

Because scrolling is an event, not a type of content. First create a suitable popup, then select On Scroll in its Events section. If you look for a separate “Scroll” type, you will not find the option you expect.

Should I use a percentage or a CSS class?

A percentage works for pages with a consistent reading flow and varying lengths. A CSS class is better when the offer depends on a specific content block. If you use a class, check it in the published markup and avoid using the same class for several different trigger points unless necessary.

Why does the popup not appear again during my test?

The display limit uses browser data. After the popup has appeared, it may not open again during the same session. Test a first visit in a private window or after clearing the site data, and check repeat behavior separately.

Can I use scroll-up as a gentle reminder?

Yes, this setting may be useful on a mobile device when someone is returning from the lower part of the page. Test it carefully, though: normal upward scrolling should not trigger an annoying popup every time someone returns to the text.

What should I do if the popup covers the main text on a phone?

First shorten the content, keep one action, and check the popup’s position and close control. Then decide whether page scrolling needs to be locked. If the use case still feels intrusive, disable automatic display on that device until you have redesigned and tested it. Do not try to hide the problem with animation.

Should the popup appear on every page of the site?

No. Start with one page or one type of content where the offer naturally relates to what visitors have read. Use display rules to exclude places where the popup does not fit, such as archives, utility templates, short pages, or sections with a different purpose.

Can a scroll event replace the regular form on the page?

No. A popup is an additional way to reach the form, not the only one. Keep a regular form, button, or another clear option in the page content so visitors do not depend on the exact moment the popup appears.

When Popup Builder Scroll is a good fit

Use Popup Builder Scroll when the base Popup Builder is already working, the page has a clear content trigger point, and you can offer one next step that fits what visitors have read. A strong configuration does not depend on lots of effects. It uses a precise trigger point, narrow display rules, a sensible frequency limit, concise content, and repeatable checks on desktop and mobile.

If you are ready to follow these steps, you can download the Popup Builder Scroll archive, install the extension alongside the active base plugin, and start with one test use case. Do not expand its reach until you have confirmed that the popup appears at the right moment, does not interrupt reading, and still fits the offer after editorial changes to the page.

By OceanTheme.org Editorial Team

 

You are not logged in to post comments.