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's a custom feature that you'd like to add onto your page, for example, a Chatbot or Calander widget, you can add this onto your page using custom JavaScript and CSS (just like a regular webpage)!


How to insert custom scripts into your page

You'll notice a widget at the bottom left side of the builder called Javascripts:

Custom_Scripts_Javascript.png

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

Here, you can choose the placement of the script. This will depend on the script's functionality, or any instructions provided by a third-party app:

  • "Before Body End Tag" (before </body>)
  • "After Body Tag" (after <body>), or
  • "Head" (in <head> section)

Alternatively, if you wrap your script in a jQuery function, such as $(function(){ your-function-here; }) function, it will only run once the page has loaded. This will only work if you have enabled jQuery also embedded onto your landing page! 

Pro-tip:

Remember to wrap your scripts in <script> tags!

If you'd like to add the same snippet of JavaScript globally across all pages under the same domain, it may be best to install the script using Unbounce's Script Manager


How to include custom CSS

Including custom CSS styles is no different than including custom JavaScript. Instead of using the Javascript widget, use the Stylesheets Stylesheets_button.png widget at the bottom left side of the Unbounce builder:

Custom_Scripts_Stylesheets.png


How to Locate Each Element's Class/ID

Any CSS that you can add on a normal webpage is possible on an Unbounce page. The class/ID for each element on your page can be found by first selecting that element in the Unbounce builder, then looking over in the Properties panel & scrolling 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 builder).


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 builder and widget library. Troubleshooting custom scripts and code is often times outside the scope of our Support teams.

Our development team is hard at work trying to improve the core builder and look into ways to build a library of widgets that require minimal custom script work.

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!


Other Articles You May Find Useful:

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?


Unbounce made it easy for me to find the information I need.
Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply