How to trigger a popup

In Heroic, popup windows can be triggered in many different ways.

Here's a complete list of all the ways you can cause a popup to appear on your site.

Trigger with a button click (when any button is clicked)

You can trigger a popup whenever your visitor clicks on one of your buttons. In most platforms this is time-consuming and complicated to figure out, but in Heroic, the process couldn't be simpler.

  • Click the setup icon on the button you want to trigger the popup
  • Select Open Popup from the Choose Button field.
  • Choose the popup to use from the Open Popup field

Trigger popup on page exit intent (visitor's mouse leaves your page)

This is perhaps the most common way we've seen to trigger a popup. A visitor decides they've seen enough, this is a great way to catch them right before they leave, and make an offer that could keep them for longer, or engage them in some way.

  • Click on Popups in the left panel
  • Click on the popup you want to work with
  • Open the Show On section, and choose the pages you want this popup to appear
  • Next, open the Triggers section, and click On Page Exit Intent Last, go to the pages you want the popup to appear on and publish the changes

Trigger on Page Load (when someone first lands on your site)

Activating a popup at a certain moment in time after a new visitor arrives on your site (and just before they're likely to leave) can be super-useful to present an offer to download something special, some information of value, or some tips for how to do or achieve something they want.

Here's how to set that up:

Trigger popup on page scroll (when someone scrolls up or down a certain distance)

This trigger is useful if you want to display a popup once a visitor has scrolled a certain distance on a page)

Most people will use this either on their Home Page or on the Blog Article page. The idea is that once a person has "seen" or "consumed" enough of your content, they're more likely to be ready for you to make them an offer to sign up, subscribe, or register for a gift or other freebie.

  • Click on Popups in the left panel
  • Click on the popup you want to work with
  • First, choose which pages you wish your popup to appear on once the visitor scrolls (to select any blog article, choose "Blog Article")
  • Second, open the Triggers accordion and go to On Scroll
  • Next, choose either "Up" or "Down" from the list of options (most people choose "Down")
  • Then, choose the percentage amount of page length you want the visitor to scroll before the popup appears. We recommend something around 80-90%. That indicates your user is very near the end of your page Last, go to the pages you want the popup to appear on and publish the changes

Trigger popup on scroll to a particular element (eg: a video, or some arbitrary point on your page that you specify)

This trigger is useful to make a popup show when your visitor scrolls to a certain place or point in particular in your page.

Here's how to set that up:

  • First, decide on the point where you want the popup to load -- for example, a page section
  • Go to that page section or point in the editor, and click the Setup icon
  • Click on Advanced Section Settings in the left panel, open CSS ID & Classes and enter either a value for CSS ID or CSS Class.
  • If this is the only place you want the popup to open, then choose a totally unique and descriptive word (eg: "popup-map-home") and enter it into the CSS ID field. If you want the popup to open in multiple places or on multiple pages, then create a word that's descriptive that you can re-use (eg: "popup-hotspot") in several places or on multiple pages and enter it into the CSS Class field. (IMPORTANT: Make sure to have no spaces or special punctuation characters in your name. Keep it simple, lowercase, and use hyphens instead of spaces.)
  • Finally, go to the Popups in the left panel, click on the popup in question, and open the Triggers section
  • Type or paste the ID or Class from the previous step into the Selector of Element field Last, go to the pages you want the popup to appear on and publish any changes

Trigger popup after 1 or more clicks on a page

Sometimes you may want to trigger a popup after a certain amount of clicks on a page. We've never used it, but you may want to LOL.. :)

  • Click on Popups in the left panel
  • Click on the popup you want to work with
  • Open the Show On section, and choose the pages you want this popup to appear
  • Next, open the Triggers section, and click On Click
  • Use the slider to choose the number of clicks before you show your popup Last, go to the pages you want the popup to appear on and publish the changes

Trigger popup after a period of inactivity (from 1 - 600 seconds)

You can use this popup trigger to open a popup after a certain amount of inactivity, such as no scrolling or mouse movement.

  • Click on Popups in the left panel
  • Click on the popup you want to work with
  • Open the Show On section, and choose the pages you want this popup to appear
  • Next, open the Triggers section, and click After Inactivity
  • Use the slider to choose the amount of inactivity to check for Last, go to the pages you want the popup to appear on and publish the changes

Trigger popup after a certain amount of views of a page

You can use this popup trigger to open a popup when your visitor has seen a particular page a certain number of times in the same browsing session. This trigger is useful to identify a higher level of interest from a visitor -- and to present them an offer that makes sense in that situation for your business.

  • Click on Popups in the left panel
  • Click on the popup you want to work with
  • Open the Show On section, and choose the pages you want this popup to appear
  • Next, open the Advanced Rules section, and click Show After X Page Views
  • Use the slider to choose the amount of page views -- or enter a number into the field manually Last, go to the pages you want the popup to appear on and publish the changes

Trigger popup after a certain amount of "sessions" of a page

You can use this popup trigger to open a popup when your visitor has had a certain amount of "sessions" on the same page. This trigger is useful to identify when someone visits a certain page over time -- for example, with a day in between each visit -- and to present them an offer that makes sense in that situation for your business.

  • Click on Popups in the left panel
  • Click on the popup you want to work with
  • Open the Show On section, and choose the pages you want this popup to appear
  • Next, open the Advanced Rules section, and click Show After X Page Sessions
  • Use the slider to choose the amount of page sessions -- or enter a number into the field manually Last, go to the pages you want the popup to appear on and publish the changes

Limit a popup to show a certain amount of times only

You can use this setting to only show a popup a certain amount of times -- say, once only. This is great if you want to make a "one time offer" to a visitor, and guarantee that the popup will never be seen by them again after they close it.

  • Click on Popups in the left panel
  • Click on the popup you want to work with
  • Open the Show On section, and choose the pages you want this popup to appear
  • Next, open the Advanced Rules section, and click Show Up To X Times
  • Use the slider to choose the amount of times to show the popup -- or enter a number into the field manually Last, go to the pages you want the popup to appear on and publish the changes

Show a popup ONLY to visitors from a specific site (or page)

Use this setting to show a popup ONLY to visitors who arrive from a specific page, site or source. You might use this in the situation where you want to show a special offer or opportunity only to certain visitors, and not others.

  • Click on Popups in the left panel
  • Click on the popup you want to work with
  • Open the Show On section, and choose the pages you want this popup to appear
  • Next, open the Advanced Rules section, and click When Arriving From Specific URL
  • In the Include url field, enter the positive matches, and in the Exclude url, enter the negative matches. You can enter domain names, or specific page URLs Last, go to the pages you want the popup to appear on and publish the changes

Lots of people found these next topics pretty useful...

NEW: Can we do the work for you?

If you're like most entrepreneurs, you have a million projects in your head, with no way to get them all done. As a result, you feel stalled and frustrated.

You've tried doing it all yourself, but you know it's unsustainable, and a one way ticket to burnout and overwhelm.

You don't yet have the resources to hire your own team of designers and developers, so you feel stuck, going around in circles.

If you resonate, then relax, because we're here to help.

Our in-house tech, design & web team is ready to help, and available for almost anything. (Seriously!)

We'll take all of the tasks you've been collecting, and make them happen for you quickly and efficiently in the background, leaving you free to focus on what you do best.

And you won't pay through the nose either -- it's available for an incredibly low 5-hour "done for you" package -- it's just $200 for access to our in-house, highly-trained team of tech and design professionals. Best of all, the time never expires and you can use it as quickly or as slowly as you like.

Grab your 5-hour 'done for you' package here and let's get your business moving again!

Creating Pages

Pages are the heart of your site, and what you can build in Heroic is simple unmatched. Here's all the support you need to get started.

View this category

My Account

Got questions about how to manage your account? We're compiling them all here. If we missed anything, let us know and we'll add it.

View this category

Integrating

Our goal is to integrate with every 3rd party platform out there. Here's what we have currently!

View this category

Blogging

Heroic comes with a full featured, yet simple-to-use blogging platform that allows virtually anyone to get bloggin'...

View this category

Popups

Normally popups are hard to create, add to your site, and integrate with 3rd party platforms. Not here :)

View this category

Fonts & Colors

Heroic's global font & color system keeps everything looking great, and makes editing FAST!

View this category

Domains

Here's how to connect your site with your custom domain

View this category

Conversion U

Some our best articles on copywriting, design, branding and more!

View this category

Random Stuff

A home for articles that don't seem to fit anywhere else. Give 'em some love?

View this category

Trainings & Courses

Our expertly curated collection of education and training...

View this category

Recommended Tools

Here are the 3rd party tools that'll make life easier as an online entrepreneur!

View this category

43