Make Any Page A Landing Page

winteregg-splash.jpg

And make is SMART too.

We were working on a splash/landing page for a client, J.D. Winteregg. We wanted to create a splash page that encourages visitors to use Facebook to sign up on the site. Statistics show that over 70% of site traffic is from first-time users for political websites. We want to do everything we can to begin developing relationships with potential supporters, volunteers, donors and most importantly, voters.  A campaign gets so much more information about that sign up if visitors use Facebook to join the site rather than just name and email address. 

Yes, with NationBuilder's Match function which pulls in a supporter's Facebook, Twitter and/or LinkedIn profile information there is a good chance that the campaign will get that information if that visitor uses the same email address when they sign up for the site as they use for those profiles. But that is potentially a big if. Why take the risk?

So we came up with a typical splash/landing page that makes it easy for visitors to become supporters, give us access to their Facebook profile information, donate or just skip to the site homepage. We pulled in the signup page using a partial template.

I looked at what we came up with and thought it looked pretty awesome. Then I thought, why stop there? Why not create a page type that allows our clients to make any page a landing page increasing the chance we can begin developing that relationship?

So we did.

landing-not-logged-in.png

 

We took the partial template that we had embedded in the header image wrap and coded it to be the side navigation bar. Now if someone has already signed up or joined the site, there is no reason to ask them to do what they have already done. So we decided to make the page smarter.


We used Liquid Logic programming to query the site's database to see if a visitor has already joined the site. Liquid, in its simplest form, is a series of if-then statements. In this case, the page asks if the current user is logged in or has a username is false they see the page above. If it's true, they see the page below.

landing-recruit.png

Now since a supporter has already joined the site, they see an entirely different ask. And by the way, that change happens in real time. If they use the first sign up panel, it changes immediately to this new panel asking them to take the  next step on the "ladder of engagement." 

It displays their profile picture, (If they don't have one the site delivers a site-specific logo picture.), a welcome message and a link to recruit friends. It also includes the social sharing buttons which allow a user to share the site via Email, Facebook, Twitter, LinkdIn and Google+.  Since not everyone will sign up on the recruiter page we hard code to automatically add a Recruiter ID number to anyone who uses the Social Sharing buttons to spread the word about your campaign and cause.

But what if a user does sign up and does recruit friends or family? Well, then we try to move them further up the engagement ladder by changing the ask.

landing-volunteer.png

So we have gotten a visitor to sign up. We have gotten them to recruit friends. The next step is to get them to become a volunteer. So we change the message again. We use Liquid again to acknowledge how much they have helped our campaign or cause already. The site queries the database to see if the user has a recruited supporter count greater than zero. If they do, the site displays the number of recruited supporters. It also hides the recruit button and instead asks them to help further by becoming a volunteer.

All of that was the easy part. 

The HTML and CSS for that template run about 300 lines of code. One of the keys to becoming certified as a NationBuilder Architect is that end users/clients have to be able to enable your customizations without having clients/end-users touch a line of code.

In order to make that possible, we created a partial template for each page type and edited all the page type templates at the theme level. If a client wants a standard two column layout, they simply click on Show Sidebar in the page settings. If they want a standard, one-column page, they don't click Show Sidebar. In order to include the custom landing page template, the client simply uses a standard one-column page and adds landing to the page settings.

Including the "landing" tag in the page settings pulls in the custom HTML structure and associated CSS. Excluding the landing page tag makes the page default to the native NationBuilder layout.

Below is the code for a Basic page. We had to create multiple partial templates because NationBuilder defines content differently for different page types. 

{% if site.page_tags contains "landing" %}
{% include "landing" %}

{% else %}

<div class="headline">
<h2>{{ page.headline }}</h2>
</div>

<div id="content">

<div id="intro" class="intro">
<div class="text-content">
{{ page.basic.content }}
</div>
</div>
{% endif %}

None of this is native to NationBuilder. I guess it's why NationBuilder Architects and Experts exist. Too often a campaign website is nothing more than a digital billboard. We can show you how to make a NationBuilder website the center of your organizing platform. We take what is arguably the best out-of-the-box organizing platform and work to make it even harder, better and most importantly, smarter.