Using Custom JavaScript and CSS on Your Landing Page

Follow

Note

If you're concerned with GDPR compliance, ensure that any third-party forms or code involving heat-mapping or tracking are not interacting with your leads.

Unbounce has a wide collection of native in-app widgets that can be incorporated into your page on a drag and drop basis. However, if there is a feature that you really need on your page, and isn't offered as an in-app feature, you can always add the additional function using JavaScript and CSS (just like a regular webpage!).

It's important to note that although we're happy to have you customize your page, we're only able to provide customer support for the core editor and widget library in the app - not your customized pieces.

If you have questions about your custom coding, we encourage you to post them to our community board, where one of our community experts may have some great tips for you.

jQuery is a JavaScript framework with a great plugin API. jQuery 1.4.2 used to be bundled on all Unbounce landing pages, but as we have improved our base code, jQuery is no longer as needed for custom code as previously. If you had previously enabled jQuery on your landing page, this code will still be included in your javascripts. 

Should you choose to add jquery to your page, you can find the appropriate code at https://code.jquery.com. 

There's a huge array of jQuery plugins available which should be fairly straightforward to implement, as long as you have a basic knowledge of JavaScript and HTML.

 


How to insert custom scripts into your page

You'll notice a button in the bottom left side of the editor called Javascripts:

Custom_Scripts_Javascript.png

Clicking this will launch a dialog box that you can paste in your custom JavaScript.

You can choose where the script should be placed in the document - it defaults to "Before Body End Tag" (before </body>) but you can change that to "After Body Tag" (after <body>), or "Head" (in <head> section), depending on what your script is trying to accomplish.

Alternatively, if you wrap your script in a jQuery $(function(){ your-function-here; }) function, it will only run once the page has loaded. Note: This will only work if you have enabled jquery on your landing page! 

Pro-tip:

Remember to wrap your scripts in <script> tags!

Note:

This script will only run in preview mode, or on a published page (and not in the editor).

How to include custom CSS

Including custom CSS styles is no different then including custom JavaScript. Instead of using the Javascript button, use the Stylesheets Stylesheets_button.png button beside it at the bottom left side of the Unbounce Builder

Custom_Scripts_Stylesheets.png

Any CSS that you can do on a normal webpage is possible in an Unbounce page.  The class/ID for each object on your page can be found by first selecting that object in the Unbounce editor, then looking over in the properties pane under the section Advanced. This will let you write CSS rules for specific elements (each element is assigned a unique ID).

Custom_Scripts.gif


Will you help me troubleshoot my custom JavaScript and CSS?

Unfortunately, we cannot provide support for any custom scripts or CSS that you add to your page. Our development team is hard at work improving the core editor and building a library of widgets that don't require any custom script work. If you are really stuck with something, you can try posting your question in our online community support forum. Likewise, if you've written some custom JavaScript or CSS that you think someone else might benefit from, please post it on the forum as well!


Other Articles You May Find Useful:

Adding Your Custom Scripts Using Script Manager

Integrating with Google Analytics using Script Manager

 How do I Integrate Google Tag Manager with Unbounce?

How Do I Embed Custom HTML or Widgets Into a Landing Page? 

 

 


Was this article helpful?
28 out of 71 found this helpful