JavaScript Creative actions allow you to serve your own scripts through the Monetate platform, providing endless possibilities for personalizing a user’s experience on your site. If you can write it with JavaScript, you can run it with Monetate. We’ve shown that with today’s homepage experience, executed entirely with actions available through the Action Builder and our own raw JS. See below for brief summaries of how the actions work and links to the code itself. The scripts are designed to work on any page, and we encourage you to try them for yourself! Practical applications for a JS Creative action on your site might include:

  • Pulling data from the HTML or from a JS variable and manipulating it or displaying it elsewhere on the page (for example, showing installments for a payment plan)
  • Adding or triggering animations
  • Setting default form options

…and plenty more.

Magnetic Poetry (“Write It”)

This script parses the HTML of the page looking for text and images to turn into drag/droppable magnetic elements. Background images and colors are removed to clear the canvas, and text is split into individual words and symbols. Each word, character, or image is wrapped in a styled white box with a border and is copied by a hidden, phantom element that reserves its space in the normal page layout. See the code

Mouse Tail (“Follow It”)

Given a message and configuration settings for the mouse trail, the script splits the message into a series of one-letter divs that are appended to the body of the page. When cursor moves, the positions of the divs are updated to match the mouse location, with a slight delay after the mouse, and with a delay between each trailing letter, as well. See the code

Gravity (“Drop It”)

‘Gravity’ causes page elements to fall to the bottom of the page as they are touched by the mouse. First, it creates a placeholder for each element that preserves its spot on the page so as not to disrupt page flow, then it uses simple Javascript physics modeling to cause the element to ‘fall’ to the bottom of the screen. Each element became a ‘ball’ with mass, radius, restitution (which affects ‘bounciness’), and initial velocity of 0. As the user scrolls down the page the script detects where the bottom of the screen is, to let visible elements keep falling. See the code

Gluey (“Stick It”)

This script attaches page elements to the cursor when they are clicked and forms a trail of these elements as you move the cursor around the browser window.  To accomplish this when an element is clicked a duplicate is created, the original is hidden, and the duplicate is added to the page with the same coordinates as the original element.  When the cursor moves the position of each of the duplicate elements is updated to be a slightly offset from the cursor coordinates. There is an increasing delay of movement on each duplicate element, which creates a trailing effect for those elements whose position now closely follow the cursor. See the code

Swim Away (“Repel It”)

Very much the opposite of Gluey, Swim Away causes elements to actively avoid the mouse. In this example, all links, buttons, and inputs on the page are selected and detached from their parent node, leaving a placeholder to maintain layout. They are then appended directly to the body and absolutely positioned. When the cursor moves, we check the coordinates of the cursor against the coordinates of the elements, and any elements that are within a specified radius will attempt to move outside that radius. See the code