Web Template Display Utilities

DisplayUtils is a versatile set of utility functions primarily designed to support Single Page Applications (SPAs). However, these functions are not limited to SPAs and can be utilized on any type of webpage. DisplayUtils offers various APIs that enable tracking of page behavior, including detecting page exit intention, monitoring page inactivity, tracking page scroll, observing visible and loaded elements, and more.

The following code sample showcases the methods available in DisplayUtils.

With DisplayUtils, you can use the bind function to link elements to BaseMethods using a specified ID, allowing for convenient removal of associated listeners or observers with the same ID in the future.

• If the bind() function is used alone, it generates IDs based on function name and selector.
• If no bind() function is used, it generates a random ID.
• When rebinding with the same ID, the previous binding gets unbound, and the new unbind method gets set to the ID.

Here are some examples of how to use the bind() function in the SalesforceInterections and Evergage SDK namespaces.

The unbind() function enables you to cancel listeners or observers associated with the specified ID.

To remove all associated listeners or observers, call the unbind() function with the same ID that was used when binding the element to BaseMethods. Here are some examples of how to use the unbind() function in the SalesforceInteractionsandEvergage SDK namespaces.

The getBindings() function enables you to retrieve all the bind IDs and their associated unbinding functions.

Here are some examples of how to use the getBindings() function in the SalesforceInteractions and Evergage SDK namespaces.

The clearBindings() function enables you to remove all known bindings by iterating through each known binding and unbinding them all.

Here are some examples of how to use the clearBindings() function in the SalesforceInteractions and Evergage SDK namespaces.

The pageElementVisible function checks whether a page element specified by the CSS selector is visible in the viewport. When the specified element is visible, it returns a Promise that resolves with an entry object that contains data about the visible element.

By default, the pageElementVisible function triggers the resolve function when at least 1 pixel of the target element is visible. You can also specify a percentage of the target element that must be visible in the viewport for the resolve function to be triggered. The pageElementVisible function only triggers the resolve function one time.

The function throws an error with the message "[pageElementVisible] Invalid arguments" when:

• selector isn’t a string
• percentage isn’t a number
• percentage is less than zero
• percentage is greater than one

Here are some examples of how to use the pageElementVisible function in the SalesforceInteractions and Evergage SDK namespaces.

The pageExit function enables you to detect a user's page exit intent by tracking when the cursor leaves the bounds of the body from the top of the page. Upon detection, this function triggers a resolve function with or without a specified delay. The pageExit function only triggers the resolve function one time.

This function accepts a delay parameter that you can use to specify the delay, in milliseconds, before the resolve function is triggered. The default value is o, which also means there’s no delay specified.

The pageExit function listens for the mousemove event to detect when the cursor leaves the bounds of the body from the top of the page. If it detects more mouse movement in the body within the delay period after leaving the window, it clears the exit intent detection delay, but doesn't remove the event listed.

The function throws an error with the message "[pageExit] Invalid arguments" when:

• delay isn’t a number
• delay is less than 0

Here are some examples of how to use the pageExit function in the SalesforceInteractions and Evergage SDK namespaces.

The pageInactive function enables you to detect user inactivity on a page by triggering a resolve function after a specified period without any user activity. You can specify the time period in milliseconds using the ms parameter.

This function listens for mousemove, click, scroll, keyup, and keydown events. The detection of any of these events resets the inactivity timer and prevents the resolve function from triggering.

You can use the pageInactive function with either of the following methods:

• The .then method, which only triggers the resolve function one time
• The .subscribe method, which continues to trigger the resolve function upon detecting inactivity until the event.disconnect function is called.

The event parameter returns the last event that triggered the inactivity timer and can be of type mousemove, click, scroll, keyup, or keydown.

The function throws an error with the message "[pageInactive] Invalid arguments" when:

• ms isn’t a number
• ms is less than 0

Here are some examples of how to use the pageInactive function in the SalesforceInteractions and Evergage SDK namespaces.

The pageScroll function enables you to trigger a resolve function when a user scrolls past a specified percentage of a page. You must specify the percentage parameter as a decimal value from 0 through 1. This function only triggers the resolve function one time.

The event parameter returns the scroll event when a user scrolls past the specified percentage.

The function throws an error with the message "[pageScroll] Invalid arguments" when:

• percentage isn’t a number
• percentage is less than 0
• percentage is greater than 1

Here are some examples of how to use the pageScroll function in the SalesforceInteractions and Evergage SDK namespaces.

The pageElementLoaded function triggers a resolve function when a target element loads on a page. This function triggers a resolve function only one time. The element parameter of the resolve function returns the target element that was loaded.

The pageElementLoaded function accepts the following two arguments:

• targetSelector: A string that specifies the target element to be watched. The targetSelector must be a non-empty string.
• observerSelector (optional): A string that specifies the element to watch for mutations. The observerSelector must be a non-empty string. If no observerSelector is specified, the pageElementLoaded function binds a listener to the body or html element and waits for the targetSelector to be added as a descendant.

The pageElementLoaded function throws an error with the message "[pageElementLoaded] Invalid arguments" if the following conditions aren't met:

• targetSelector must be a non-empty string
• observerSelector (if specified) must be a non-empty string

Here are examples of using the pageElementLoaded function in the SalesforceInteractions and Evergage SDK namespaces.