Skip to main content

Use script mode in the landing page editor

Abstract

Tells you how to work with the script mode of the landing page editor.

In the landing page editor, you can use script mode to create your own script for your landing pages. The editor lets you add your own custom scripts and customize the script using existing items and structures.

Add a custom script

To add a custom script:

  1. On the top menu of the editor, click Script. The editor switches to script mode.

  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 editing area to display the Item 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. In this example, we are adding a full-width layout.

  1. On the top menu of the editor, click Edit. The editor switches to edit mode.

  2. In the left pane, click the Layouts tab.

  3. Drag and drop a layout into the editing area.

  4. Click the Items tab and drag and drop a new image item into the layout, then upload your image.

  5. On the top menu of the editor, click Script. The designer switches to script mode.

  6. In the left pane, at the bottom section of Custom script, add the following JSON code. This code is added at the <end> of the document.

    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);};

    Note

    In the JSON code, you must replace the element ID with your own item ID.

  7. To get your own item ID, click the image item to display the Element Information pane.

  8. Copy the Element ID and paste it into the JSON code.

  9. On the top menu of the editor, click Preview. The editor switches to preview mode.

  10. Click the image. The background color starts changing to random colors.