Evergage Knowledge Base
Space shortcuts

(888) 310-0589 x2

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 Evergage message fade into the page.

This Article Explains

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

Sections in this Article

Create a Message with a Transparent Background

  1. Log into the Evergage 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

Evergage 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