5 Easy Ways to Customize Your SnapApp in 20 Minutes or Less

5 Easy Ways to Customize Your SnapApp in 20 Minutes or Less

Throughout the course of their day, your audience is bombarded from all sides by things vying for their attention.

From their Facebook feed (ahem, don’t try to deny it) and texts from mom to a pressing deadline and slack/gchat from the team, it can get pretty hectic.

It comes as no surprise, then, that web design these days is all about beauty in simplicity. Users are looking for a clean, clear call-to-action with immediate pay off – no headaches. Moreover, they’re looking for consistency – your digital assets should align to offer a unified customer experience.

When it comes to SnapApps, these rules still ring true.

Your SnapApps should be clean, clear, well-designed, and on-brand.

“But hey, Martin, I don’t have the time or design resources to pull that off!” Lucky for you, we’ve built a ton of customization into the platform so you don’t need hours of time or lengthy design back-and-forth to create a great-looking, high-performing piece of interactive content. In this blog post, I’ll show you how to utilize these tools for success.

Below, we’ve got a simple four question survey, styled in the default blues and greys of the SnapApp Builder. The content itself is engaging for the audience, but it needs a bit of polish to fit the SnapApp brand.

 

Before starting, let’s pick some fonts and colors. We want to keep things simple, while ensuring the engagement matches the brand. For this reason, we’ll select one font to use throughout the entire SnapApp, and a color palette with no more than four colors. Ideally, you can find two neutral colors (one light, one dark) and two strong colors (one light, one dark). For this blog, I’m using the SnapApp home page as my muse so I’ll incorporate the following:

Font - Source Sans Pro

Neutral - light: light grey

Neutral - dark: dark grey

Strong - light: light green

Strong - dark: dark blue

Now that we have our fonts and colors, it’s time to apply them to our SnapApp.

Step 1: Customize the Canvas

Our Background, Border, and Transitions tools let you customize the appearance of your SnapApp Canvas. I’m going to apply my light green as a border for definition, my light grey as a background, and set Transitions to Swipe for a bit of personality. All three tools are found in the Display Settings menu.

customize your SnapApp canvas

Step 2: Add Your Font

Do a quick run-through of your SnapApp, and apply your brand font to all of the text using the font dropdown in the formatting bar. For our case, this means the title, introduction, question, answer and lead form text. Not seeing your font in the dropdown? You can add your own using our Custom Font uploader, located in the Assets menu.

02.png

Step 3: Customize the Text 

We’ve got some great tools to help you style text and question functionality. Let’s use them to touch up our SnapApp. First, I’m going to apply my dark blue to all my question text.

customize your text colors

Second, I’m going to make all of my answer text grey, and customize the Answer Highlight. This tool allows you to customize the appearance of answer text, when someone taking your quiz hovers over each option with their mouse. I’m going to remove the default border and background highlighting, and roll with just text. Let’s make ours light green.

customize answer text and highlight

Last but not least, I’d like to hide the radio buttons in my questions. This is a per-question feature, so we’ll open the Config Menu for each question, navigate to the answers tab, and select Hide the Button under Answer Options.

hide the button

Step 4: Style Your Lead Form 

We’ve learned that as lead form complexity goes up, lead conversion goes down. For optimal performance, your lead form should be super clean and collect only the minimum information you need. Don’t just go with the default – make your lead form your own. SnapApp customization tools give you all you need to achieve this goal.

We’ll start by opening the Config Menu on our lead form, and navigating to the Style tab. Complete the Title field with a simple call-to-action. Next, check out the Label Placement dropdown. I’m a big fan of having the label appear to the left of the field, so let’s give that a shot. From there, let’s adjust the Field Spacing and Field Size to 10 and 30 pixels respectively to make the form easy to complete on both desktop and mobile devices.

style the lead form

Check out the finished product below! Have we created an artistic masterpiece the likes of the Sistine Chapel? Arguably not. Have we created a quick, easy to use engagement that both matches brand styling and is ready to drive qualified leads straight to the top of your funnel? I’d say so.

Do you have any styling tips and tricks you’d like to share with the SnapApp community? Sound off in the comments!

Submit a Comment

Get Our Latest Blog Posts in Your Inbox

Thank you for subscribing!
Content Land CTA-Blog-300.png
LeadRev-blog-free.png