Page tree

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.

If you have working knowledge of CSS and basic JavaScript, you can make an Interaction Studio message fade into the page.

titleInteraction Studio Classic Only
Please note, the
  • 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.

titleThis Article Explains

This article describes how to make an Interaction Studio message fade into the page.

titleSections in this Article

Table of Contents

Create a Message with a Transparent Background

  1. Log into the Visual Editor
  2. Create a new campaign
  3. Create a new popup message
  4. Select Background > Transparent

Wrap Message Contents in a DIV

Once that step is done, the message's background will be transparent but its contents will still be visible when you render it on the page. To get around this, we need to go into the HTML source of the message and wrap all the contents with a div.

  1. At the bottom right of the Visual Editor window, select Message Source Code
  2. Confirm HTML/CSS is selected

  3. Add div id="eg-wrapper" around the message div as shown in the image at the right

    Add an ID to the wrapping DIV to make it possible to apply style changes and jQuery effects

Add CSS Styles

Adding these changes to your message will make it transparent when it first renders on the page.

  1. Still on the Message Source Code tab, confirm HTML/CSS is selected
  2. At the right in the CSS area, add the following styles:
    1. height: 100%;
    2. width: 100%
    3. opacity: 0;
    4. background-color: #29a0d6 (can be any hex color value)

Add jQuery fadeTo Function

Now, you will use a jQuery fadeTo function to make the message fade in. For more information regarding this function, refer to this article outside of the Knowlegebase.

Interaction Studio loads its own version of jQuery, called by 'ajq' instead of the standard '$

  1. Still on Message Source Code, select JavaScript
  2. Add the following line, where 'slow' indicates the speed of the fade effect (can be changed to 'fast') and 1 indicates the final opacity value of the message (can be changed to any value between 0 and 1, where 0 is invisible and 1 is opaque)

    Code Block
    ajq('#eg-wrapper').fadeTo('slow', 1);

  3. Click APPLY
  4. Click SAVE to save your campaign