Adding Custom JavaScript and CSS in the Classic Builder

Follow

The Classic Builder includes many widgets that you can drag and drop onto your page, helping you customize and style your page.

However, suppose there's a custom feature you'd like to add to your page, for example, a Chatbot or Calendar widget. You can apply custom JavaScript and custom stylesheets (CSS) directly into the Classic Builder.

The following article explains how to install JavaScript and CSS in the Classic Builder.  

Adding Custom Scripts (JavaScript)

  1. Navigate to your landing page in the Classic Builder.
  2. Click the Javascripts button on the bottom left-hand corner of the Classic Builder:
    Custom_Scripts_Javascript.png
  3. An empty dialog box will appear; here, you can paste or type in your custom JavaScript.
  4. Provide your script a name in the Script Name field. 
  5. You'll want to choose the Placement of the script; this will depend on the script's functionality or any instructions provided by the third-party app you're copying this script from (i.e., the placement may differ). 

    Here are the different placement options in the Classic Builder:
    • Before Body End Tag: This installs the script before the end of the body (before </body>),
    • After Body Tag: This installs the script after the start of the body (after <body>), or
    • Head: The<head> section of your landing page. 
  6. Click Done at the bottom right-hand corner of the dialog box to save the script. 
  7. Be sure to Save your page to finalize these changes. 

To add the same snippet of JavaScript globally across all pages under the same domain, you can install the script using Unbounce's Script Manager

Pro-tip:

Remember to wrap your scripts in <script> tags!

Working with jQuery

Some scripts depend on external libraries such as jQuery. 

See Installing jQuery on Your Landing Page for steps on embedding jQuery into the Javascript widget. 

If you wrap your script in a jQuery function, such as $(function(){ your-function-here; }) function, the script will only run once the page fully loads.

Adding Custom CSS

  1. Navigate to your landing page in the Classic Builder.
  2. Click the Stylesheets button on the bottom left-hand corner of the Classic Builder:
    Custom_Scripts_Stylesheets.png
  3. An empty dialog box will appear; here, you can paste or type in your custom CSS.
  4. Provide your stylesheet with a name in the Stylesheet Name field.
  5. Paste in your CSS; depending on the code, you may need to wrap the CSS in <style> </style> tags.
  6. Click Done at the bottom right-hand corner of the dialog box to save the stylesheet.
  7. Be sure to Save your page to finalize these changes.

Locating Each Element's Class/ID

Any CSS you add to a standard webpage is possible on an Unbounce page with the Classic Builder. 

You can find the class/ID for each element on your page by selecting that element in the Unbounce builder.

Next, navigate to the Properties panel & scroll to the bottom to view the Element Metadata:

custom-css-builder.png

Note:

Custom scripts & CSS will only run in Preview mode, or on a published page (and not in the Classic Builder). To test out scripts and CSS, visit the live published page or Preview the page. 

Will you help me troubleshoot my custom JavaScript and CSS?

We're so happy to hear that you'd like to customize your page! As it turns out, we primarily provide support for the app's core Classic Builder and widget library. Troubleshooting custom scripts and code is often outside our Support teams' scope.

If you have questions about your custom CSS or JavaScript, we encourage you to post them in our Unbounce Community forum, where one of our community experts may have some great tips for you.

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.

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.

Related Articles

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

Adding Your Custom Scripts Using Script Manager

Integrating with Google Analytics using Script Manager

How do I Integrate Google Tag Manager with Unbounce?


Do you agree or disagree with this statement: This article helped me find the information I needed quickly and easily.

Select an option and leave us some feedback in the comments:

Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply