Interaction Studio Knowledge Base
Space shortcuts

Page tree

Versions Compared

Old Version 15

changes.mady.by.user Elizabeth Couchon

Saved on

compared with

New Version 16

changes.mady.by.user Eric Ivory-Chambers

Saved on

Key

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

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


Note
titleInteraction Studio Classic Only
Please note, the
  • The contents of this article are intended for customers using Interaction
Studio 
  • 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.



Panel
borderColor#ccc
titleColor#404040
borderWidth1
titleBGColor#f4f5f7
titleThis Article Explains

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



Panel
borderColor#ccc
titleColor#404040
borderWidth1
titleBGColor#f4f5f7
titleSections in this Article

Table of Contents
maxLevel2


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
    titleNOTE
    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
titleNOTE
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
    languagejs
    ajq('#eg-wrapper').fadeTo('slow', 1);


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

Hidestuff