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

Interaction Studio Site-Wide CSS Styles is CSS code you can apply to all pages containing your Interaction Studio Beacon JavaScript. You can use site-wide CSS to target specific message types (such as popups or inline messages), apply it to all Interaction Studio messages, or even target page elements that have no association with Interaction Studio. 

Interaction Studio Classic Only

Please note, 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.

This Article Explains

This article details how to use site-wide CSS that you can apply to all pages containing your Interaction Studio Beacon JavaScript.

Sections in this Article


This is a fully functional stylesheet. This means you can edit and change parts of your entire site if you don't explicitly specify that you want the CSS to apply only to an Interaction Studio message. Additionally, this will apply to all Interaction Studio messages of a certain type so it is critical that all campaign editors understand the changes you have made here so they know why certain messages have set default styling

Add Site-Wide CSS Styles

Although the CSS will be applied to all new campaigns you create, it is strongly recommended that you go back and test all existing campaigns to ensure they are not affected by these CSS changes. If you wish to apply CSS to specific messages and not all of your Interaction Studio messages, apply a unique identifier or class to your message content.

If you wish to use this CSS to modify native elements on the page, be sure to explicitly specify an ID or class AND make sure the ID or class is not on any unexpected HTML elements throughout your site.
  1. Log into Interaction Studio as an administrator
  2. In the Channels & Campaigns section, select WebSite-Wide CSS
  3. Click  to add a new style which will list all available styles
  4. Select the style from the list
  5. Add additional parameters
  6. Add additional styles as needed
  7. Click SAVE 

    Be sure to test all Interaction Studio messages after you have modified the Site-Wide CSS