Unbounce Answers/Next Steps/Building Your Landing Pages

Using Custom JavaScript and CSS on Your Landing Page

Carter Gilchrist
posted this on March 30, 2011 03:35 PM

We're working hard to build a collection of custom widgets and components for you to easily incorporate into your page. However, there may be functionality you'd like to add that Unbounce hasn't integrated yet. As with a regular webpage, you can use JavaScript and CSS to build in additional functionality.

 

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.

Note: 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!

 

Some examples of pre-written custom Script and CSS

You can check out our "Tips & Tricks" category for a few custom scripts/css that have been used by other customers.

 

Comments

User photo
Fernando Avila

Unbounce rocks... it would be perfect... but I'm having big trouble trying to use a nice slider-rotator banner...

Whenever I get the banner to work... it messes with my form: "jQuery(formSelector).validate is not a function"...

It's the slider... or the form

Would you please elaborate a little bit more on:

"We are using jQuery.noConflict() on published pages, so if you are writing custom jQuery code, be sure to use the jQuery keyword and not the $ dollar sign function."

April 23, 2011 01:30 AM
User photo
Stefania Bonacasa

Hi Guys!

Is there a way to upload media files, i.e. images to be used in the custom css?
I have some background images applied to some tabs in my custom css, but I don't know where to reference them to.

thanks!

May 22, 2012 11:24 PM
User photo
Ryan Engley
Unbounce

Hi Stefania!  Unfortunately we don't have the functionality for you to upload image assets aside from those in your image library.  Given your use case,  your best bet is likely to upload them to your own server and reference them there if possible.  Would that work for you?

May 30, 2012 02:42 PM
User photo
Ali Raza

can we change the font of the form??? i need to add a custom font

December 17, 2012 12:48 PM
User photo
Ryan Engley
Unbounce

Hello Ali - you can add tags to your field labels which you can then style with CSS.  This works great if you want to use webfonts like TypeKit or Google Web Fonts with your forms

field_label_css.png

December 18, 2012 12:25 PM
User photo
Rafael Chagas
In topic: Every published page has jQuery included. The link in text:You can browse most of the plugins here. Out or in work out page! Please, just point to other place for have some more idea of it. Thanks. ;)
December 23, 2012 03:57 PM
User photo
Ryan Engley
Unbounce

Hello Rafael - thanks for the heads up.  It seems that jQuery is changing their plugins site but you can still access their old archive.

January 08, 2013 05:07 PM
User photo
Dan Oved

Is there a javascript event that unbounce fires when a form is successfully submitted?  It would be great to hook into this to send conversion data to third party services

July 22, 2013 01:25 PM
User photo
Erin Colbert

Is there any way to share a single Stylesheet across all of our pages? I've just had to make a minor update to our CSS, but I had to make that change on over 40 different landing pages. It was very painful.

September 25, 2013 02:59 PM
User photo
Ryan Engley
Unbounce

Hey Erin - if you host your stylesheet outside of Unbounce (say on your own servers) then just load that master stylesheet into all your pages, updates to the master will automatically affect all pages.

September 26, 2013 11:40 AM
User photo
David Friend

Is there a way we can automatically include pieces of javascript (e.g., Google Tracking) on every page? It seems I have to add it to each new page manually.  Would be great if there was a 'new page template' where every new page automatically included my standard javascript.

November 21, 2013 03:06 PM
User photo
Ryan Engley
Unbounce

Hey David - shared scripts are in the works but for now, you have to add the code to each page. Once the feature is ready, we'll give you ways to share scripts between all your pages, between all pages on a domain, or on a page by page basis. I've tagged your account so that when the time comes, we can reach out and invite you to the beta.

November 21, 2013 03:28 PM
User photo
David Friend

Awesome, thanks!

November 21, 2013 03:30 PM
User photo
Sam R

Ryan - interested in that feature when it's available too!  thanks!

December 10, 2013 11:02 AM
User photo
Lou Sturm
Unbounce

Hey Sam - I've tagged your company's account. When we're ready to roll out shared scripts you'll be amongst the first to know!

December 10, 2013 01:35 PM
User photo
Nelson Goncalves

Very interested in getting notified when shared scripts are launched.  Thanks

January 08, 2014 08:39 AM
User photo
Lou Sturm
Unbounce

Hey Nelson - thanks for your keen interest! I've made sure to tag your Unbounce account. When we're ready to launch we'll be sure to notify you! 

January 08, 2014 09:15 AM
User photo
Adrian Measures

I'd love to have shared scripts too when available ! Thanks

February 20, 2014 11:27 AM
User photo
Johnny Opao
Unbounce

Hey Adrian - I've gone ahead and tagged your account for shared scripts :)

February 20, 2014 04:22 PM
User photo
Sandra Davey

Shared scripts would be great. Just adding scripts to about 50 pages now so would be a great help :)

March 27, 2014 05:06 PM
User photo
Johnny Opao
Unbounce

We're with you on that Sandra! We put together a forum post showing a clickable prototype of the Share Script feature. Feel free to leave your feedback, we'd love to hear it!

https://getsatisfaction.com/unbounce/topics/feedback_wanted_global_...

March 27, 2014 05:09 PM
User photo
marina carbone

Please launch this!

I need to tag 190 pages with a new third party tracking set of scripts. 

June 03, 2014 06:52 AM
User photo
Randall Glick

add me to that list of shared scripts notification ... thanks

June 24, 2014 08:11 AM
User photo
Quinn Omori
Unbounce

Hi Randall and Maria - I've tagged both of your accounts now.

June 24, 2014 09:17 AM
User photo
Finge Holden
Please add me to the list of shared scripts :-)
June 29, 2014 10:40 AM
User photo
Quinn Omori
Unbounce

Hi Finge - I've added you now. :D

June 30, 2014 09:37 AM
User photo
Melissa Rein

Can I please get added to the feature release notification for Share Script?

July 11, 2014 10:33 AM
User photo
Quinn Omori
Unbounce

Hi Melissa - I've added your account as well. Cheers!

July 11, 2014 11:33 AM
User photo
Ruchir Gupta

Hi - firstly, thanks for your great FAQ and support. Secondly, is there a way to add an idential script across multiple landing pages? 

I have several live pages that require the exact same Google Analytics tracking script.

Thanks.

August 04, 2014 03:38 AM
User photo
Ruchir Gupta

*identical

August 04, 2014 03:39 AM
User photo
Johnny Opao
Unbounce

Hey Ruchir - Not at the moment but it is one of the major features we are currently building. See this forum post for the latest discussion on the topic:

https://getsatisfaction.com/unbounce/topics/feedback_wanted_global_...

I'll also tag your account as being interested in the feature!

August 04, 2014 12:47 PM
User photo
Mario admin

Hi Is there a way to add a fixed navbar that works on mobile?. I have created one, but only works when I open the landing page from a browser on a pc but not from a mobile device browser. Any suggestion.

September 02, 2014 12:42 AM
User photo
Quinn Omori
Unbounce

Hi Mario - there are a bunch of different ways to create fixed elements, so depending on the solution you're using, it might not work on mobile browsers.

We do have a workaround that Johnny put together that should work on desktop and mobile though. You can find instructions on setting that up here: https://getsatisfaction.com/unbounce/topics/creating_a_fixed_header...

September 02, 2014 12:47 PM
User photo
Stephanie Rewis

I'd love to be notified of the shared script addition as well. Cheers!

September 03, 2014 07:01 PM
User photo
Chris Duncan

I would also like to be invited to try the shared script manager

September 12, 2014 09:43 AM