Trigger: Scroll Introduction
Scroll is a type of trigger, for more information on triggers, visit our documentation on triggers.
This means your popup will trigger when a user scrolls down to a predetermined point, percentage, pixel, etc. It will even automatically close when the user starts scrolling up! Cool, huh?
Scroll Triggered popups can be used in a multitude of ways, from guiding users once they hit the bottom of a page, or asserting a call to action when they scroll near or beyond a certain element.
Check out this awesome guide on how to create a banner style popup with the Scroll Trigger Extension.
You can promote content relevant to the content the user is reading by targeting those elements with scroll triggers. Check out this guide that will help you create the high conversion popups!
There are many great applications for scroll triggers, will you have the next one?
If you’re interested in running your own scroll trigger campaign, check out the Scroll Trigger Extension Page.
From the Popup Editor, scroll down and click Add Trigger under Triggers, then select Scroll and click add.
Scroll Trigger Settings
Add a Scroll Trigger by clicking the Add Trigger Button in the Triggers Pane.
- Distance: Drag the bar or input a custom value to edit the distance before the popup triggers.
- Distance Units: Pixels (px), percentage (%), EM, and REM. Drag the bar or input your own value to customize.
- Use this Scroll Trigger Type to trigger your popup after the user scrolls a specific distance.
- Trigger Element Field: Choose any CSS or jQuery selector on your site that will trigger a popup when a user scrolls near or on it. Read more about getting selectors for Popup Maker.
- Use this Scroll Trigger Type to trigger your popup after the user scrolls near or beyond any element on your pages, templates, or websites.
- When you select the Manual Scroll Trigger Type, this means you have to manually input the triggering code on the pages and/or templates you want the popup to trigger on.
Your trigger point type will determine what line on the browser window has to be crossed for the popup to display.
Using your page content and your popup content as one unit can pay dividends. Combine their content with Scroll Triggers and revolve it around Trigger Points, and you can achieve lofty results. Guide coming soon!
Auto is the default trigger point. We recommend this setting unless you have a special circumstance or idea - it determines the best method for you based on the distance from the top of the page.
Draw an imaginary line across the top of the window, when the scroll trigger touches that line the popup will open.
- Let’s say I set my scroll trigger on an image element somewhere in the middle of my page, but I don’t want to display special relevant content (in the form of a popup) before the user has the chance to read the whole image element.
- I want my popup to be a sequel to the element - the popup won’t display until the trigger touches the top of the browser window.
The popup will be displayed when the scroll trigger touches the bottom edge of the browser screen.
- If I wanted to do the opposite of the above example, I would display my popup before the users read the image element. Use the Bottom Trigger Point and as soon as the trigger (in this case the image element) touches the bottom edge of their browser window, the popup will display.
Floating trigger point will move from top to bottom of the screen, based on the current scrolled distance. Scroll half way then the trigger point will be in the middle of the screen.
- This is mainly used if you want to trigger a popup when the user has scrolled a percentage of the page, or when the manually inserted trigger can be a varying distance from the top of the page.
Close When Scrolled Back Up
Checking this will cause popup to close when user scrolls back up.
- This feature is disabled by default, but it may be of interest to you. Scrolling back up by users could be interpreted as abandoning the scroll popup.
If you don’t have any cookies set up, it’s important to do that now so that your popups don’t repeatedly display (unless you want them to) and annoy your users, perhaps rendering your site unusable for them.
Learn all about cookies in the Cookies Doc.
If you have assigned your popup a cookie, you’re good to go. Once you’re done, click add.
Verify and Done
Check your site or test site to make sure everything is working to your liking, and that’s all there is to it. Good luck and go forth posthaste!