Archives for March 2018

March 31, 2018 by Mackey

Do Pop-Up boxes work?

It’s a simple answer, yes Pop-up Boxes work. As annoying as we may think Pop-ups are to us as end users, they do work — and actually, they don’t need to be annoying. With good timing, thought, and creativity, Pop-up Boxes can work and can actually not annoy the end-user, in fact quite the opposite.

Pop-up Boxes help isolate a call to action, a form, or information, and often require the user to take action, usually to opt in or out depending on your campaign and goals. User’s attention spans are short, there’s any number of things distracting them while online — Pop-up Boxes help focus their attention.

Case studies have shown a 1000% increase in email subscribers by using Pop-ups, so let’s get into the nitty gritty of what they are and how to add one (or 100) to your site.

What is a Pop-up Box?

Pop-up Boxes might be referred to by a number of names — modal, slide-in box, fade-in box, notification, overlay, scroll box, smart bar, pop-up window, etc. — but for our purposes, we will refer to them as Pop-up Boxes. Our definition of a Pop-up Box is a small window that suddenly appears (“pops up”) in the foreground of the visual interface based on a trigger isolating content or a call to action.

Popups can be triggered by a number of events:

Immediately on-site load.
Delay a number of seconds.
When someone reaches a certain percentage from the top of the screen.
On particular pages, posts, articles, etc.
On a user action, ie a button or link click.
Upon exit, i.e. when they attempt to leave the site or abandon their shopping cart.

Types of Popups

Below are the most common types of popups, but really with a little imagination and creativity, there are endless ideas and options.

Welcome Mat

Or as we call it, “shove it down their throats.” This is when a new user lands on a page and is presented with an offer that is a Pop-up Box, but essentially takes over the entire window. More than often, this would be an opt-in / out call to action with an offer they can’t refuse. For example, upon page load, the Pop-up Box opens and reads “Do you like puppies? Sign up for our puppy of the day mailing list.” with a cute photo of a puppy. The buttons say “No, Puppies are the Worst” and “Yes, I love Puppies! Sign Me Up.” Essentially, the user is being given an option they can’t refuse or at least, in this case, would feel terribly bad about agreeing to anything but “Yes, I Love Puppies.”

Scroll Box

This might be the most common Pop-up Box we see these days. As you scroll down a page, hit a particular piece of content or stay on the site for “X” number of seconds, a box slides in with an offer or call to action. Again, as with any of these, there are options, options, options.

The Bar

A bar either at the top or bottom of the website that has a clear call to action. This could be something that is permanent or fades in on scroll or sticks to the bottom or top. There are a lot of options here, but the idea is that it’s not quite as intrusive as a Welcome Mat, but because it sits below or above your site, it captures the user’s attention.

List Builder (2 Step Opt-in)

This is similar to the above, but instead of asking for the goods up front, you get the user to click to receive an offer then ask for the goods (email address). It’s been shown that if you can get a user to say yes to a smaller action, they’ll be more likely to say yes to a larger action—in this case, giving their email address.

This might go a little something like this:

A Pop-up box appears after 2 seconds on the page. The popup reads, “Click here to download The Best Thing Since Sliced Bread.”
The user clicks and lands on a page that asks for their email address to download “The Best Thing Since Sliced Bread.”

Because they already clicked on the link they are already half way in and what’s entering an email if you already have one foot in the door?

Share Buttons

We all want people to share our content more, right? Well, why not put it front and center — Share Buttons at the top or bottom of the article or page may capture some conversions. We, first off, if they haven’t read the article yet, why would they share it? And secondly, if they never finish reading the article then they’ll never see the option to share it even though they loved the first 65% of the article. So, why not present the Share Buttons to the user after they’ve started the article and think it’s now worthy of sharing? Anchor the Share Buttons along the left, right, bottom or top of the article so it’s ever present in their mind to share, share, share.

Implementation

This is where the rubber hits the road. Timing, location, actions, etc. are just as critical as the content or message you create for your Pop-up. Often Pop-up Boxes are blamed for cheapening the brand or being annoying to customers, but they don’t need to be. Well timed and placed Pop-up Boxes not only convert, but they also can help the user focus in on what they are looking for.

For instance, if you are offering a download of an E-Book and it is featured in a blog post, the reader might see it in the first paragraph, but not be willing to click as they are wanting to read the rest of the article. After reading the article, as they traverse the article they may get sidetracked and forget completely about the E-Book offer. In this case, we would do two things:

Add a call-out link to the E-Book toward the end of article.
Add a Pop-up box that slides in from the bottom highlighting the E-Book with a call to action.

We’re not shoving it down their throat, but rather reminding them, “hey, don’t forget there’s this cool E-Book and it’s free and you should download it!”

There are a million different ways to implement Pop-ups and no two sites will be the same nor even two pages. How and where id particular to each site and the goals of the campaign.

Tools

So how do you implement Pop-ups? There are a number of sites that offer various capabilities of Pop-up integration depending on your needs. If you’re just looking to implement Pop-up Boxes and you’re using WordPress, there is a great plugin called Boxzilla that offers basics that will get you up and running and easily choose location, timing, design, content, etc. They also offer a premium option for $6 per month that will give you a few more options:

Exit Intent
Stats
Time on Site
Page Views
Themes
Google Analytics integration

Since Pop-up Boxes are as much about implementation as they are about content, we usually use the free edition as a starting point, customizing to our needs rather than the monthly premium option.

For more robust (and more costly) options there are a number of options. For the most part, the benefit of these is they offer a simpler user interface as well as more robust testing and A/B testing. Like we said there are a lot of options, but two that integrate well with WordPress are https://thrivethemes.com/ and https://sumome.com/.

We’re by no means telling you to use Pop-ups just to use Pop-ups. But Pop-up Boxes that have a clear value proposition and are implemented correctly, convert.

No matter how you slice it, pop-up boxes work. If you’re using WordPress there are options that will allow you to create, manage and edit these boxes all from within your WordPress backend. Reach out to us and we can help you set it up or if you have more questions, let us know and we can talk through how it could help your conversion rates on your site.

March 12, 2018 by Mackey

Leaving Comments in InvisionApp

InvisionApp is a product design collaboration platform. Through InvsionApp we can collaborate on design prototypes by adding comments and feedback directly to the design screens.

Adding/Removing A Comment

To add a comment to a prototype screen:

Use the link provided to you to open the prototype and go into a screen.
Toggle to “on” to enter into comment mode.
Click anywhere on the screen to leave a comment.
If you do not have an account, InVision will authenticate your comment by asking for your name and email address.
Continue leaving comments to any areas that you have feedback!

Delete a Comment

To delete a comment you must either be the prototype owner or the user that left the comment.

Hover to the right the commenter’s name/timestamp- this will reveal a trash can and pen icon.
Click the trash can to delete that comment.

Adding Someone to Your Comment

You can notify someone on a prototype or board by using our @ mention feature in a comment. Simply enter @ along with their name (or @project or @conversation) in your comment/reply.

If you’re commenting on a screen on a prototype or board you don’t own, by default the screen owner is always @mentioned. Their @mention name will not appear in the reply box, but they will be listed in the “x person will be notified” area.

Replying to an Existing Comment

When you reply to an existing comment, Inbox automatically inserts an @mention for the last person who commented, as well as any other users that have been @mentioned.

March 2, 2018 by Mackey

WordPress Shortcode with Parameters that Pass to Template

In our particular instance, we created a custom post type for Community Testimonials with a Taxonomy for Types. The Taxonomy has various terms.

We then wanted to create a shortcode that the content manager could use to display Community Testimonials based on various Types. In the end we wanted to create a shortcode that looked like [customer-testimonial type=”{THE TAXONOMY TERM}”]. This, in turn, would display all Customer Testimonials within a particular Type Term.

The output would look something like this on the frontend:

We did not want to include all the markup and query code within the functions.php in order to keep everything cleaner. Instead, we decided to create a new PHP file within the theme directory, customer-testimonials.php, to house all our markup and output. The caveat, we still wanted to pass the type parameter value to the PHP file. In the end this was pretty easy, but took us a minute to figure out, so thought we’d share.

The Code

Within functions.php or wherever you are housing the function for the shortcode, create the shortcode with the parameter:

/* Community Testimonials Shortcode */
function ctest_shortcode($atts) {
    extract(shortcode_atts(array(
        'YOUR PARAMETER' => 'YOUR PARAMETER'
    ), $atts));
  
  /* Call to template */
    ob_start();
    include(locate_template('YOUR-TEMPLATE.php'));
    return ob_get_clean();
}
add_shortcode('test', 'ctest_shortcode');

Next, within your theme directory, create a new file, in our case YOUR-TEMPLATE.php. Within this file you can add any markup you want and it will be outputted when you include your shortcode. In our instance, we are creating a query of the custom post type with the taxonomy for Types and the variable is the term.

Our query:

    <?php
      $args = array(
        'post_type' => 'community_test',
        'posts_per_page' => '100',
          'tax_query' => array(
              array(
                  'taxonomy' => 'testimonial_type',
                  'field' => 'slug',
                  'terms' => $YOUR_PARAMETER,
              )
          )
      );
       
      // Custom query.
      $query = new WP_Query( $args );
       
      // Check that we have query results.
      if ( $query->have_posts() ) {
       
          // Start looping over the query results.
          while ( $query->have_posts() ) {
       
              $query->the_post(); 
    ?>

Because in functions we use:

include(locate_template('YOUR-TEMPLATE.php'));

We can pass the parameter variable to our new file in our theme (YOUR-TEMPLATE.php) and then utilize it. In our case the variable is $YOUR_PARAMETER, replace this whatever the variable is you are using.

Then include the shortcode in your page, post, or wherever with the parameter and badabingbadaboom, you should be cooking.

Any questions, leave them in the comments.