Interaction Studio Knowledge Base
Space shortcuts

Page tree
Skip to end of metadata
Go to start of metadata

Using the Visual Editor, you can add custom JavaScript to an experience that can be run alongside message or without them. Experience JavaScript added in the dropdown will run before messages render, so messages can access any global variables and functions initiated in the dropdown.

Interaction Studio Classic Only

  • The contents of this article are intended for customers using Interaction Studio (formerly Evergage Classic). Do not adjust your beacon version to downgrade or upgrade.
  • The Visual Editor Chrome Extension will no longer be available starting January 1, 2023. For more information, see this knowledge article.
This Article Explains

This article details how to add Experience JavaScript.

Sections in this Article

Get Started

  1. If you haven’t already, open any page of your website, click the Visual Editor logo to the right of the address bar in Chrome, and click the Visual Editor slider to enable it

    These instructions are for version 53.9 or later of the Evergage Visual Editor. If you do not see the Evergage logo or have the latest version, please see Install the Visual Editor for instructions.

  2. Create or edit a campaign  

View Source Code

You can access message source code in an expandable area in the bottom of the page. After you click Apply, code changes are immediately reflected in the campaign so you don't need to close the window to preview the changes.

  1. Select  at the bottom left of the window

  2. On the Experience JavaScript tab, you can enter JavaScript that will apply for all messages in the experience

    Example

    If you want to run custom validation with JavaScript before displaying messages, you could use Experience JavaScript to stop displaying all messages associated with the experience. Using the code below, the beacon will not show any messages in this experience if "#somePageElement" is visible.

    if ($('#somePageElement').is(':visible')) {
return false;
}
  3. Change the background from light to dark or dark to light by clicking 
  4. Click Keyboard to view a list of 8 keyboard shortcuts (shown at right)

  5. Click Run to view the changes in action

  6. Click Apply to apply the changes to the message or experience