Click to Reveal

How to Make an Interactive Email with Click-to-Reveal Code


By Jay Oram

We’ve previously discussed how to incorporate AR into email and wanted to touch on other ways you can add interactive email elements to enhance your campaign without adding too much weight.

With this simple click-to-reveal method we’ll go over, you can easily implement a bit of suspense and user activity into any campaign.

Using CSS to Target an HTML Element

Tags are to HTML what selectors are to CSS. Selectors allow you to choose what content to style.

In this case, we utilise the CSS :checked selector to show an image (what the user is supposed to click) instead of our message (the piece that will be revealed). That way we can ensure that the offer, deal or surprise will still be visible in any email clients who don’t support :checked.

It’s important to remember that any message containing vital information, such as the main offer, is visible, this method will display it in the fallback and when you click to reveal.

The method we’ll cover allows for interactive email elements in the following clients:

  • iOS
  • WebKit email clients (Chrome, Safari)
  • Apple Mail
  • Outlook (Mac)

The Code You Will Need

This is a module that can be added into any email. Simply include the below styles into the <head> of your HTML document:

@media screen and (-webkit-min-device-pixel-ratio:0) {
.tap {display: block!important; mso-hide:all!important;}
  .reveal {display: none}
#tapreveal:checked ~ * .reveal {display: block!important;}
#tapreveal:checked ~ * .tap {display: none!important;}}

The top line, @media screen and (-webkit-min-device-pixel-ratio:0), detects whether the email client supports WebKit and therefore the :checked selector.

We then set up the radio button for the image we want users to click to reveal. A radio or checkbox is a type of HTML input used to create interactive email effects with CSS. This radio is placed just inside thetag:

<!--[if mso]><!-->
    <input type="radio" name="tapreveal" id="tapreveal" style="mso-hide:all; display:none!important; height:0px; max-height:0px; overflow:hidden; font-size:0; margin-left:-10000px;">
    <!--<![endif]-->

Wrapping the input in mso conditional statements and including mso-hide: all; display: none!important; max-height:0px; overflow:hidden; font-size:0; margin-left:-10000px; ensures the input is not visible on any email client. Once we add the name and id, tapreveal, we can control what will happen when a user clicks or taps on the input.

Since Microsoft Outlook (mso, above) renders code MS Word-style, it can create quirky results when displaying HTML emails. By wrapping the input in mso conditional statements, we tell Microsoft Outlook how to render the interactive email properly.

Let’s take a closer look at the CSS above

#tapreveal:checked

When the input with the id #tapreveal is clicked, the radio or checkbox attached becomes checked. Immediately after this, we state which element will change for the user when #tapreveal is clicked.

Selectors ~ * .reveal

These select all elements (*) that are preceded (~) by the input with the id #tapreveal and have class=”reveal”. The display styles specified within the { } are then applied.

Image Setup

Now that we have the commands in place dictating what happens when a certain block of content is clicked, it’s time to set up the images that will display/hide when :checked is supported.

By placing the images within the same table data, <td>, we can tell the email client when to show or hide them.

Tip: emails such as this are extra important to run through Image Validation in Campaign Precheck. By ensuring each image renders properly across email clients and devices, you don’t spoil the surprise of the hidden offer before any of your subscribers have a chance to interact with your email.

Tap to Reveal

 

<!-- Main offer/fallback -->
            <table class="reveal" width="500" border="0" cellspacing="0" cellpadding="0" style="width:500px;">
                  <tr>
                <td align="center"><a href="https://example.com/discount"><img src="https://arcdn.net/ActionRocket/Blog-article/click-to-reveal/images/50-envelope.png" width="500" height="auto" style="display:block;width:500px; height: auto;" alt="Surprise!" border="0" class="w100pc"></a></td>
              </tr>
                </table>

For the sake of this example, let’s say a user will reveal a promotion when they click on the image. First we incorporate the promotion that you want all email recipients to see with class=”reveal” followed by the image that will display on all interactive clients:

Hidden offer

 

<!-- Interactive/tap/Reveal section --> 
				  
            <!--[if mso|IE]><!-->
            <table class="tap" width="100%" border="0" cellspacing="0" cellpadding="0" style="mso-hide:all; display:none">
               <tr style="mso-hide:all">
                <td align="center" style="mso-hide:all">
					<!-- input -->
                      <label id="tapreveal" for="tapreveal"> <img class="w100pc" style="display:block; mso-hide:all; height: auto;" border="0" src="https://arcdn.net/ActionRocket/Blog-article/click-to-reveal/images/envelope.gif" width="500" style="width:500px" alt=""> </label></td>
              </tr>
                </table>
            <!--<![endif]-->

The second section holds the image that will be shown to WebKit clients to be clicked to reveal the promotion.

We wrap the second table containing the interactive image to be clicked in an mso conditional statement <!--[if mso|IE]><!-->  [table] <!--<![endif]--> that will hide it from all Microsoft Outlook clients. The containing table has class=”tap” followed by the width and the standard HTML table tags, border="0" cellspacing="0" cellpadding="0". The style on the table has everything needed to hide it from all email clients: mso-hide:all; and display:none;.

The CSS above, .tap {display: block!important; mso-hide:all!important;}, within the media query will change the inline styles to show the table due to the !important declaration.

The image is then wrapped in a label relating to the input above: <label id="tapreveal" for="tapreveal"> <img> </label> with the id= and for= tags.

Find a full working example here

Click-to-Reveal in Action

With this technique, you can include a click-to-reveal with any image as the ‘click’. The table containing the ‘reveal’ can be comprised of any email HTML, images, text in tables or buttons and can reveal any length of message. There is plenty of room to get creative with this kind of functionality.

Check out the following examples:

To include additional click-to-reveal modules in an interactive email, simply add a number after the classes and multiple inputs just after the body tag. Then you can place your reveals anywhere in the email.

 

About the author

Jay OramJay Oram is part of the design and code solutions team at the email specialist agency, ActionRocket. In his role at ActionRocket, Jay is usually experimenting with new code for emails or finding that elusive rendering fix. See more articles from Jay at emaildesignreview.com or find him on Twitter at @emailjay_.

Test Your Email First!

Make sure your email looks flawless before you send it out to your subscribers. Remember: A broken email is an unengaged email. With Email on Acid, you can preview your email in more than 70 email clients and devices before you hit “send.” Sign up for our free trial and start testing today.

Sign Up Today

Author: Email on Acid

The Email on Acid blog is on a mission to share email best practices, industry news, and solutions to most annoying email client bugs. Plus, we like to have a little fun along the way. Learn how to join the party and contribute to our blog.

Free Email Goodies