Navigate the Experience

Navigate the user through the experience using these SDK Methods.

setPage

Navigate to a specific page in the experience.

Parameters

Argument	Type	Required	Description
pageId	string	Yes	The id of the page to navigate to, e.g. page_12345.

Example

window.wyng['_WYNG_ID_'].setPage('page_12345');

scrollTo

Scroll to a specific component on the experience.

Parameters

Argument	Type	Required	Description
componentId	string	Yes	The id of the component to scroll to, e.g. sign_up_436366175206.
settings	object	No	Key value pair object containing settings to control the scroll action.
callback	function	No	Callback function that will be called once the scroll has been completed.

tip

Instead of componentId this method will also work when passing it either a class or id value of an HTML element to scroll to. When using class, the first HTML element with the class that is found will be used to scroll to.

Settings

Key	Type	Required	Default Value	Description
smooth	string	No	"easeInOutQuart"	Easing function used for scroll animation. Available animations: linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint. See easings.net for visual reference.
offset	integer	No	0	Offset number of px added to the scroll target.
duration	integer or function	No	800	Duration of the scroll animation in milliseconds. Can also be a function (function(scrollDistinceInPx) { return durationInteger; }) to allow for more granular control at runtime.
delay	integer	No	0	Number of milliseconds to wait before starting the scroll animation.
isDynamic	boolean	No	false	Set to true if the distance should be recalculated. Can be used if calculated scroll distance is incorrect (because of expanding/collapsing content).
horizontal	boolean	No	false	Set to true to invoke a horizontal scroll instead of vertical scroll.

Examples

Scroll To Component

Scroll to the component sign_up_436366175206

window.wyng['_WYNG_ID_'].scrollTo('sign_up_436366175206');

Scroll with a delay and offset

In 500 milliseconds scroll to the component sign_up_436366175206 but offset the scroll by 300 pixels

window.wyng['_WYNG_ID_'].scrollTo('sign_up_436366175206', { offset: 300, delay: 500 });

Scroll with callback

Scroll to the component sign_up_436366175206 and print a message to the console when the scroll has been completed

window.wyng['_WYNG_ID_'].scrollTo('sign_up_436366175206', {}, () => {
    console.log('Scroll to sign_up_436366175206 has been completed');
});

Scroll with settings and callback

Take 2500 milliseconds to scroll to the component sign_up_436366175206, using the linear easing function and print a message once it is done.

window.wyng['_WYNG_ID_'].scrollTo(
    'sign_up_436366175206',
    { duration: 2500, smooth: 'linear' },
    () => {
        console.log('Scroll to sign_up_436366175206 has been completed');
    }
);

Disable auto-scroll on components

To disable the built in auto-scrolling functionality in components, add an HTML element to the experience with the id of wyng-disable-auto-scroll.

Example

<div id="wyng-disable-auto-scroll"></div>