Using Custom HTML, Javascript and CSS on Your Landing Page

Instapage is constantly working to bring you more custom widgets and components that can be easily incorporated into your landing page without using custom HTML or Javascript codes. However, we know there are probably many things you want to do that Instapage doesn't have a component for yet. Therefore, you can use the Javascript and HTML/CSS settings to accomplish most things on your own or incorporate third-party scripts into your page.

How to insert Javascript or HTML/CSS into your page

1. From the page builder, select the Javascript setting situated on the right sidebar:

image of the HTML/CSS and Javascript options under the Settings menu

2. Now paste your code into the assigned section: Header, Body, or Footer:

Screenshot_on_2023-04-20_at_16-28-25.png

Adding custom HTML and CSS to your landing page is done the same way, you just need to use the HTML/CSS tab from the Settings menu.

The custom codes will only execute in the live environment on the published page. The codes will not execute in the editor, and they are not meant to work in preview mode either. If you are unsure whether a code works or not, publish the page and check it on the live URL. To publish a page, you can check out our article here: https://d.pr/4I1IJ6. 

Also, every published page will be including the jQuery library if the jQuery syntax can be found on the page. However, note that the page loading time might be slightly increased in this case.

How to insert an HTML widget

If you need to insert an HTML element, you can also use the HTML box from the left-side menu of the page editor:

image of the html widget icon in the left sidebar

Adding CSS for the mobile page

While you can use inline CSS to add certain properties to page elements on the desktop version, in order to do the same thing for those elements on the mobile version, you will need to write the CSS in the HTML/CSS section and target the mobile version specifically if you or someone on your team has the necessary coding experience.

The Scripts & Privacy section

Here you can add tracking scripts that will be applied to all the variations of the page experience. If you want to add tracking scripts to variations individually, for example, the ones that require element IDs, you will need to navigate into the builder and use the Javascript section mentioned above.

If you enable the privacy compliance, any scripts placed in this section will fire only if the visitor accepts. You can read more on this section and how to use it here: https://d.pr/JAx5yC. 

Workspace Scripts

This section of your workspace allows you to add code that can be applied to multiple pages at once without having to add the code individually to each one. Please refer to the following dedicated article for more details: https://d.pr/CU6RhI. 

How do I know which section to use for my script?

If privacy is a concern, tracking scripts must be applied in the Scripts & Privacy section in order to be compliant. If privacy is not a concern, then the scripts can be placed in the Scripts & Privacy section if they should be applied to every variation of that experience and do not reference a specific element ID. If Privacy is not a concern, and there are no variations for the experience, the script should be placed in the Javascript or HTML/CSS section in the builder on the right side menu. If an element ID must be referenced for the code to work, the code should be placed in the builder regardless of privacy compliance. If you want to apply a script to multiple pages at once, you can add it to the Workspace Scripts section.

Note: Our team can provide support for custom code features that are presented in our Help Center guides. We cannot offer assistance or guarantee the functionality of any other 3rd party scripts. 
In case you need help with a custom functionality or any code customization that is not provided through our Help Center articles, we have a Professional Services team that can help our Convert users. The Convert plan includes Professional Services as well as additional features and services that can be seen here: https://instapage.com/convert-benefits
Note: The code used on the page will need to have the appropriate opening and closing tags, for example, <html> at the beginning of the code and </html> at the end. These will ensure that the code is not treated as a simple block of text on the page, and it should work accordingly.
Note: Any JavaScript code that is placed inside of the page slideout under Scripts & Privacy needs to be wrapped in <script></script> tags. JavaScript code that is placed inside the page builder under Settings>Javascript can be placed without <script></script> tags.