Register

How can I add a Custom Script inside my landing page?

You can now create your own Custom Script for your landing page by simply using the Landing Page Designer

The coolest thing 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 pages 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.
How_can_I_add_a_Custom_Script_inside_my_landing_page_-_a1.png


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

 

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

 

4. Click on each element or structure to find it's information.
How_can_I_add_a_Custom_Script_inside_my_landing_page_-_a4.png

 

B. Example

Let's see an example on 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-n'-drop a Container to the white area, at the right side of the menu. For this example, we are adding a Full Width Container.How_can_I_add_a_Custom_Script_inside_my_landing_page_-_b1.png

2. Add a new Image element and upload your image.
How_can_I_add_a_Custom_Script_inside_my_landing_page_-_b2.png

How_can_I_add_a_Custom_Script_inside_my_landing_page_-_b2b.png

3. Click on the Custom Script button. 
How_can_I_add_a_Custom_Script_inside_my_landing_page_-_b3.png

4. Add the JSON code in the bottom section. In that case, the code will be added at the <end> of the document.
How_can_I_add_a_Custom_Script_inside_my_landing_page_-_b4.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. 
How_can_I_add_a_Custom_Script_inside_my_landing_page_-_b5.png

6. You can now go to Preview and click on the image! 
How_can_I_add_a_Custom_Script_inside_my_landing_page_-_b6-1.png


The background color will start changing to random colors! 
How_can_I_add_a_Custom_Script_inside_my_landing_page_-_b6b.png

 

How_can_I_add_a_Custom_Script_inside_my_landing_page_-_b6a.png

 

Happy Custom Scripting!