CodeCanyon Popscroll is a WordPress scrolling page popup plugin that enhances user engagement with attractive popups sliding elegantly into view as users scroll, mimicking the popular Facebook-like behavior. This plugin seamlessly integrates a scroll overlay popup box feature, allowing website owners to creatively capture visitors attention and encourage interaction.

Plugin Version: 2.1.0
 
WordPress plugin CodeCanyon Popscroll

Plugin Features

Its intuitive settings panel offers customization options to tailor the popups appearance, behavior, and content to suit diverse website needs. With easy-to-use controls, users can define scroll delay, animation speed, popup size, and trigger events effortlessly. This versatility empowers website administrators to design captivating popups aligned with their branding and marketing strategies effectively.

Through its responsive design, CodeCanyon Popscroll ensures that the popups adapt seamlessly to various screen sizes, providing a consistent user experience across devices. This responsiveness is crucial in todays mobile-centric landscape, where engaging mobile users is paramount for website success. By catering to mobile responsiveness, this tool helps maximize audience reach and engagement.

The scroll-triggered popups the plugin offers can be utilized for multiple purposes, including promoting products, growing email subscribers, sharing announcements, or directing visitors to specific pages. This versatility makes it a valuable tool for conversion optimization and enhancing website communication strategies. By strategically deploying these popups, website owners can drive user actions and achieve their business objectives efficiently.

Furthermore, seamless integration with WordPress websites ensures easy installation and compatibility with existing themes and plugins. This integration minimizes technical hurdles, allowing users to quickly implement and leverage the features without extensive coding knowledge. With its user-friendly interface and robust functionality, this solution provides a powerful tool for website owners seeking to elevate their engagement and conversion rates.

Specifications:

Release date: 12-01-2016
Last updated: 13-05-2017
Type: Paid
License: GPL 
Subject: Style & Design
Compatibility: W4.x
Includes: Plugin
Language packs: English
Developer: CodeCanyon

Rating:
4.4979423868313 1 1 1 1 1 (243 Votes)

Download by subscription!

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

Share with your friends!

 

How to Set Up CodeCanyon Popscroll for WordPress

CodeCanyon Popscroll is useful when you need to show a social block, an offer, a subscription form, or a small custom HTML element on a website not immediately on entry, but after the visitor takes a meaningful action - scrolling to a specific point on the page. This guide covers installation, initial testing, the best settings for a WordPress site, real-world use cases, troubleshooting, and the limitations you should understand before enabling the plugin for a live audience.

CodeCanyon Popscroll used as a scroll-triggered social block for WordPress
The core Popscroll logic: the visitor reads the page, reaches a defined point, and then sees a clean side or bottom block.

The main idea behind Popscroll is different from a standard popup. The plugin is not supposed to cover the first screen or interrupt reading right after the page loads. It comes into play later, once the user has already shown interest in the content. That is why the setup here is built not around maximum visibility, but around balance: where to show the block, when to open it, how often to repeat it, and what to do on mobile devices.

There are no promises here that every old social button will keep working forever. External widgets from social platforms change, and some older integrations stop displaying or need to be replaced. That is why this guide calls out separate checks for the Facebook block, custom HTML, cache, theme behavior, and page-level display rules. This helps you use CodeCanyon Popscroll as a controlled tool rather than a random, annoying widget.

What a Scroll-Triggered Popup Block Is Good For

Popscroll solves a narrow but practical problem: showing a compact block at the moment when the visitor is already interacting with the page. That moment is often more valuable than displaying something immediately after the site opens. If someone has scrolled through the content, they are at least somewhat interested in the article, product, or brand. That is why a scroll-triggered popup is usually a better fit for a soft invitation to subscribe, visit a social profile, or view a small offer.

According to product descriptions and catalog listings, Popscroll supports social integrations, different visual themes, appearance customization, positioning, animations, trigger point selection, admin-side preview, hide-on-scroll-up behavior, cookie settings, mobile disable mode, visibility rules, and custom HTML. Some of the social options mentioned in older materials relate to outdated platforms, so what matters is not the list of logos but the actual result on the site.

