Register

Add a Custom Script inside your landing page

You can now create your own Custom Script for your landing page by simply using our platform's powerful Landing Page Designer. 

The advantage is that not only you can add your own custom script, but you can even customize it by using existing elements and structures of the landing page designer.

Let's see how you can do this: 

A. Adding a Custom Script

1. Click on the Custom Script button, located on the top menu inside your landing page designer.custom_script_landing_pages_2.png

 

2. On the top section, of the options appearing, you can add the JSON code that will be added at the <head> of the document.custom_script_landing_pages_3.png

 

3. On the bottom section, of the options appearing, you can add the JSON code that will be added at the <head> of the document.custom_script_landing_pages_4.png

 

4. Click on each element or structure to find its information.custom_script_landing_pages_5.png

 

B. Example

Let's see an example of how you can use this powerful tool. In our example below we are going to create a script so that when clicking on an image element, the background color will be changing randomly.

1. Drag and drop a Container to the white area, at the right side of the menu. For this example, we are adding a Full Width Container.custom_script_landing_pages_6.png

 

2. Add a new Image element and upload your image.custom_script_landing_pages_10.png

 

3. Click on the Custom Script button. 

 

4. Add the JSON code in the bottom section. In that case, the code will be added at the <end> of the document.custom_script_landing_pages_7.png

 

You can find below the code that we will be using for our example, but keep in mind that in order to be able and use it on your design, you need to 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);
};

 

5. Click on the image element in order to see the Element ID and then add it to the script code.custom_script_landing_pages_8.png

 

6. You can now go to Preview and click on the image.custom_script_landing_pages_9.png

 

The background color will start changing to random colors. Happy Custom Scripting!