Using Custom JavaScript and CSS on Your Landing Page



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, and hopefully one of our community experts will have some great tips for you.

This article will help you out with:

  • Adding custom code to your landing page
  • Getting set up with Script Manager for your custom code
  • Migrating existing scripts over to Script Manager
  • Adding custom Widgets to your landing page

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


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:

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! 


Remember to wrap your scripts in <script> tags!


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. The button in the bottom left side of the editor is called Stylesheets:

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).

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!

Script Manager - Adding Your Scripts

What is Script Manager?

Script Manager allows you to apply scripts to all of the pages in a custom domain (or multiple domains) via a single process. If you have scripts (like Google Analytics) that you need to apply to many pages, Script Manager is designed to make your life a lot easier.

Please note that this feature requires your own custom domain. You cannot use this feature with the test domain ''

Adding Scripts


If you have pages under a domain that already contains the script you wish to add, this can cause the code to execute twice. Be sure to remove the page-level script before adding it on a domain level to avoid any conflicts.


Global scripts added into the script manager will load after scripts added in your landing page variants.

To add a script:

  1. Click on Settings in the left hand menu. A new drop-down menu will appear.
  2. Select Script Manager.
  3. Click the Add a Script button at the top right of the screen. A dialog box will appear. 
  4. addcustomscript.png
  5. In the new Add a Script dialog box, Enter a name for your script and click the Add Script Details button.
  6. Use the Placement drop-down menu to choose the placement of your script.
  7. Use the Included on drop-down menu to choose whether you want your script added to your main pages, confirmation dialog pages, or both.
  8. Paste or type your script in the editor window. 
  9. Choose the domain(s) that you would like to add your script to via the checkboxes on the right.
  10. Click the Save Changes button near the bottom left of the screen.

Your script will be applied to all pages for the chosen domain and will be applied automatically to all new pages published to the same domain as well.

Once your scripts in Script Manager is enabled, you may also view them in the Javascript section in the page builder.

Disabling, Deleting, and Editing Scripts

Disable (or re-enable) or delete a script via the cog menu addclientcog.png for each script.

Enter the edit screen for any script by clicking anywhere else on the grey bar for each script.

Migrating Scripts to Script Manager

When adding a script to Script Manager, it's generally important to make sure that the script isn't already on any of your pages. Otherwise, when you add it to Script Manager it could end up being run twice. For tracking scripts like Google Analytics or Google Ads Conversion Tracking, this will result in multiple pageviews or conversions, and inaccurate data.

The best way to avoid this is to go through each page and remove the script from the page, before adding it to Script Manager.

This is a one-time process similar to the Google Tag Manager's migration process.

If you are concerned about not tracking pageviews or conversions in the time period between removing the script from a page and re-adding it to Script Manager, we'd recommend deleting the script on all your pages, but not republishing them yet. Then, once the script is gone from all your pages, you can add the script to Script Manager and then go through and quickly republish the pages, which should cut down this period of time significantly.

Script Manager - Advanced Tips and Tricks

Using Page-Level Variables

There are some page-level variables that Script Manager scripts can make use of.  – Unbounce's internal ID for your page. IDs are unique to each page, so they could be useful to differentiate between pages – e.g. "a07b7610-6a9e-11e4-b67a-22000b6882a2"  – the ID letter of the current variant – e.g. "a"  – the name you have given the page inside Unbounce – e.g. "My Page Name"

You could use these to have your script behave differently on different pages, or variants. For example, you could send the variantId as a custom variable to your analytics platform.


Tracking Button Clicks as Google Analytics Events on All Pages

If you'd like to automatically track all button clicks and form submissions as events in Google Analytics, Script Manager can help!

Check out our support article on Integrating with Google Analytics using Script Manager

Integrating with Google Analytics

How do I embed custom HTML or widgets into an Unbounce landing page?

You can use our "Custom HTML" feature to embed most HTML code or script based components or widgets into your page as follows:

  1. Drag the Custom HTML customhtml.png widget from the object toolbar (on the left side of the editor) to the spot you would like it to appear on your landing page. A new dialog box will appear. 
  2. In Embed Custom HTML Code dialog box, paste your script/code into the blank field and click the Save Code button in the bottom right-hand corner of the dialog box.
  3. Stretch the Custom HTML to be the correct size (this can be a process of trial and error after you preview the page).
  4. Save your page.
  5. Click the Preview button previewbutton.png at the top right-hand corner of the builder to see it in action. It won't show up in the editor, just in preview mode and the final published page. Some custom HTML may not render in 'preview', so if it doesn't show up then be sure to check the published page.
  6. Resize the Custom HTML component again to make sure the object you embedded shows up in its entirety.


Javascripts button: located on the bottom left side of the editor. It's where you can add your custom script for a functionality such as Google Analytics tracking code that Unbounce has not yet added.

Stylesheets button: located on the bottom left side of the editor to the right of the Javascripts button. It's where you can add your customized colours and fonts.

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