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

The Visual Editor and Campaign Editor include easy access to message source code in HTML, CSS or JavaScript.

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 access message source code.

For more information about formatting Interaction Studio messages and the features of the Visual Editor, please refer to Style Interaction Studio Messages.

Sections in this Article

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 Message Source Code at the bottom left of the window
  2. Change the background from light to dark or dark to light by clicking 
  3. On the Experience JavaScript tab, you can enter JavaScript that will apply for all messages in the experience


    If you need to exclude an experience from running specific versions of Internet Explorer, you can enter the code that does that in the Experience JavaScript tab
  4. Select Message Source Code to add or adjust message level:
    1. HTML/CSS (including top level styles)
    2. JavaScript


      If you are building a campaign that moves the location of an element on a website, you can enter the code to do that in Message Source Code > JavaScript
    3. Dynamic Variables
  5. Click Apply to view code changes immediately in your message

Adjust the Viewing Size

You can use the Visual Editor to build “responsive” campaigns, or campaigns designed for different screens sizes. If you have Campaign Editor or higher permissions, you can set the size of the Visual Editor to mirror the viewing size of desktops, tablets, and mobile devices. There is a standard group of breakpoints available by default, but you can also set your own, which will be available to anyone with Campaign Editor or higher permissions in your dataset.

  1. Select a default area in the responsive breakpoint bar to change the previewed viewport size
  2. Gray bars appear on the left and right sides of the viewport container which can be used adjust the width of the viewport container and create a custom breakpoint
  3. Click  to save a custom viewport size as a breakpoint
  4. Click  to delete an existing breakpoint size


    Deleting a breakpoint deletes it across the dataset so anyone with Campaign Editor or higher permissions in your dataset will no longer see the breakpoint


Change the User Agent

In addition to previewing viewport sizes, you can also preview sites while spoofing your user agent. This will trick your site into displaying what would be shown on an actual mobile device or tablet, which can be very helpful for sites that are both adaptive and responsive.

  1. Select  at the right of the responsive breakpoint bar
  2. Select the device from the list:
    1. Default (Chrome)
    2. iPhone (iOS)
    3. iPad (iOS)
    4. Phone (Android)
    5. Tablet (Android)