Skip to content

Some simple Javascript code that allows code to be triggered based on exit intent, scrolling, or timeouts.

License

Notifications You must be signed in to change notification settings

shahzam/DialogTriggerJS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 

Repository files navigation

DialogTriggerJS

Some simple Javascript code using jQuery that lets a dialog be triggered based on some user behavior such as a timeout, by scrolling by some amount, or based on exit intent.

This is useful if you want to pop-up something like a newsletter sign-up form in a more intelligent way instead of just doing it instantly.

You can even chain events together, such as requiring the user to scroll down by some amount like 25% of the page, then back up by 10%, etc.

Basic Usage:

var dt = new DialogTrigger(callback, options);
  • "callback" is the Javascript function that should be called when the trigger behavior is met
  • "options" consists of a "trigger" and any additional parameters as follows:
    • trigger: 'exitIntent'

      • Call 'callback' when a user intends to exit (such as moving cursor off page or coming back to the top)
      • This won't work on mobile devices since mouse events aren't generated, so you should use different triggers in such instances.
      • eg. { trigger: 'exitIntent' }
    • trigger: 'target'

      • Call 'callback' when a user reaches a particular target element
      • Use 'target' to set the name of the element, such as '#mytarget' (eg. { trigger: 'target', target: '#mytarget' })
    • trigger: 'scrollDown'

      • Call 'callback' when a user scrolls down by a certain percent of the page from when the object is instantiated
      • Use 'percentDown' to set the percentage 0-100 (eg. { trigger: 'scrollDown', percentDown: 50 })
      • Default percentDown is 50%
    • trigger: 'scrollUp'

      • Call 'callback' when a user scrolls up by a certain percent from when the object is instantiated
      • Use 'percentUp' to set the percentage 0-100 (eg. { trigger: 'scrollUp', percentUp: 10 })
      • Default percentUp is 10%
    • trigger: 'timeout'

      • Call 'callback' after a certain number of milliseconds have elapsed (set 'timeout' to the desired milliseconds)
      • Use 'timeout' to set the desired milliseconds (eg. { trigger: 'timeout', timeout: 5000 })
      • Default timeout is 0 milliseconds (instant trigger)

Examples:

function testPopup() {
	alert('Hello there!');
}

// A trigger based on a timeout of 5 seconds
var dtTimeout = new DialogTrigger(testPopup, { trigger: 'timeout', timeout: 5000 });

// A trigger based on the user scrolling down to a target element on the page named '#mytarget'
var dtElement = new DialogTrigger(testPopup, { trigger: 'target', target: '#mytarget' });

// A trigger based on the user scrolling down at least 50% of the page
var dtScrollDown = new DialogTrigger(testPopup, { trigger: 'scrollDown', percentDown: 50 });

// A trigger based on "exit intent" when the cursor is detected to go above the top of the browser window (useful in desktop scenarios)
var dtExit = new DialogTrigger(testPopup, { trigger: 'exitIntent' });

// Triggers can also be chained for a sequence of behaviors (such as scroll down by 50%, then up by 10%):
var dtPercentDown = new DialogTrigger(function() {
	var dtPercentUp = new DialogTrigger(testPopup, { trigger: 'scrollUp', percentUp: 10 });
}, { trigger: 'scrollDown', percentDown: 50 });

License

The MIT License (MIT)

About

Some simple Javascript code that allows code to be triggered based on exit intent, scrolling, or timeouts.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published