Animate a Message

Having an offer slide in from off-screen looks more modern than having it simply pop up. If you can create an Interaction Studio pop-up message and have a basic understanding of HTML and jQuery, you can create slide-in messages.

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 the steps you need to follow to create a message that slides in from the left to the right of the page:

Create the parent container - creating an invisible parent container will anchor the message to the page
Create the message element - this is the part of the message that will be animated
Set the message start position - the message will start off the page, but this must be configured within the HTML editor
Set the message end position and speed - configure how fast the message moves and where it ends up on the page

Also included in this article are samples of HTML and jQuery code you can use to build a slide-in message.

Sections in this Article

NOTE

Interaction Studio messages cannot be animated once they are published, so you must configure your animated message prior to publishing your campaign.

Create the Parent Container

Start by creating a parent container (which cannot be animated). Since you cannot animate the parent container, you need to make it invisible and out of the way. Once you create this new container, it will get a unique name (you can see it by selecting Hierarchy) in the format #evergage-tooltip-ambXXXXX

Create a new popup message
Select Background > Transparent OR Select > Message Settings > Invisible message
Optionally, you can select Message Source Code > Top Level Styles and make the size height: 0px and width: 0px to completely remove the container from view. The invisible container can be any size as long as it doesn't block any content.

Create the Message Element

Now, you'll add a text box which will become the animate message element.

Select Insert Element > Text Box
Style the text box as desired. In the example at the right, there is a blue top border, gray background, and very slight box shadow
IMPORTANT NOTE

Any content added to the slide-in message, such as CTA links, images, or text, must be contained within the message element div. Any content outside of the message element div will not be affected by the animation
Give the text box a unique ID
1. Select Message Source Code
2. Confirm that HTML/CSS is highlighted in blue
3. Locate the text box element in the source code
4. Add an ID for the element in the syntax id="slidein"
5. Click APPLY

Set the Message Start Position

Now you need to determine the start location for the message, which will typically be off the page.

Still in Message Source Code in the HTML/CSS editor
In the style tag for the message element you created in the last step
Add left:-310px; (as shown at the right)
Confirm that the message is set to position: absolute (this is the default position for the message)
Click APPLY

Set the Message End Position and Speed

Once you have the start position, you need to define the end point and speed of the animation.

Still in Message Source Code
Select the JavaScript tab
Copy the jQuery code string below (see image at right)
Click APPLY
Click SAVE and test the message to confirm the position and speed are correct

jQuery Code String

This script will run as soon as the message renders and over the course of 1 second, moves the message element from -310px at the left to 10px from left of the screen. You can modify the ending value and speed of the animation as needed.

jQuery String

ajq('#slidein').animate({'left': '10px'}, 1000)

What is the code doing?

Below is a break down of what each part of the code does:

ajq - represents a jQuery function that returns an object, in this case the message element
#slidein - the ID of the element(s) being affected
.animate - the jQuery method being implemented
left - the CSS attribute being animated
10px - the ending value of the animation
1000 - the speed (in milliseconds) of the animation

Higher values indicate longer durations and therefore slower animations. For example, a 4000 ms animation takes 4 seconds to complete and is slower than a 1000ms animation which takes 1 second to complete.

Sample HTML Code

Slide-in Message HTML

<div id="slidein" style="color: rgb(0,0,0); height: 100px; padding: 6px; width: 250px; position: absolute; top: 20px; left: -310px; display: block;">
	Message text
<a href="javascript:;" title="Close Message" evergage-dismissonclick="evergage-dismissonclick" evergage-closeicon="evergage-closeicon" class="" 
style="text-align: center; text-decoration: none; font-weight: normal; font-size: 16px; color: initial; position: absolute; top: 0px; right: 0px; 
height: 28px; width: 28px; line-height: 28px; padding: 0px;">
	×
</a>
</div>

Space shortcuts

Page tree