Register

Using Script mode for landing pages

Avatar
Moosend Support Team

In the Landing Page Designer, you can use Script mode to create your own script for your landing pages. Not only can you add your own custom scripts, but you can even customize the script using existing items and layouts in the designer.

Add a custom script

To add a custom script: 
  1. On the top menu, click Script. The designer switches to Script mode.Scriptmode5.png
    Click here to view the image in full size
  2. In the left pane, at the top of the Custom script section, add the JSON code that you want to add at the <head> of the document.
  3. At the bottom section, add the JSON code that you want to add at the end of the <body> element of the document.
  4. You can click any item or layout in the design workspace to display the Element information in the right pane.

Custom script example

The following example shows how you can create a script so that the background color changes randomly when you click an image on your landing page.

  1. In the designer’s left pane, click the Layout tab.
  2. Drag and drop a layout into the editing area. In this example, we are adding a Full Width Container.
  3. Click the Items tab and drag and drop a new image item into the layout, then upload your image.
  4. On the top menu, click Script. The designer switches to Script mode.
  5. In the left pane, at the bottom of the Custom script section, add the following JSON code at the <end> of the document. 
    Note:  In the JSON code, you must replace the Element ID with your own Element ID.     
    var element = document.getElementById('1100163874ac6b665d85e51a12018');

    element.onclick = function(){
     setInterval(function(){
     element.parentNode.parentNode.style.background = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
     },500);
    };
  6.  To get the Element ID, click the image item to display the right pane with the Element Information.
  7. In the Element ID field, copy the Element ID and paste it into the JSON code.
  8. On the top menu, click Preview. The designer switches to Preview mode.
  9. Click the image. The background color starts changing to random colors.