Detect User Intent And Trigger A Callback – User Intent

Preview:

Description:

User Intent is a JavaScript library that detects user intent like enter, exit, idle,  and scroll and then triggers a callback.

How to use it:

1. Load the minified version of the User Intent library in the document.

<script src="./dist/user-intent.min.js"></script>

2. Trigger a function as the browser tab is focused. Live Demo

// options
var options = {
    mode: 'focus',
    multiple: false,
};
// callback
function cb(mode, opts) {
  // do something
}
// init
new UserIntent(cb, options);

3. Trigger a function if the user is idle. In this example, we will use events like ‘mousedown’, ‘mousemove’, ‘keypress’, ‘scroll’, ‘touchstart’ to determine if a user is idle. Live Demo

// options
var options = {
    mode: 'idle',
    events: ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'],
    delay: 2000, // 2 seconds
    multiple: false,
};
// callback
function cb(mode, opts) {
  // do something
}
// init
new UserIntent(cb, options);

4. Trigger a function as the user moves the cursor out of the viewport. Ideal for exit intent detection. Live Demo

// options
var options = {
    mode: 'out',
    multiple: false,
};
// callback
function cb(mode, opts) {
  // do something
}
// init
new UserIntent(cb, options);

5. Trigger a function as the user scrolls the page a certain distance. Live Demo

// options
var options = {
    mode: 'scroll',
    percentDown: 50, // 50%
    percentUp: 0,
    offsetTop: 0,
    offsetBottom: 0,
};
// callback
function cb(mode, opts) {
  // do something
}
// init
new UserIntent(cb, options);

6. Trigger a function as the user reaches a specific element. Live Demo

// options
var options = {
    mode: 'target',
    target: 'p:nth-child(7)',
    multiple: true,
};
// callback
function cb(mode, opts) {
  // do something
}
// init
new UserIntent(cb, options);