Typical Use Cases

In practice, CodeCanyon Popscroll is most often used in four scenarios. The first is social engagement: showing a Facebook page block or a channel link after the reader reaches the middle of an article. The second is subscriptions: displaying a compact newsletter form through custom HTML, if the form already exists on the site and can be embedded correctly. The third is a navigation prompt: suggesting the next article, a curated resource list, or a landing page. The fourth is a promotional message: showing a coupon, banner, or short call to action without covering the content from the first few seconds.

The best use case for Popscroll is not aggressive promotion, but a contextual continuation of the reading experience. If the visitor has reached the end of a guide, product page, or blog post, a subtle block with a clear next step feels much less intrusive. But if the site tries to show a popup block on every page and every visit, the plugin quickly becomes a source of bounces.

When Another Tool Is a Better Choice

Popscroll may not be the right fit if you need a full popup builder with analytics, advanced segmentation rules, exit intent, email service integrations, and A/B testing. It also does not replace a live chat service, a store notification module, or an advanced form builder. For those tasks, it is better to look at specialized tools and treat Popscroll as a lightweight scroll-triggered block with social or HTML content.

What to Check Before Installation

Before installing the plugin, do not start with color choices or animation styles. First, you need to understand whether the block itself fits the current structure of the site. Popscroll depends on the public side of WordPress: theme scripts, scrolling behavior, caching, external social widgets, and the pages you choose. If the site is already overloaded with banners, floating buttons, chats, and subscription forms, one more block may make the user experience worse.

Quick Preparation Checklist

  • Make sure you have a staging copy of the site, or at least a way to quickly disable the plugin through Plugins.
  • Confirm which ZIP file needs to be uploaded: commercial products often include a separate installable plugin archive inside the main package.
  • Check whether the theme uses custom scrolling, infinite loading, or containers that may interfere with page position detection.
  • Open a page with long-form content where showing the block after scrolling actually makes sense.
  • Define the main action: subscription, social profile click-through, video view, coupon, or custom HTML.
  • Check whether your jurisdiction requires consent for cookies and external widgets, especially if the block connects to social platforms.

You should also verify whether external social scenarios are still current. Google+ is no longer relevant as a consumer social network, and older Meta buttons may change or stop displaying. That does not make Popscroll itself less useful as a display mechanism, but it does mean you need to be more careful about the content inside the block.

Before rolling it out on a live site, create one test page. Configure the block to display only there, then test scrolling, closing behavior, cookies, mobile mode, and cache. After that, extend the rule to a broader set of pages.

Installing Through the WordPress Admin Panel and Running the First Check

For a WordPress plugin distributed as a ZIP archive, the standard path starts in the admin panel: Plugins, then Add New, then Upload Plugin. After you choose the archive, WordPress installs the plugin and then offers the Activate Plugin button. If the archive does not install and WordPress says no valid plugin was found, the issue is almost always the wrong ZIP file: extract the purchased package locally and find the actual plugin archive inside it.

After activation, look for the new Popscroll settings item in the WordPress menu. The exact label may vary by version, so use the product name in the left menu or in the list of installed plugins as your reference. If you do not see a separate menu item, open Plugins and check for a settings link next to the plugin name.

A Safe First Test

  1. Create or choose a long test post with enough scroll depth.
  2. Enable the simplest display mode: one position, one animation, one content type.
  3. Disable display on mobile devices during the first check if you are not sure how well the theme handles responsive layouts.
  4. Save the settings using a button like Save Changes or the equivalent save control.
  5. Open the test page in incognito mode, scroll down, and verify that the block appears.
  6. Close the block, refresh the page, and check whether the cookie setting or repeat-display behavior is working.

At this stage, there is no need to turn on every feature at once. The fewer variables you introduce in the first test, the easier it is to tell whether the basic scroll trigger is working. If the block does not appear, you will only need to inspect one setting instead of a dozen overlapping conditions.

