How I hacked @Unbounce to make better landing pages.

The Tuesday morning of a designer who hates WYSIWYG editors.

Alexandre Deschamps
Apr 9, 2014 · 3 min read

By adding a javascript file at the end of the document, I was able to replace all the <Body>’s content (which was generated by Unbounce’s WYSIWYG editor) by my own template while keeping their form element intact for tracking purpose.

The marketing team at CakeMail has been using Unbounce to create landing pages for a while now. It’s a great tool that lets them create landing pages on the fly and A/B test them. Since then, our conversion rates have skyrocketed to the moon!

But we had to pay a hefty price. We had to use their WYSIWYG editor.

A/B tests are essential. Optimization is crucial. But like many of my fellow designers, I’m allergic to WYSIWYG editors. Yes, they’re a good tool if you have no HTML/CSS knowledge. But as a power user, not having the option that lets me plug in my own code was beyond irritating. I can’t afford to take 3 hours to go through learning the interface when I could create a beautiful landing page in less than that.

However, at the very bottom of the screen, I spotted a button that let me add Javascript files. Eureka! I fired up Sublime and Sketch and created a beautiful HTML template.

The Idea

Once my template was ready, I took all the <body>’s content and put it under a <script type=“text/template”> tag. Unbounce allows you to add custom javascript at the end of your page. My plan was to sneak my DOM elements there and replace the content generated by their app using Javascript once the page finished loading.

Image for post
Image for post

The Problem

The problem was that Unbounce generates forms dynamically to be able to track the conversion rates. The marketing team obviously wanted to know which pages were performing best. After all, this was the reason why they were using their app in the first place.

The Solution

I modified my code to store the <form> element Unbounce generates into a variable when the page loads. So doing, the HTML generated would be swapped with my template, thereby appending the content of that variable and keeping the form they provide as is, integrated within my design. Same attributes, same values, nothing to worry about.

Image for post
Image for post

The Result

It worked! I can now create HTML files without any constraints in record time and everybody’s happy! I can create slick, responsive designs with custom everything and the marketing team can manage the content while promoting and demoting pages according to their conversion rates.

Image for post
Image for post
Much fullscreen. Very responsive.

You can download example files here:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store