How to Make an Interactive Email with Click-to-Reveal Code
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.
Table of content
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.
<!-- 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:
<!-- 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.