Settings Map: What to Enable Right Away and What to Leave for Later

The most useful part of Popscroll's settings is not the color scheme, but the appearance conditions. The plugin claims support for trigger point selection, position, animation, cookie behavior, mobile disable mode, hide-on-scroll-up, rules for the home page, post types, specific posts and pages, and custom HTML. These parameters should be configured in a specific order.

CodeCanyon Popscroll settings map for trigger point position cookies and mobile mode
A settings map helps you move from display conditions to styling, not the other way around.

Trigger Point

The trigger point determines when the block becomes visible. For an article or guide, it is usually better to start not at the very bottom, but somewhere after the main introduction. For a product page where the purchase block matters, the popup should appear below the key specifications so it does not interrupt the initial decision-making stage. If the settings include a way to target a DOM element by class or ID, use it only after checking the markup. That mode is useful when you need Popscroll to appear strictly after the comments block, a pricing table, or a specific section.

Do not tie the trigger to a random theme class. After a theme update, the class name may change and Popscroll will stop finding the trigger point. It is safer to use a stable content block or a deliberately added anchor, if the site editor allows that without editing files.

Position and Animation

Sources for Popscroll mention different positions such as left, right, bottom, and side placement, along with animations like slide and 3D flip. For most sites, it is safer to start with a side or bottom position and a simple animation. A complex animation may look impressive in a demo, but on a real page with a heavy theme, ad placements, and delayed loading, it more often turns into visual noise.

If the site is commercial, check whether the block covers important elements: the buy button, product filters, contact form, cookie banner, chat, or floating cart. These overlaps are more common on narrow screens, so mobile mode should only be enabled after separate testing.

Cookies and Repeat Display

Cookie settings exist so the block does not keep appearing over and over for the same visitor. Popscroll mentions a button like Don’t show this again with customizable text and cookie lifetime. For an informational site, it makes sense to let users dismiss the block for a longer period. For short-lived campaigns, you can choose a shorter interval, but you still should not show the same block on every page refresh.

Repeat display should be less frequent than it feels during setup. An administrator tests the block for a few minutes, while a regular reader may see it for weeks. If the block feels annoying during your own testing, it will be even more noticeable to visitors.

Mobile Devices

Popscroll advertises a responsive mode and the option to disable it on mobile devices. That does not mean mobile display is always necessary. On a phone, there is less space and scrolling is faster. If the block contains an external widget, an iframe, or a form, it may take up too much vertical space. Start with mobile disabled, then enable it only after testing several pages with different text lengths.

Visibility Rules

Visibility rules let you avoid showing Popscroll where it is not needed. For a blog, it makes sense to show the block only in posts, not on the home page. For a service site, only on long service pages and knowledge base articles. For a store, use caution: the popup should not interfere with the cart, checkout, or payment forms. If you need to exclude specific pages, use rules by post or page ID if that option is available in your plugin version.

Social Widgets, Custom HTML, and Outdated Integrations

Popscroll started out as a social popup block: product descriptions mention Facebook, Google+, Twitter, and YouTube. But the social web ecosystem has changed, so the list of supported platforms should not be treated as a guarantee that every old widget still works the same way. For a new implementation, it helps to separate two layers: Popscroll's display logic and the content you place inside it.

Facebook Block

If you use a Facebook page, test the public page itself, not a personal profile. The external widget should be visible in a regular browser without logging in to your administrator account. Check whether the block appears in incognito mode, whether an ad blocker cuts it off, and whether a cookie policy hides it. If the widget disappears, first replace the Popscroll content with plain text or a simple link. If Popscroll itself appears, the issue is not the scroll trigger but the specific social embed.

Custom HTML

Custom HTML is the most flexible scenario because it lets you use content that does not depend on old social platforms. That could be a short subscription form, a link to a promotion page, a video block, a reader warning, or embedded form code from another plugin. But there is one rule here: only insert HTML that you understand and can safely disable.

Safe HTML for Popscroll usually looks like this:

