Using Custom JavaScript and CSS on Your Landing Page

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!). Ultimately, this custom work is incorporated through jQuery (JavaScript) or Stylesheets (CSS). 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

Every published page has jQuery included

jQuery is a JavaScript framework with a great plugin API. jQuery 1.4.2 is included in all pages by default.

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 that looks like this:

javascript.png

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

javascripts_edit.png

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.

Whatever script you are including, make sure you wrap it in <script> tags, as the dialog mentions. Also, it's important to note that 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 and looks like this:

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


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

This feature requires your own custom domain. You cannot use this feature with the test domain 'unbouncepages.com'

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.

To add a script:

  1. Click on Settings in the left hand menu
  2. Click on Script Manager
    ScriptManager1.png
  3. If this is the first script you're adding to multiple pages, you'll be prompted to add a script. Otherwise, click on the green Add Script button near the top left of the screen
    ScriptManager2.png
  4. Enter a name for your script and click on the Add Script Details button
    ScriptManager3.png
  5. Use the first drop down menu to choose the placement of your script
    ScriptManager4.png
  6. Use the second drop down menu to choose whether you want your script added to your main pages, confirmation dialog pages, or both
    ScriptManager5.png
  7. Paste or type your script in the editor window
    ScriptManager6.png
  8. Choose the domain(s) that you would like to add your script to via the checkboxes on the right
    ScriptManager7.png
  9. Click on 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 gear menu for each script
ScriptManager8.png

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


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

window.ub.page.id  – 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"

window.ub.page.variantId  – the ID letter of the current variant – e.g. "a"

window.ub.page.name  – 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.

Here's an example of a script that sends the variant ID to Google Analytics script as a custom dimension.

 


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 object button from the object toolbar (on the left side of the editor) to the spot you would like it to appear on your landing page.
    custom_HTML.png 
  2. Paste your script/code into the window and click "done"
  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 "Preview" 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

Glossary

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.

 

Back to: Building Your Landing Pages >>