Can I add a custom code to my legacy landing page?
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.
There are a few things to keep in mind when working with custom code:
- You can add custom code only in <body> section.
- 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 can’t offer assistance or guarantee the functionality of any other 3rd party scripts.
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.