<div class="popscroll-offer">
  <strong>Get New Content</strong>
  <p>Subscribe to the site's newsletter and unlock a curated set of guides.</p>
  <a href="/subscribe/">Go to the subscription page</a>
</div>

This example does not require editing WordPress files and is easy to roll back: simply remove the HTML from the Popscroll field or disable the block itself. If you are embedding a form from another plugin, test it on a regular page first. Only then should you move the form code into the popup, otherwise it will be unclear where to look for the problem.

Why You Should Not Rely on Outdated Buttons

Older external Meta Like and Comment integrations have changed, and Google+ is no longer relevant for new consumer-facing scenarios. That is why, in a modern setup, it is smarter to use Popscroll as a container: show a link to a social profile, a button that leads to a channel, a lightweight form, or your own HTML block. This reduces your dependency on an external script and makes troubleshooting easier.

Practical Example: A Subscription Block After the Reader Finishes an Article

Let us walk through a scenario that works well for a blog, knowledge base, or service site. The goal is to show a clean bottom or side block after the user has read a meaningful portion of an article. Instead of a heavy external widget, the block will contain short HTML with a link to the subscription page. This option is easier to test, does not depend on social APIs, and clearly demonstrates how Popscroll works.

Example of Popscroll displayed on a WordPress page after article scrolling
Example result: the block appears after reading, without covering the beginning of the article.

Goal

You want a block that appears around the midpoint of the article, offers a subscription or a link to a curated resource page, and does not reappear after dismissal for the selected period. This approach works well on pages where the visitor has already received value and is ready for the next step.

Preparation

  • Choose one long post for testing.
  • Prepare the destination page, such as a subscription page or a curated content page.
  • Write a short, low-pressure message: one sentence of value and one link.
  • Disable mobile display during the first stage so you can test the desktop scenario without extra variables.

Setup Steps

  1. Open Popscroll settings in the WordPress admin panel.
  2. Select custom HTML as the content type, if that mode is available in your version.
  3. Paste a short HTML block with a link to the subscription page or resource collection.
  4. Set the position to the right or bottom so the block does not cover the main text.
  5. Choose a simple entrance animation, such as slide, if the setting is available.
  6. Configure the trigger point to activate after substantial page scrolling.
  7. Enable cookie behavior and a dismissal label like Don’t show this again if the field is available.
  8. Limit display to one test post or a selected post type.
  9. Save the settings and clear the site cache if you are using a caching plugin.

Verification

Open the test post in incognito mode, scroll slowly through the page, and verify four things: the block appears at the right moment, it does not cover important text, the link goes to the correct page, and the dismissal state remains after refresh. Then repeat the test in a regular browser window and on another device. If everything works, expand the visibility rule from one post to the content type you actually want.

One nuance: if the popup appears in the admin panel or for editors, check the display rules for logged-in users. For internal users, these blocks are often better left disabled.

Checking the Result on the Site, in Cache, and Across User Roles

After setup, it is important to verify more than just the visual appearance of the block. Popscroll interacts with JavaScript, cookies, cache, and external widgets, so the result may differ for an administrator, a guest, a mobile user, or a visitor after cookies are cleared. A proper check takes longer than the installation itself, but it is exactly what prevents unpleasant surprises.

Browser Check

  • Open the page while logged out and make sure the popup appears only where it should.
  • Scroll down and back up if hide-on-scroll-up mode is enabled.
  • Close the block and test a repeat visit in the same browser.
  • Clear the site's cookies or use incognito mode to confirm that the block can appear again for a new visitor.
  • Open the browser console and check for any obvious JavaScript errors after the block appears.

Cache Check

Caching plugins and optimizers can combine, defer, or move scripts. If Popscroll stops appearing after optimization is enabled, temporarily disable JavaScript combining or exclude the plugin script from deferred loading. Do this only for the specific file if you can identify it, rather than turning off all optimization permanently. After every change, clear the plugin cache, server cache, and browser cache.

Role and Page Check

