How I hacked @Unbounce to make better landing pages.
The Tuesday morning of a designer who hates WYSIWYG editors.
TL;DR
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.
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.
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.
You can download example files here:
https://dl.dropboxusercontent.com/u/9138554/unbounce-medium-post.zip
