Use JavaScript in a web experience

To make a web experience to go-live on your organization's site, you must specify in the JavaScript editor where in the Document Object Model (DOM) you want the offer or content to display. This is how you determine where the HTML will be inserted and rendered on your organization's website.

The JavaScript editor lets you run client-side JavaScript in your variant.

Most variants also must pass server-side guest data to your organization's website, for example, the guest's first name, location, loyalty number, and so on. To facilitate this, you must configure the API response to include the dynamic data so that when the variant executes, the data is requested from the server and then passed to the variant.

You can use JavaScript to access nested values by index from the API response.

Note

The experience can call server-side data such as guest attributes, and use it in the CSJS. This can include a full history of the guest as well as a continuous stream of real-time session data.

To use JavaScript in a web experience:

On the Build screen, in the Experience section, click the Edit icon next to the variant you want to configure.
In the template editor, on the JavaScript tab, enter any JavaScript that you want to use in the web experience.
To insert dynamic data into JavaScript, on the Data tab, in the Data Selector search box, enter a guest's email address to search. This enables you to access data model attributes and paths.

Tip

If there is a guest whose data you often use when configuring or testing code, click the star icon to bookmark the guest so you no longer have to search for them.
To include dynamic data from the decision model response, expand the Decision Model Response tree, click and click Copy Path as JavaScript.
To include dynamic data from the experience response, expand the Experience Response tree, click and click Copy Path as JavaScript.
On the JavaScript tab, paste the data and click Save.
Click to return to the Build screen.

You must also include the dynamic data when you compose the API response. This ensures that when the experience executes, the server requests the dynamic data and passes it to the variant.