Unbounce Answers/Getting Started with Unbounce/Frequently Asked Questions (FAQ)
Can I use custom JavaScript or CSS on my 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 are probably many things you want to do that Unbounce doesn't have a component for yet. As with any other regular webpage out there, you can use javascript and CSS to accomplish most things on your own, or incorporate 3rd party scripts into your page.
Every published page has jQuery included
jQuery is a javascript framework that has a great plugin API. Most interface features have a plugin already written that should be fairly straight forward to wire up if you have some knowledge of javascript and html. You can browse most of the plugins here.
Note: 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.
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:
Clicking this will launch a dialogue box where you can paste your custom JavaScript in. The overlay looks like this:
You'll notice 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" (<head>), depending on what your script is trying to accomplish.
Note: Whatever script you are including, make sure you wrap it in <script> tags as the dialogue mentions. Also, it's important to note that this script will only execute 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:
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
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."
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!
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?
can we change the font of the form??? i need to add a custom font
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
Hello Rafael - thanks for the heads up. It seems that jQuery is changing their plugins site but you can still access their old archive.