How to add a custom code to my landing page?
You can add your own HTML code, CSS formatting and JavaScript to your landing page using the Custom code element.
There are a few things to keep in mind when working with custom code:
- You can add custom code to <body> or <head> section of your landing page. If you are using a third-party code, make sure to get the information about code placement from its provider.
- To be GDPR-compliant, be sure to inform your leads and visitors that you use any third-party forms or code involving heat-mapping or tracking.
- Adding multiple tracking codes, widgets, etc. can slow down your landing page. Additionally, overloading your landing page with content can lead to visitors clicking away.
- When you work in the landing page editor, you’ll only see the placeholder. The script only runs in a preview mode and in a published page. So, you should inspect the page right after you publish it to see if it’s working the way you intended. You shouldn’t share the link to the page before you ensure its quality.
- It’s a good idea to check if the page containing the code displays properly in all web browsers, especially if you’re modifying CSS.
- Our Customer Success team can provide support for the standard features available in the editor. We are unable to offer assistance or guarantee the functionality of any other third-party scripts.
Adding a custom code to the lading page body
The body section of a landing page is the main area where the primary content is displayed, such as text, images, videos, and interactive elements such as sign up forms. It lies between the header and footer, serving as the central space for delivering information and engaging visitors.
To add a custom code to the body of your landing page:
- In the landing page editor, click on the Add elements button.
- Drag and drop the Custom code element into your page content. Note that the editor will highlight the spots where you can drop it.
- Click inside the Custom code object to open the toolbar and enter your code in the editor on the right.
There are three types of code you can use in the body section:
- HTML – standard HTML formatting, for example:
<p> </p> - CSS – place your CSS code between the style tags:
<style> </style> - JavaScript – place your JS code between the script tags:
<script> </script>
If you want to use Less or Sass formatting, you need to compile it to CSS first and then place it between the style tags:<style> </style>
You can also set additional options for your custom code element:
- Add additional class names – enable this option to add class names to the element container so you can style it according to your needs.
- Absolute positioning – enable this option to place the custom code in any place on your landing page. We only recommend using this option if you have some unusual design that can’t be created in any other way. Using objects with absolute positioning can make your page less on mobile devices. You can find more information about this feature here.
- Hide on mobile devices – enable this option to hide custom code outcome when your page is opened on a mobile device.
Adding a custom code to the head section of your landing page
The <head> section of a landing page is a part that contains metadata and information about the page, such as its title, character encoding, linked stylesheets, scripts, and SEO-related tags. It does not display content directly on the page but provides essential instructions for browsers and search engines.
To add a custom code to the head of your landing page:
- In the landing page editor, click on the Manage pages button.
- Hover over the action button beside the Home page and click Settings.
- In the Page settings window, go to <head> element tab and paste your own or third-party script there.
Note: changes are saved automatically when you click outside the text box.
Use tags to let us know how the code should be rendered:
- For HTML, use HTML tags, like:
<h2> </h2> - For CSS, surround the code with
<style> </style>tags - For JavaScript, surround the code with
<script> </script>tags
Steps for legacy landing pages
You can add a custom code ( HTML, CSS, and JavaScript) to your landing page using the custom code placeholder in the landing page editor. Use this option whenever you want to add tools and widgets not included in the editor.
The code is added to the desktop and mobile versions of your landing page. If you want to run A/B test on your landing page, be sure to add the placeholder to each variant. You can also add it to a thank-you page.
You can add the custom code to any new or existing template in the editor. Here’s how to get there:
1. Go to Landing pages and do one of the following:
- click the Create landing page button to build a new page
- select Edit page from the Actions menu next to the page name
2. Double-click the Custom code icon to add the placeholder to the template.
The placeholder appears in the top left corner of the section displayed.
When you double-click the icon, a modal where you can enter the code opens automatically.
3. (Optional) Grab-and-drag the placeholder if you want the placeholder to appear in a specific spot on the page. Double-click the placeholder to a modal where you can enter the code.
4. Paste or type in the code. Be sure to wrap your scripts in <script> tags (for JavaScript). When adding multiple code snippets, paste them in one under another.
5. (Optional) If you’re running an A/B test, repeat Steps 2-4 for each variant of the page.
6. When creating a new page, click the cell phone icon to generate a mobile-friendly version of your page. If you’re editing an existing page, click it to check if you approve of the changes.
7. (Optional) Click Preview to check if the code properly displays any elements you’ve added that should be visible to your visitors.
8. Save the changes or publish the landing page.
9. View the published landing page to verify it’s displaying properly.
