The Classic Builder includes many widgets 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 an embedded calendar widget. You can apply custom JavaScript and Cascading Style Sheets (CSS) directly to the Classic Builder.
The following article explains how to install JavaScript and CSS in the Classic Builder.
Adding Custom Scripts (JavaScript)
- Navigate to your landing page in the Classic Builder.
- Click the Javascripts button on the bottom left-hand corner of the Classic Builder:
- An empty dialog box will appear; this is where you can paste or type in your custom JavaScript:
- Name your script using the Script Name field.
- 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, as 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 tag (</body>) in your page HTML.
- After Body Tag: This installs the script after the start of the body tag (<body>) in your page HTML.
- Head: This installs the script within the Head (<head>) section of your page HTML.
- Paste in your JavaScript.
- Click Done at the bottom right-hand corner of the dialog box to save the script.
- Be sure to Save and Publish/Republish your page to finalize these changes.
Pro-tip:
Remember to wrap your scripts in <script> tags!
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.
Note:
Custom JavaScript will not run in Preview mode or in the Classic Builder itself. To test your JavaScript functionality, visit the published version of your landing page.
Working with jQuery
Some scripts depend on external libraries such as jQuery.
Check out our documentation on 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
- Navigate to your landing page in the Classic Builder.
- Click the Stylesheets button on the bottom left-hand corner of the Classic Builder:
- An empty dialog box will appear; this is where you can paste or type in your custom CSS:
- Name your stylesheet using the Stylesheet Name field.
- Paste in your CSS.
- Click Done at the bottom right-hand corner of the dialog box to save the stylesheet.
- Be sure to Save and Publish/Republish your page to finalize these changes.
Pro-tip:
Remember to wrap your scripts in <style> tags!
Note:
Custom CSS will not run in the Classic Builder itself. To test your CSS, visit the Preview version or published version of your landing page.
Locating Each Element's Class/ID
You can apply CSS to different elements on your landing page by using Class and ID selectors. A Class can be used to apply styles to multiple elements on your landing page at the same time, while an ID can be used to apply styles to only a single element. You can read more about Class and ID selectors here.
To find the Class and ID for each element on your page, follow the steps below:
- Navigate to your landing page in the Classic Builder.
- Select an element on your landing page.
- Next, navigate to the Properties panel and scroll to the bottom to view the Element Metadata:
Will you help me troubleshoot my custom JavaScript and CSS?
We're so happy to hear that you'd like to customize your page! That being said, we primarily provide support for Classic Builder and Smart Builder native features. Troubleshooting custom scripts and code is 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 be able to provide some assistance.
Likewise, if you've written some custom JavaScript or CSS that you think someone else might benefit from, please post it on the forum.
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.
Glossary
HTML: the building blocks of your page, e.g. headers, body text, any images you want to include.
JavaScript: a programming language that adds interactivity to your page, e.g. page animations, content updates, interactive maps, etc.
jQuery: a feature-rich JavaScript library that can be installed to simplify JavaScript operations.
Cascading Style Sheets (CSS): a language that is used to Stylize elements written in a markup language such as HTML.
Class: a CSS selector that can be used to apply CSS styling to multiple HTML elements on your page.
ID: a CSS selector that can be used to apply CSS styling to a single HTML element on your page.
Related Articles
How Do I Embed Custom HTML or Widgets Into a Landing Page?
Adding Your Custom Scripts Using Script Manager