In my last post I discussed how awesome Zapier is and how we use it for a number of automations at ROBYN. In this new series of posts, I'm going to show you exactly how I use a suite of tools to create landing pages that highlight products from our supplier friends at Reciprocity Road.

We'll be looking at the landing page that I set up for Hirsch Gift's MiniTunes speaker. You can view the landing page at swag.robynpromo.com/minitunes/. What makes this landing page special is that it not only highlights one of my favorite products, but it allows the visitor to get a personalized quote, instantly, from their account rep at ROBYN. You're welcome to try it out if you'd like (just indicate me as your rep). Here's the workflow:

The visitor clicks the Call to Action button and fills out the form, indicating their account rep.
After submitting the form, the user receives an email from their account rep with a download link for their quote.
The quote is personalized and dated for the client with the account rep's contact information.
The account rep is BCCed on the quote email so that they know they've got an interested party.

This all takes place without the rep's involvement. All they've got to do is share the landing page with their contacts via email, social media, etc.

In this series, I'm going to show you exactly the steps I took to build this landing page and wire up to make magic. We'll cover:

Building your landing page with Unbounce.
Using WebMerge to generate our personalized quote.
Using Mandrill to send email.
Wiring it together with Zapier.
BONUS: Taking your landing page automation to the next level.

Lets get started!

Build Your Landing Page

In my experience, Unbounce is the most feature-rich and easy to use landing page platform. In this post we're going to focus mostly on building the page itself. We're not doing any A/B testing or dynamic text replacement, but you should definitely consider those.

1. Choose a Template

There is no shortage of templates to get you started and if you're looking for more, ThemeForest has tons of Unbounce templates to get you started. For this landing page, I started with the Produkto template.

I like this template because of its simplicity and clear call to action. It's perfect for featuring a single product. You'll find that all of Unbounce's templates are really quite flexible. They're also mobile friendly so that's a plus!

2. Set your page properties

In the right-most sidebar, you'll see a list of page properties. Don't skip this part of your building process, this is where you'll work on your SEO for the page.

Title - This will show up as the clickable link in search engine results pages (SERPs). You'll also see it appear when sharing your page on social media. Read Title tag best practices here.
Keywords - Many would argue to leave this blank. It hasn't been used by Google for some time. I fill it out anyway, just in case it's still being used elsewhere. You never know.
Description - This is the text you'll see below your title on SERPs. Google actually does not consider keywords or description for page rank, but it's still important to write a compelling description as it will influence your click-through rate (CTR). Read more about the Description tag here.

3. Customize page for your brand

Okay, now for the fun stuff! Let's get this thing looking more like our own. I like to start with the color scheme first. At ROBYN #6699CC is our blue. To change that, simply click where you see the default green.

Now take a look at that right sidebar again. Under Background you'll see where you can change the color of this section. When clicking on any other element in your page, look in this right column to change the color (or any other properties).

To swap those logos in the header and footer, just click on the image and then under Image Properties, you can click on the Change Image button. You may need to adjust the size of your images, but Unbounce makes that easy with commonly found tools that you'd see in other image editors.

Do the same with that big hero image. I like to use images that are about 2800px wide for these. Any larger and you'll slow your page load down. Also, this template has that cool Paralax setting on by default. That's cool! Pro-Tip: Looking for cool images? Visit unsplash.com. Good, royalty free stuff there.

4. Add (and remove) content

Ready to add your copy? Of course you are! It's easy. Double click in the text box and start editing. For this page I started with the supplier description for the item and tweaked as I saw fit.

I also added a section called Swag Theory. My thinking here is, as I build these pages, this will be a good spot to discuss how this item can fit into a brand's overall strategy. If I can, I'll drop some industry facts in here, eg. caps get a bazillion impressions, etc. I couldn't find any industry research specific to bluetooth speakers, so I improvised.

Finally, the last block gives a shoutout to my homies at Reciprocity Road.

Removing blocks of content is easy. Click on the section, press delete. Boom. Similarly, if you want to keep the section but delete content in it, click it, press delete. Unbounce is intuitive.

Adding content or even new sections is done using the tools in the left sidebar. Just drag and drop.

5. The Image Gallery

There's one feature this template is missing that I wanted to add. An image gallery. Here's how you do it in Unbounce.

1. Place your images. Big image up top and a row of little thumbnails. For these thumbnails, instead of dragging new image elements to the canvas, you'll want to use the Lightbox Button widget. Your new Lightbox button will look like a regular button with some text. To change the button to an image, go to the Appearance panel and choose Image from the Style dropdown. When you're done, you should have something like this.

2. Make your light boxes. Every time you made a new Lighbox button, a Lightbox was created for it. You'll see these listed towards the top-left of your screen. I suggest you name these something like 1, 2, 3... It'll make a later step easier.

Choose your first Lightbox from the dropdown to edit it. Here, all we need to do is upload our larger version of the thumbnail image. Repeat for each Lightbox.

Finally, back on the Lightbox buttons, you'll want to change the Click Action to Show a Lightbox and then choose the appropriate Lightbox to open. If you need test how you're doing, you can click the Preview button at the top-right of your screen.

6. Build your call-to-action

For this landing page, I wanted the call to action to be getting your personalized quote. To do this I needed to collect the visitor's name, email and sales rep. So I created a new Lightbox and added a simple form to it by dragging a Form widget from the left sidebar onto the canvas.

Editing the fields for the form is done by clicking the Edit Form Fields button in the right sidebar.

You have a lot of choices in the Form Confirmation panel. But in this case, since Zapier is going to do all the heavy lifting, I just set it to display a confirmation message.

Conclusion

That's it! Your page is built and ready to publish. Look through Unbounces other features to make sure you get the most out of your landing page. There's so much that can be done!

In the next part of this series, I'm going to show you how to use WebMerge to build your dynamic quote document. It's relatively simple, but I do have a trick I want to show you that's pretty dang sweet so stay tuned!