If Popscroll should display only for guests, test a guest and a logged-in user separately. If the plugin shows the block on posts but not on pages, test both content types. If IDs are involved, make sure those are post IDs, not template, product, category, or builder block IDs. An ID mismatch often looks like a complete failure, even though the rule is simply targeting the wrong object.

Diagram of Popscroll display rules by pages posts cookies and devices
The display decision is built from several conditions: page, content type, device, cookie, and scroll trigger point.

How to Avoid Hurting Speed, SEO, and User Experience

Popup elements are easy to overuse. They stand out to the administrator, but for the visitor they can become an obstacle, especially if the site already shows a consent banner, chat, ads, and floating buttons. That is why Popscroll should be configured as part of the overall user journey, not as a standalone decorative effect.

Speed

Popscroll itself may be relatively lightweight, but the content inside the block can load external scripts. A Facebook widget, video, newsletter form, or counter can add requests and delays. If a simple link or short HTML solves the task, choose that. If you do need an external widget, test the page before and after enabling it using browser tools and real site navigation.

SEO and Indexing

Popscroll should not replace the main content of the page. Do not hide important text in a popup if that text is supposed to be visible to regular readers and search engines in the main document. Use the block for a secondary action: subscription, click-through, social profile, or related content. If the popup makes the main text harder to read or covers navigation, it is no longer an SEO tool, but an interface problem.

Accessibility and Usability

The block should have a clear close button, sufficient contrast, and predictable behavior. Do not use text that is too small, complicated 3D animations, or abrupt appearances on every page. The user should be able to close Popscroll easily and continue reading. If that is not possible, the block will be perceived as an obstacle even if it works technically.

Common Problems and Troubleshooting

Popscroll issues are usually caused not by installation, but by overlapping conditions: the block is enabled but hidden by a rule; the script is loaded but the optimizer changes its order; the content is valid but the external service does not return the widget. That is why troubleshooting is best done by symptom.

Popscroll error troubleshooting when the popup does not appear or conflicts with the WordPress theme
A troubleshooting map helps separate a display issue from a content or cache issue.

The Popup Does Not Appear After Scrolling

First, check whether the block is enabled and whether the settings were saved. Then remove complex conditions: temporarily display Popscroll on one test page for all guests and use simple content. If the block appears, add the conditions back one at a time. If it still does not appear, check the browser console, cache, and theme conflicts. Sometimes the reason is simply that the page is too short and the user never physically reaches the trigger point.

The Block Appears on the Wrong Pages

Check the rules for the home page, post types, and specific IDs. In WordPress, it is easy to confuse the posts page, the front page, a single post, and an archive. If you use a page builder, make sure the rule targets the real page and not the builder template. For safe testing, temporarily restrict display to one known ID.

The Facebook or Other Social Block Is Empty

Replace the content with plain HTML. If Popscroll works with simple HTML, the problem is in the external widget. Check the public page URL, privacy settings, third-party cookie blocking, browser extensions, and current platform limitations. If the external widget is unstable, use a regular link to the social page or your own HTML block instead.

The Cookie Does Not Remember Dismissal

Check whether the do-not-show-again option is enabled and whether a duration is set. Then test it in the same browser without clearing cookies. If the site uses aggressive cookie cleanup, privacy mode, or a separate domain for the public-facing site, the result may differ. If the block is only needed for a campaign, it is often better to limit it with page rules instead of relying on cookies alone.

Conflict with Cache or JavaScript Optimization

The symptom: everything works for the administrator, but for guests, after cache clearing, the block does not appear or the animation breaks. Disable JavaScript combining and deferred loading during testing. If the issue disappears, re-enable optimizations one by one. For plugins built around jQuery, load order matters, so you should not arbitrarily move all scripts to the end of the page without testing.

The Block Interferes with the Cart, Form, or Mobile Navigation

This is not a technical failure, but a UX configuration mistake. Change the position, reduce the size, disable mobile display, or exclude pages with important forms. For WooCommerce, be especially careful with the cart and checkout: any extra layer there can reduce trust and interfere with completing the purchase.

Safe Improvements Without Editing Plugin Files

