Skip to main content

Getting started

The Experience JS SDK provides functions to customize and extend experiences hosted on the Wyng platform. This SDK publishes functions accessible using the global wyng object. Functions can set values, hide or display content, dispatch events, or register for callbacks.

Your code may be added into the Custom JavaScript field in the Wyng experience editor. Alternatively, if the experience is embedded on a web page as an inline embed, you can access the SDK from JavaScript code on the web page; you should ensure that the experience has loaded before your code runs.

The SDK is located at the window level and scoped by experience ID. The methods can be accessed through window.wyng['YOUR EXPERIENCE ID']. For convenience and more portable code, when adding JavaScript to the Custom JavaScript field in the experience editor, use the special _WYNG_ID_ tag, which will automatically be replaced with the experience ID.

We recommend you scope your custom code with an Immediately-Invoked Function Expression to avoid unintended interactions with other JavaScript when embedding the experience on a web page.

A good starting point is something like this:

(function() {
const sdk = window.wyng['_WYNG_ID_'];
// YOUR CUSTOM JAVASCRIPT
})();

Debug Mode

Arguments:

ArgumentTypeDescription
statusoptional - requiredargument to control if debug mode should be turned on (true) or off (false) (default=on)

While developing experiences, or even when troubleshooting issues on live experiences it can be useful to have some more information that is normally not visible to the user. Debug mode will do this. To activate debug mode for an experience run the following code in the console (where 63121234124134 is the experience ID):

window.wyng['63121234124134'].setDebug(true);

To turn off Debug mode after activating it run:

window.wyng['63121234124134'].setDebug(false);