Interaction Studio Knowledge Base
Space shortcuts

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

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

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 describes how to make an Interaction Studio message fade into the page.

Sections in this Article

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

    NOTE

    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.

NOTE

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)

    ajq('#eg-wrapper').fadeTo('slow', 1);
  3. Click APPLY
  4. Click SAVE to save your campaign