You do not need to edit plugin files. Those changes will be lost after an update, and if something breaks, it becomes harder to understand what caused it. If you want to improve the look of custom HTML inside Popscroll, it is safer to use the plugin's own settings or add CSS through the theme, child theme, the built-in Additional CSS section, or a reliable code snippets plugin.

A Small CSS Tweak for Your HTML Block

If you are inserting HTML with the popscroll-offer class, you can style the inner block neatly. First, make sure the theme is not already using that class. Then add CSS in a safe place, not inside Popscroll files:

.popscroll-offer {
  max-width: 320px;
  line-height: 1.45;
}

.popscroll-offer a {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
}

The check is simple: open the page, wait for the block to appear, and make sure the text stays within bounds, the link is visible, and the styles do not affect other site elements. Rolling back is just as simple - remove that CSS or temporarily disable the extra snippet. Do not use global selectors like a, div, or .button, because they may change the entire site.

What You Should Avoid

  • Do not insert unverified scripts from random generators.
  • Do not edit plugin files just to change a color or a text label.
  • Do not disable the entire site cache permanently because of one popup block.
  • Do not show the block on payment pages, login pages, password reset pages, or important forms without separate testing.

Questions Worth Resolving Before Launch

Can CodeCanyon Popscroll Be Used Only on Blog Posts?

Yes, if your version supports visibility rules by content type or specific IDs. This is often better than sitewide display because blog readers naturally move through a long page and reach the trigger point in a way that makes sense.

What Should I Do If the Facebook Block Does Not Display?

First, replace the content with simple HTML. If Popscroll appears, then inspect the external Facebook code, the public page URL, third-party cookie blocking, and current Meta restrictions. If even simple HTML does not appear, look for the problem in the display settings, theme, cache, or JavaScript.

Should I Enable 3D Animation?

Only after testing on real pages. For most production sites, a simple animation looks calmer and more reliable. A more complex effect may fit a promo page, but not a page where the user is reading a long guide or placing an order.

Can I Embed a Subscription Form?

Yes, if the form works correctly as a normal embed and does not require special conditions tied to a specific page. First test the form outside the popup. Then move the code into Popscroll and verify submission, error messages, spam protection, and cookie behavior.

Will the Plugin Affect Site Speed?

The popup mechanism itself is usually less risky than the content inside it. An external social widget, video, or heavy form can add requests and delays. That is why you should test speed and the browser console after enabling the real content, not just an empty block.

Should Popscroll Be Shown on Mobile Devices?

Not necessarily. If the block takes up too much space, covers navigation, or contains an external widget, it is better to keep mobile display disabled. Turn it on only after separate testing at several screen widths.

Can the Plugin Be Used with WooCommerce?

Technically, the popup block can appear on WordPress pages, but for a store you need to be careful. Do not show it on the cart, checkout, or pages where the user is entering data or choosing a payment method until you have fully tested the scenario.

When CodeCanyon Popscroll Is the Right Choice

CodeCanyon Popscroll is worth using if you do not need a large all-in-one marketing suite, but a controlled block that appears after scrolling and offers the reader a logical next step. It works especially well for blogs, educational pages, long-form landing pages, and service sites where the user first explores the material and then sees a calm invitation to subscribe, visit a social profile, or open related content.

Before launch, verify the installation archive, choose one test page, configure the trigger point, cookies, position, mobile mode, and visibility rules. Then test the result as a guest, clear the cache, test dismissal behavior, and make sure external social widgets are actually displaying. If all checks pass, you can get the WordPress version and use it as a clean engagement tool rather than an intrusive popup on every page.

The main readiness criterion is simple: the popup should help the visitor continue their journey through the site without getting in the way of the page's main purpose. If that balance is preserved, Popscroll can be a useful addition to a WordPress site. If the block covers content, repeats too often, or depends on a broken external widget, it is better to simplify the scenario to your own HTML or choose a more suitable alternative.

By OceanTheme.org Editorial Team

 

You are not logged in to post comments.