How-to
yesterday
An easy-to-follow guide on making an interactive Traffic Escape game (code samples included)
Authors
Anton Diduh
Content writer and video content creator at Stripo
Rolenko Liubov
HTML developer at Stripo
Summarize
Table of contents
1.
How this game works
We all hate traffic jams or having to navigate a crowded shopping mall parking lot. Wouldn't it be great if there was a way to solve these inconveniences simply, with the click of a button?
We might not be able to provide you with a solution to these life challenges, but we will certainly provide you with a new way to engage with our new interactive mechanic, Traffic Escape.
How this game works
The game is quite simple. You're presented with a puzzle featuring numerous cars, and you need to clear a crowded parking lot. Each car faces a specific direction, and clicking on it will cause it to move in the direction it's facing. Clicking on a car causes it to move, clearing the way for the next car, and so on until the entire parking lot is clear. At the end of the game, a prize awaits: a promo code or any other useful gift you can think of for your recipients.
This is a fairly simple game mechanic that doesn't take up much of your recipients' time and can help you:
- creating themed newsletters featuring this game, swapping out the cars for any other themed items that fit your niche;
- teasing various new products or events, for example, by adding a link at the end hinting at future innovations;
- distributing promo codes or other small gifts to your audience in an interactive and fun way.
This guide will explain to you how you can create your own Traffic Escape game from scratch that is compatible with major email clients, so all your subscribers will be able to play it.
Our guide will include the following:
- AMP version of the game;
- kinetic version, built with HTML5 and CSS3;
- fallback version for email clients that do not support interactivity.
The kinetic (HTML5 and CSS3) version is the main version and will be shown when the email client supports both technologies. The AMP version will be shown if email clients support AMP and will replace your kinetic version in these cases. Meanwhile, the fallback version will be shown in cases when email clients don’t support both HTML5/СSS3 and AMP.
Let’s dive right into the game creation.
AMP version
First of all, let’s start with the AMP version. You’ll need to create a one-column structure and enable “include it in AMP HTML” only so it is visible only in AMP HTML.
Once it’s done, add an HTML block and paste the following code into this block.
<style>
.traffic-escape-amp {position:relative;} .traffic-escape-amp .img-error {display:block;margin:0 auto;width:64px;height:64px;background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png) no-repeat 0 0;background-size: 64px 64px;} .traffic-escape-amp .unit { display: block; width: 60px; height: 60px; background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/cartop.png); background-size: contain; background-repeat: no-repeat; background-position:center; cursor: pointer; } .traffic-escape-amp .left { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/carleft_EZp.png); } .traffic-escape-amp .line { display: flex; justify-content: center; align-items: center; } .traffic-escape-amp table { margin: 0; } .traffic-escape-amp table td { padding: 2px; } .traffic-escape-amp .result {position:absolute;top:0;left:0;width:100%;height:100%;display: none;} .traffic-escape-amp .result div {border-radius: 15px;background-color: #efefef;border:2px solid #ccc;padding:30px 30px 40px;margin: 0 30px; top: 50%; position: relative;transform: translateY(-50%);text-align: center;} .traffic-escape-amp .result-final {display:none;} .traffic-escape-amp .btn {display:inline-block;color: #ffffff;font-size: 14px;background: #2b64cd;border:1px solid #2b64cd;padding: 10px 20px 10px 20px;border-radius:6px;font-family: "Open Sans", sans-serif; font-weight: bold;line-height: 120%;outline:none;cursor:pointer;} #unit-1-4:checked~div .error-1, #unit-2-2:checked~div .error-2, #unit-2-3:checked~div .error-3, #unit-2-4:checked~div .error-4, #unit-3-2:checked~div .error-5, #unit-3-4:checked~div .error-6, #unit-3-1:checked~div .error-9, #unit-4-1:checked~div .error-10, #unit-4-2:checked~div .error-11, #unit-4-3:checked~div .error-7, #unit-4-4:checked~div .error-8 {display:block;} #hide-1:checked~div .error-1, #hide-2:checked~div .error-2, #hide-3:checked~div .error-3, #hide-4:checked~div .error-4, #hide-5:checked~div .error-5, #hide-6:checked~div .error-6, #hide-7:checked~div .error-7, #hide-8:checked~div .error-8, #hide-9:checked~div .error-9, #hide-10:checked~div .error-10, #hide-11:checked~div .error-11 {display:none;} #unit-1-3:checked~#unit-1-4:checked~div .error-1, #unit-1-1:checked~#unit-1-2:checked~#unit-2-1:checked~#unit-2-2:checked~div .error-2, #unit-2-1:checked~#unit-2-3:checked~div .error-3, #unit-1-3:checked~#unit-1-4:checked~#unit-2-1:checked~#unit-2-3:checked~#unit-2-4:checked~div .error-4, #unit-3-1:checked~#unit-3-2:checked~div .error-5, #unit-1-2:checked~#unit-1-4:checked~#unit-3-1:checked~#unit-3-2:checked~#unit-3-4:checked~div .error-6, #unit-2-1:checked~#unit-2-3:checked~#unit-4-1:checked~#unit-4-3:checked~div .error-7, #unit-3-3:checked~#unit-3-4:checked~#unit-4-1:checked~#unit-4-3:checked~#unit-4-4:checked~div .error-8, #unit-1-1:checked~#unit-1-3:checked~#unit-3-1:checked~div .error-9, #unit-3-1:checked~#unit-3-2:checked~#unit-4-1:checked~div .error-10, #unit-2-2:checked~#unit-2-3:checked~#unit-2-4:checked~#unit-4-2:checked~div .error-11 {display:none;} /* top */ #unit-1-1:checked~div .label-unit-1-1, #unit-1-2:checked~div .label-unit-1-2, #unit-2-1:checked~div .label-unit-2-1, #unit-2-1:checked~#unit-2-3:checked~div .label-unit-2-3, #unit-1-1:checked~#unit-1-3:checked~#unit-3-1:checked~div .label-unit-3-1, #unit-1-2:checked~#unit-1-4:checked~#unit-3-1:checked~#unit-3-2:checked~#unit-3-4:checked~div .label-unit-3-4, #unit-2-2:checked~#unit-2-3:checked~#unit-2-4:checked~#unit-4-2:checked~div .label-unit-4-2, #unit-2-1:checked~#unit-2-3:checked~#unit-4-1:checked~#unit-4-3:checked~div .label-unit-4-3 { opacity: 0; transform: translate(0, -480px); transition-duration: 0.5s; } /* left */ #unit-1-3:checked~div .label-unit-1-3, #unit-1-3:checked~#unit-1-4:checked~div .label-unit-1-4, #unit-1-1:checked~#unit-1-2:checked~#unit-2-1:checked~#unit-2-2:checked~div .label-unit-2-2, #unit-1-3:checked~#unit-1-4:checked~#unit-2-1:checked~#unit-2-3:checked~#unit-2-4:checked~div .label-unit-2-4, #unit-3-1:checked~#unit-3-2:checked~div .label-unit-3-2, #unit-3-3:checked~div .label-unit-3-3, #unit-3-1:checked~#unit-3-2:checked~#unit-4-1:checked~div .label-unit-4-1, #unit-3-3:checked~#unit-3-4:checked~#unit-4-1:checked~#unit-4-3:checked~#unit-4-4:checked~div .label-unit-4-4 { opacity: 0; transform: translate(-480px, 0); transition-duration: 0.5s; } #unit-1-1:checked~#unit-1-4:checked~#unit-2-1:checked~#unit-2-4:checked~#unit-3-1:checked~#unit-3-2:checked~#unit-3-3:checked~#unit-3-4:checked~#unit-4-1:checked~#unit-4-2:checked~#unit-4-3:checked~#unit-4-4:checked~div .result-final { display: block; } #unit-1-1:checked~#unit-1-4:checked~#unit-2-1:checked~#unit-2-4:checked~#unit-3-1:checked~#unit-3-2:checked~#unit-3-3:checked~#unit-3-4:checked~#unit-4-1:checked~#unit-4-2:checked~#unit-4-3:checked~#unit-4-4:checked~div .game-container { display: none; }
</style>
<input id="unit-1-1" type="radio" style="display:none">
<input type="radio" id="unit-1-2" style="display:none">
<input id="unit-1-3" type="radio" style="display:none">
<input id="unit-1-4" name="error-1" type="radio" style="display:none">
<input id="unit-2-1" type="radio" style="display:none">
<input type="radio" id="unit-2-2" name="error-2" style="display:none">
<input id="unit-2-3" name="error-3" type="radio" style="display:none">
<input id="unit-2-4" name="error-4" type="radio" style="display:none">
<input type="radio" id="unit-3-1" name="error-9" style="display:none">
<input id="unit-3-2" name="error-5" type="radio" style="display:none">
<input type="radio" id="unit-3-3" style="display:none">
<input id="unit-3-4" name="error-6" type="radio" style="display:none">
<input id="unit-4-1" name="error-10" type="radio" style="display:none">
<input id="unit-4-2" name="error-11" type="radio" style="display:none">
<input id="unit-4-3" name="error-7" type="radio" style="display:none">
<input type="radio" id="unit-4-4" name="error-8" style="display:none">
<input id="hide-1" name="error-1" type="radio" style="display:none">
<input type="radio" id="hide-2" name="error-2" style="display:none">
<input id="hide-3" name="error-3" type="radio" style="display:none">
<input name="error-4" type="radio" id="hide-4" style="display:none">
<input id="hide-5" name="error-5" type="radio" style="display:none">
<input id="hide-6" name="error-6" type="radio" style="display:none">
<input id="hide-7" name="error-7" type="radio" style="display:none">
<input id="hide-8" name="error-8" type="radio" style="display:none">
<input id="hide-9" name="error-9" type="radio" style="display:none">
<input id="hide-10" name="error-10" type="radio" style="display:none">
<input type="radio" id="hide-11" name="error-11" style="display:none">
<div class="traffic-escape-amp">
<div class="game-container">
<div class="line">
<table width="120" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">
<label for="unit-1-1" class="unit top label-unit-1-1"></label>
</td>
<td align="center">
<label for="unit-1-2" class="unit top label-unit-1-2"></label>
</td>
</tr>
<tr>
<td align="center">
<label for="unit-1-3" class="unit left label-unit-1-3"></label>
</td>
<td align="center">
<label for="unit-1-4" class="unit left label-unit-1-4"></label>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" width="120" cellpadding="0">
<tbody>
<tr>
<td align="center">
<label for="unit-2-1" class="unit top label-unit-2-1"></label>
</td>
<td align="center">
<label for="unit-2-2" class="unit left label-unit-2-2"></label>
</td>
</tr>
<tr>
<td align="center">
<label for="unit-2-3" class="unit top label-unit-2-3"></label>
</td>
<td align="center">
<label for="unit-2-4" class="unit left label-unit-2-4"></label>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line">
<table align="center" cellpadding="0" cellspacing="0" width="120">
<tbody>
<tr>
<td align="center">
<label for="unit-3-1" class="unit top label-unit-3-1"></label>
</td>
<td align="center">
<label for="unit-3-2" class="unit left label-unit-3-2"></label>
</td>
</tr>
<tr>
<td align="center">
<label for="unit-3-3" class="unit left label-unit-3-3"></label>
</td>
<td align="center">
<label for="unit-3-4" class="unit top label-unit-3-4"></label>
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" width="120">
<tbody>
<tr>
<td align="center">
<label for="unit-4-1" class="unit left label-unit-4-1"></label>
</td>
<td align="center">
<label for="unit-4-2" class="unit top label-unit-4-2"></label>
</td>
</tr>
<tr>
<td align="center">
<label for="unit-4-3" class="unit top label-unit-4-3"></label>
</td>
<td align="center">
<label for="unit-4-4" class="unit left label-unit-4-4"></label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div esd-text="true" class="result-final esd-text">
<h3 style="padding-bottom:15px">
Congratulations!
</h3>
<p style="padding-bottom:5px">
You've scored some amazing discounts! <b>15% OFF</b> your next purchase.
</p>
<p>
Use the promo code <b>PRIZE3</b> on our website.
</p>
</div>
<div class="result error-1">
<div esd-text="true" class="esd-text">
<span class="img-error"></span>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-1" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-2">
<div esd-text="true" class="esd-text">
<span class="img-error"></span>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-2" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-3">
<div esd-text="true" class="esd-text">
<span class="img-error"></span>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-3" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-4">
<div esd-text="true" class="esd-text">
<span class="img-error"></span>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-4" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-5">
<div esd-text="true" class="esd-text">
<span class="img-error"></span>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-5" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-6">
<div esd-text="true" class="esd-text">
<span class="img-error"></span>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-6" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-7">
<div esd-text="true" class="esd-text">
<span class="img-error"></span>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-7" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-8">
<div esd-text="true" class="esd-text">
<span class="img-error"></span>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-8" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-9">
<div esd-text="true" class="esd-text">
<span class="img-error"></span>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-9" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-10">
<div esd-text="true" class="esd-text">
<span class="img-error"></span>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-10" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-11">
<div esd-text="true" class="esd-text">
<span class="img-error"></span>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-11" class="btn">
Continue
</label>
</p>
</div>
</div>
</div>
Let's start with an interesting detail right away. This game has the same versions for both the AMP and kinetic HTML. In both versions, all interactivity is achieved using input and label tags.
Each car image is a label tag linked to a corresponding input with an ID: unit-1-1, unit-1-2, and so on.
Clicking on blocked cars displays a message. In these messages, the "Continue" buttons are also label tags linked to inputs hide-1, hide-2, and so on (they are set in the styles).
When we click on a blocked element, the input associated with it is set to checked, and when we click the button in the message that appears, the checked state is removed. To achieve this, we added the same name to the input tags in the first group for blocked cars as the error inputs for the corresponding element. For cars that are not blocked, nothing needs to be added.
Meanwhile, type=”radio” tag is needed so that you can click on the car only once and the next click will not affect anything.
The styles for the car elements are defined in the "unit" and "left" classes. You can also change the car images to any other ones.
Our error message also has a picture.
To change it, replace this link with your own.
Displaying and hiding messages about the car being locked looks like this:
And like this:
In this code snippet, unit-1-4, unit-2-2, etc. are the IDs of the inputs to which specific cars are bound, and hide-1, hide-2, etc. are the inputs to which the buttons in the blocked car messages are bound.
Meanwhile, the next style hides messages for blocked cars when the car is already unlocked. This ensures that a movement animation appears when clicked, rather than a popup with a message.
The code then lists all the IDs of the machines that are blocking a specific machine. If they are in the checked state, and the machine itself is also checked, then its error message will be hidden:
This code defines the animation of the cars' movement:
All the vehicle IDs blocking a specific vehicle are listed here. Only when all of them are removed can you remove the blocked vehicle.
Last but not least, these are the styles that show the end-of-game message and hide the game block:
To change your final message, replace these texts with your own.
Besides that, to make an error message different, replace this text in every result error piece with your own copy.
Important note about the game
Keep in mind that the game doesn't allow for customization of the puzzle itself: specifically, the arrangement of the cars, their orientation toward each other, or the order in which the cars must be freed. This requires recoding the entire game from scratch. You can change the images, the error messages, and the final screen text, but the solution to the puzzle itself remains the same. Changing the puzzle code can break the game.
Kinetic version built with HTML5 and CSS3
Now we need to create a kinetic version of our game, and today, this part will be pretty short. As always, you need to prepare another structure below our AMP version and set it to “Include in HTML only”.
After that, add an HTML block to this structure and paste this code:
<style>
.traffic-escape-html {position:relative;} .traffic-escape-html .unit { display: block; width: 60px; height: 60px; background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/cartop.png); background-size: contain; background-repeat: no-repeat; background-position:center; cursor: pointer; } .traffic-escape-html .left { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/carleft_EZp.png); } .traffic-escape-html .line { display: flex; justify-content: center; align-items: center; } .traffic-escape-html table { margin: 0; } .traffic-escape-html table td { padding: 2px; } .traffic-escape-html .result {position:absolute;top:0;left:0;width:100%;height:100%;display: none;} .traffic-escape-html .result div {border-radius: 15px;background-color: #efefef;border:2px solid #ccc;padding:30px 30px 40px;margin: 0 30px; top: 50%; position: relative;transform: translateY(-50%);text-align: center;} .traffic-escape-html .result-final {display:none;} .traffic-escape-html .btn {display:inline-block;color: #ffffff;font-size: 14px;background: #2b64cd;border:1px solid #2b64cd;padding: 10px 20px 10px 20px;border-radius:6px;font-family: "Open Sans", sans-serif; font-weight: bold;line-height: 120%;outline:none;cursor:pointer;} #unit-1-4:checked~div .error-1, #unit-2-2:checked~div .error-2, #unit-2-3:checked~div .error-3, #unit-2-4:checked~div .error-4, #unit-3-2:checked~div .error-5, #unit-3-4:checked~div .error-6, #unit-3-1:checked~div .error-9, #unit-4-1:checked~div .error-10, #unit-4-2:checked~div .error-11, #unit-4-3:checked~div .error-7, #unit-4-4:checked~div .error-8 {display:block;} #hide-1:checked~div .error-1, #hide-2:checked~div .error-2, #hide-3:checked~div .error-3, #hide-4:checked~div .error-4, #hide-5:checked~div .error-5, #hide-6:checked~div .error-6, #hide-7:checked~div .error-7, #hide-8:checked~div .error-8, #hide-9:checked~div .error-9, #hide-10:checked~div .error-10, #hide-11:checked~div .error-11 {display:none;} #unit-1-3:checked~#unit-1-4:checked~div .error-1, #unit-1-1:checked~#unit-1-2:checked~#unit-2-1:checked~#unit-2-2:checked~div .error-2, #unit-2-1:checked~#unit-2-3:checked~div .error-3, #unit-1-3:checked~#unit-1-4:checked~#unit-2-1:checked~#unit-2-3:checked~#unit-2-4:checked~div .error-4, #unit-3-1:checked~#unit-3-2:checked~div .error-5, #unit-1-2:checked~#unit-1-4:checked~#unit-3-1:checked~#unit-3-2:checked~#unit-3-4:checked~div .error-6, #unit-2-1:checked~#unit-2-3:checked~#unit-4-1:checked~#unit-4-3:checked~div .error-7, #unit-3-3:checked~#unit-3-4:checked~#unit-4-1:checked~#unit-4-3:checked~#unit-4-4:checked~div .error-8, #unit-1-1:checked~#unit-1-3:checked~#unit-3-1:checked~div .error-9, #unit-3-1:checked~#unit-3-2:checked~#unit-4-1:checked~div .error-10, #unit-2-2:checked~#unit-2-3:checked~#unit-2-4:checked~#unit-4-2:checked~div .error-11 {display:none!important;} /* top */ #unit-1-1:checked~div .label-unit-1-1, #unit-1-2:checked~div .label-unit-1-2, #unit-2-1:checked~div .label-unit-2-1, #unit-2-1:checked~#unit-2-3:checked~div .label-unit-2-3, #unit-1-1:checked~#unit-1-3:checked~#unit-3-1:checked~div .label-unit-3-1, #unit-1-2:checked~#unit-1-4:checked~#unit-3-1:checked~#unit-3-2:checked~#unit-3-4:checked~div .label-unit-3-4, #unit-2-2:checked~#unit-2-3:checked~#unit-2-4:checked~#unit-4-2:checked~div .label-unit-4-2, #unit-2-1:checked~#unit-2-3:checked~#unit-4-1:checked~#unit-4-3:checked~div .label-unit-4-3 { opacity: 0; transform: translate(0, -480px); transition-duration: 0.5s; } /* left */ #unit-1-3:checked~div .label-unit-1-3, #unit-1-3:checked~#unit-1-4:checked~div .label-unit-1-4, #unit-1-1:checked~#unit-1-2:checked~#unit-2-1:checked~#unit-2-2:checked~div .label-unit-2-2, #unit-1-3:checked~#unit-1-4:checked~#unit-2-1:checked~#unit-2-3:checked~#unit-2-4:checked~div .label-unit-2-4, #unit-3-1:checked~#unit-3-2:checked~div .label-unit-3-2, #unit-3-3:checked~div .label-unit-3-3, #unit-3-1:checked~#unit-3-2:checked~#unit-4-1:checked~div .label-unit-4-1, #unit-3-3:checked~#unit-3-4:checked~#unit-4-1:checked~#unit-4-3:checked~#unit-4-4:checked~div .label-unit-4-4 { opacity: 0; transform: translate(-480px, 0); transition-duration: 0.5s; } #unit-1-1:checked~#unit-1-4:checked~#unit-2-1:checked~#unit-2-4:checked~#unit-3-1:checked~#unit-3-2:checked~#unit-3-3:checked~#unit-3-4:checked~#unit-4-1:checked~#unit-4-2:checked~#unit-4-3:checked~#unit-4-4:checked~div .result-final { display: block; } #unit-1-1:checked~#unit-1-4:checked~#unit-2-1:checked~#unit-2-4:checked~#unit-3-1:checked~#unit-3-2:checked~#unit-3-3:checked~#unit-3-4:checked~#unit-4-1:checked~#unit-4-2:checked~#unit-4-3:checked~#unit-4-4:checked~div .game-container { display: none; }
</style>
<input id="unit-1-1" type="radio" style="display:none">
<input id="unit-1-2" type="radio" style="display:none">
<input id="unit-1-3" type="radio" style="display:none">
<input id="unit-1-4" name="error-1" type="radio" style="display:none">
<input id="unit-2-1" type="radio" style="display:none">
<input id="unit-2-2" name="error-2" type="radio" style="display:none">
<input name="error-3" type="radio" id="unit-2-3" style="display:none">
<input id="unit-2-4" name="error-4" type="radio" style="display:none">
<input id="unit-3-1" name="error-9" type="radio" style="display:none">
<input type="radio" id="unit-3-2" name="error-5" style="display:none">
<input type="radio" id="unit-3-3" style="display:none">
<input type="radio" id="unit-3-4" name="error-6" style="display:none">
<input id="unit-4-1" name="error-10" type="radio" style="display:none">
<input id="unit-4-2" name="error-11" type="radio" style="display:none">
<input id="unit-4-3" name="error-7" type="radio" style="display:none">
<input id="unit-4-4" name="error-8" type="radio" style="display:none">
<input id="hide-1" name="error-1" type="radio" style="display:none">
<input type="radio" id="hide-2" name="error-2" style="display:none">
<input name="error-3" type="radio" id="hide-3" style="display:none">
<input id="hide-4" name="error-4" type="radio" style="display:none">
<input name="error-5" type="radio" id="hide-5" style="display:none">
<input id="hide-6" name="error-6" type="radio" style="display:none">
<input name="error-7" type="radio" id="hide-7" style="display:none">
<input id="hide-8" name="error-8" type="radio" style="display:none">
<input id="hide-9" name="error-9" type="radio" style="display:none">
<input name="error-10" type="radio" id="hide-10" style="display:none">
<input id="hide-11" name="error-11" type="radio" style="display:none">
<div class="traffic-escape-html">
<div class="game-container">
<div class="line">
<table align="center" cellpadding="0" cellspacing="0" width="120">
<tbody>
<tr>
<td align="center">
<label for="unit-1-1" class="unit top label-unit-1-1"></label>
</td>
<td align="center">
<label for="unit-1-2" class="unit top label-unit-1-2"></label>
</td>
</tr>
<tr>
<td align="center">
<label for="unit-1-3" class="unit left label-unit-1-3"></label>
</td>
<td align="center">
<label for="unit-1-4" class="unit left label-unit-1-4"></label>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" width="120" cellpadding="0">
<tbody>
<tr>
<td align="center">
<label for="unit-2-1" class="unit top label-unit-2-1"></label>
</td>
<td align="center">
<label for="unit-2-2" class="unit left label-unit-2-2"></label>
</td>
</tr>
<tr>
<td align="center">
<label for="unit-2-3" class="unit top label-unit-2-3"></label>
</td>
<td align="center">
<label for="unit-2-4" class="unit left label-unit-2-4"></label>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line">
<table align="center" cellpadding="0" cellspacing="0" width="120">
<tbody>
<tr>
<td align="center">
<label for="unit-3-1" class="unit top label-unit-3-1"></label>
</td>
<td align="center">
<label for="unit-3-2" class="unit left label-unit-3-2"></label>
</td>
</tr>
<tr>
<td align="center">
<label for="unit-3-3" class="unit left label-unit-3-3"></label>
</td>
<td align="center">
<label for="unit-3-4" class="unit top label-unit-3-4"></label>
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" width="120">
<tbody>
<tr>
<td align="center">
<label for="unit-4-1" class="unit left label-unit-4-1"></label>
</td>
<td align="center">
<label for="unit-4-2" class="unit top label-unit-4-2"></label>
</td>
</tr>
<tr>
<td align="center">
<label for="unit-4-3" class="unit top label-unit-4-3"></label>
</td>
<td align="center">
<label for="unit-4-4" class="unit left label-unit-4-4"></label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div esd-text="true" class="result-final esd-text">
<h3 style="padding-bottom:15px">
Congratulations!
</h3>
<p style="padding-bottom:5px">
You've scored some amazing discounts! <b>15% OFF</b> your next purchase.
</p>
<p>
Use the promo code <b>PRIZE3</b> on our website.
</p>
</div>
<div class="result error-1">
<div>
<p esd-text="true" class="esd-text">
<img height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" alt="" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-1" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-2">
<div>
<p esd-text="true" class="esd-text">
<img alt="" height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-2" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-3">
<div>
<p esd-text="true" class="esd-text">
<img alt="" height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-3" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-4">
<div>
<p esd-text="true" class="esd-text">
<img src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" alt="" height="64" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-4" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-5">
<div>
<p esd-text="true" class="esd-text">
<img width="64" alt="" height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-5" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-6">
<div>
<p esd-text="true" class="esd-text">
<img alt="" height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-6" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-7">
<div>
<p esd-text="true" class="esd-text">
<img height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" alt="" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-7" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-8">
<div>
<p esd-text="true" class="esd-text">
<img height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" alt="" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-8" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-9">
<div>
<p esd-text="true" class="esd-text">
<img src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" alt="" height="64" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-9" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-10">
<div>
<p esd-text="true" class="esd-text">
<img height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" alt="" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-10" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-11">
<div>
<p esd-text="true" class="esd-text">
<img width="64" alt="" height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-11" class="btn">
Continue
</label>
</p>
</div>
</div>
</div>
As we mentioned earlier, in this version the code is the same as in the AMP version, only adapted for HTML and not AMP.
Fallback version
The final stop on our journey is a fallback version of this game. Fallback is required for email clients that don't support HTML5 and CSS3, or AMP. It will have a layout similar to our mechanics, but without interactivity. Clicking on elements will lead to the web version of the email.
We continue to work on the interactive HTML block that we made above. Insert the following code between the </style> and <input> tags.
<!--[if !mso]><!-- -->
<input checked id="fallback_ctrl" type="checkbox" class="fallback_ctrl" style="mso-hide: all; display: none !important">
<!--<![endif]-->
<!-- FALLBACK -->
<span id="fallback" class="fallback">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center">
<a href="https://viewstripo.email/29b30f71-6591-4b3d-9173-90ea665293a61759301992339?type=amphtml" target="_blank"><img alt="" height="260" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/fallback.jpg" width="260" style="display: inline-block"></a>
</td>
</tr>
</tbody>
</table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="display: none; mso-hide: all">
And at the very end of the code, insert this important piece to make it look like this:
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
To change images in the fallback version, replace these links with your own images.
After that, add the styles that ensure only the version appropriate for the email client is displayed. Add this code to the end of the style tag:
/* --- */ @media screen and (-webkit-min-device-pixel-ratio: 0) { input.fallback_ctrl:checked~.container { display: block !important; } input.fallback_ctrl:checked~#fallback { display: none !important; } } [owa] .container { display: none !important; } [class~="x_container"] { display: none !important; } [id~="x_fallback"] { display: block !important; } @media screen and (max-width: 600px) { body[data-outlook-cycle] #fallback { display: block !important; } body[data-outlook-cycle] .container { display: none !important; } }
Let's take a closer look at this piece of code:
<!--[if !mso]><!--><input type="checkbox" id="fallback_ctrl" class="fallback_ctrl" style="display:none !important;mso-hide:all;" checked>
<!--<![endif]-->
This input is used to show or hide the fallback via styles. It's in comments <!--[if !mso]><!--> … <!--<![endif]--> to ensure it's hidden in the Outlook Desktop client.
The <span id=“fallback” class=“fallback”></span> section contains all of our fallback layout. It should have a simple, tabular layout suitable for Outlook. In our example, this is a table with links to the web version. You can create your own layout, but just make sure it’s understandable for Outlook.
The styles below are used to hide and show the fallback version. If you remove or comment them out, the fallback version will be visible, and you can customize its design. But don't forget to re-enable these styles before sending the email.
While these styles don’t have clear rules for each email client, there is a set of hacks that can be used to control the display:
- styles that start with [owa] are used for Outlook;
- the [class~="x_container"] styles are needed for Outlook in case [owa] does not work;
- body[data-outlook-cycle] styles are needed for Outlook on iOS and Android mobile devices;
- mso-hide:all; is used for Outlook.com.
The full code
Here is the full code of the game, including the kinetic HTML part and the fallback version:
<style>
.traffic-escape-html {position:relative;} .traffic-escape-html .unit { display: block; width: 60px; height: 60px; background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/cartop.png); background-size: contain; background-repeat: no-repeat; background-position:center; cursor: pointer; } .traffic-escape-html .left { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/carleft_EZp.png); } .traffic-escape-html .line { display: flex; justify-content: center; align-items: center; } .traffic-escape-html table { margin: 0; } .traffic-escape-html table td { padding: 2px; } .traffic-escape-html .result {position:absolute;top:0;left:0;width:100%;height:100%;display: none;} .traffic-escape-html .result div {border-radius: 15px;background-color: #efefef;border:2px solid #ccc;padding:30px 30px 40px;margin: 0 30px; top: 50%; position: relative;transform: translateY(-50%);text-align: center;} .traffic-escape-html .result-final {display:none;} .traffic-escape-html .btn {display:inline-block;color: #ffffff;font-size: 14px;background: #2b64cd;border:1px solid #2b64cd;padding: 10px 20px 10px 20px;border-radius:6px;font-family: "Open Sans", sans-serif; font-weight: bold;line-height: 120%;outline:none;cursor:pointer;} #unit-1-4:checked~div .error-1, #unit-2-2:checked~div .error-2, #unit-2-3:checked~div .error-3, #unit-2-4:checked~div .error-4, #unit-3-2:checked~div .error-5, #unit-3-4:checked~div .error-6, #unit-3-1:checked~div .error-9, #unit-4-1:checked~div .error-10, #unit-4-2:checked~div .error-11, #unit-4-3:checked~div .error-7, #unit-4-4:checked~div .error-8 {display:block;} #hide-1:checked~div .error-1, #hide-2:checked~div .error-2, #hide-3:checked~div .error-3, #hide-4:checked~div .error-4, #hide-5:checked~div .error-5, #hide-6:checked~div .error-6, #hide-7:checked~div .error-7, #hide-8:checked~div .error-8, #hide-9:checked~div .error-9, #hide-10:checked~div .error-10, #hide-11:checked~div .error-11 {display:none;} #unit-1-3:checked~#unit-1-4:checked~div .error-1, #unit-1-1:checked~#unit-1-2:checked~#unit-2-1:checked~#unit-2-2:checked~div .error-2, #unit-2-1:checked~#unit-2-3:checked~div .error-3, #unit-1-3:checked~#unit-1-4:checked~#unit-2-1:checked~#unit-2-3:checked~#unit-2-4:checked~div .error-4, #unit-3-1:checked~#unit-3-2:checked~div .error-5, #unit-1-2:checked~#unit-1-4:checked~#unit-3-1:checked~#unit-3-2:checked~#unit-3-4:checked~div .error-6, #unit-2-1:checked~#unit-2-3:checked~#unit-4-1:checked~#unit-4-3:checked~div .error-7, #unit-3-3:checked~#unit-3-4:checked~#unit-4-1:checked~#unit-4-3:checked~#unit-4-4:checked~div .error-8, #unit-1-1:checked~#unit-1-3:checked~#unit-3-1:checked~div .error-9, #unit-3-1:checked~#unit-3-2:checked~#unit-4-1:checked~div .error-10, #unit-2-2:checked~#unit-2-3:checked~#unit-2-4:checked~#unit-4-2:checked~div .error-11 {display:none!important;} /* top */ #unit-1-1:checked~div .label-unit-1-1, #unit-1-2:checked~div .label-unit-1-2, #unit-2-1:checked~div .label-unit-2-1, #unit-2-1:checked~#unit-2-3:checked~div .label-unit-2-3, #unit-1-1:checked~#unit-1-3:checked~#unit-3-1:checked~div .label-unit-3-1, #unit-1-2:checked~#unit-1-4:checked~#unit-3-1:checked~#unit-3-2:checked~#unit-3-4:checked~div .label-unit-3-4, #unit-2-2:checked~#unit-2-3:checked~#unit-2-4:checked~#unit-4-2:checked~div .label-unit-4-2, #unit-2-1:checked~#unit-2-3:checked~#unit-4-1:checked~#unit-4-3:checked~div .label-unit-4-3 { opacity: 0; transform: translate(0, -480px); transition-duration: 0.5s; } /* left */ #unit-1-3:checked~div .label-unit-1-3, #unit-1-3:checked~#unit-1-4:checked~div .label-unit-1-4, #unit-1-1:checked~#unit-1-2:checked~#unit-2-1:checked~#unit-2-2:checked~div .label-unit-2-2, #unit-1-3:checked~#unit-1-4:checked~#unit-2-1:checked~#unit-2-3:checked~#unit-2-4:checked~div .label-unit-2-4, #unit-3-1:checked~#unit-3-2:checked~div .label-unit-3-2, #unit-3-3:checked~div .label-unit-3-3, #unit-3-1:checked~#unit-3-2:checked~#unit-4-1:checked~div .label-unit-4-1, #unit-3-3:checked~#unit-3-4:checked~#unit-4-1:checked~#unit-4-3:checked~#unit-4-4:checked~div .label-unit-4-4 { opacity: 0; transform: translate(-480px, 0); transition-duration: 0.5s; } #unit-1-1:checked~#unit-1-4:checked~#unit-2-1:checked~#unit-2-4:checked~#unit-3-1:checked~#unit-3-2:checked~#unit-3-3:checked~#unit-3-4:checked~#unit-4-1:checked~#unit-4-2:checked~#unit-4-3:checked~#unit-4-4:checked~div .result-final { display: block; } #unit-1-1:checked~#unit-1-4:checked~#unit-2-1:checked~#unit-2-4:checked~#unit-3-1:checked~#unit-3-2:checked~#unit-3-3:checked~#unit-3-4:checked~#unit-4-1:checked~#unit-4-2:checked~#unit-4-3:checked~#unit-4-4:checked~div .game-container { display: none; } /* --- */ @media screen and (-webkit-min-device-pixel-ratio: 0) { input.fallback_ctrl:checked~.container { display: block !important; } input.fallback_ctrl:checked~#fallback { display: none !important; } } [owa] .container { display: none !important; } [class~="x_container"] { display: none !important; } [id~="x_fallback"] { display: block !important; } @media screen and (max-width: 600px) { body[data-outlook-cycle] #fallback { display: block !important; } body[data-outlook-cycle] .container { display: none !important; } }
</style>
<!--[if !mso]><!-- -->
<input type="checkbox" checked id="fallback_ctrl" class="fallback_ctrl" style="mso-hide:all;display:none !important">
<!--<![endif]-->
<!-- FALLBACK -->
<span id="fallback" class="fallback">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center">
<a target="_blank" href="https://viewstripo.email/29b30f71-6591-4b3d-9173-90ea665293a61759301992339?type=amphtml"><img height="260" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/fallback.jpg" width="260" alt="" style="display:inline-block"></a>
</td>
</tr>
</tbody>
</table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="display:none;mso-hide:all">
<input id="unit-1-1" type="radio" style="display:none">
<input id="unit-1-2" type="radio" style="display:none">
<input id="unit-1-3" type="radio" style="display:none">
<input id="unit-1-4" name="error-1" type="radio" style="display:none">
<input id="unit-2-1" type="radio" style="display:none">
<input id="unit-2-2" name="error-2" type="radio" style="display:none">
<input name="error-3" type="radio" id="unit-2-3" style="display:none">
<input id="unit-2-4" name="error-4" type="radio" style="display:none">
<input id="unit-3-1" name="error-9" type="radio" style="display:none">
<input type="radio" id="unit-3-2" name="error-5" style="display:none">
<input type="radio" id="unit-3-3" style="display:none">
<input type="radio" id="unit-3-4" name="error-6" style="display:none">
<input id="unit-4-1" name="error-10" type="radio" style="display:none">
<input id="unit-4-2" name="error-11" type="radio" style="display:none">
<input id="unit-4-3" name="error-7" type="radio" style="display:none">
<input id="unit-4-4" name="error-8" type="radio" style="display:none">
<input id="hide-1" name="error-1" type="radio" style="display:none">
<input type="radio" id="hide-2" name="error-2" style="display:none">
<input name="error-3" type="radio" id="hide-3" style="display:none">
<input id="hide-4" name="error-4" type="radio" style="display:none">
<input name="error-5" type="radio" id="hide-5" style="display:none">
<input id="hide-6" name="error-6" type="radio" style="display:none">
<input name="error-7" type="radio" id="hide-7" style="display:none">
<input id="hide-8" name="error-8" type="radio" style="display:none">
<input id="hide-9" name="error-9" type="radio" style="display:none">
<input name="error-10" type="radio" id="hide-10" style="display:none">
<input id="hide-11" name="error-11" type="radio" style="display:none">
<div class="traffic-escape-html">
<div class="game-container">
<div class="line">
<table align="center" cellpadding="0" cellspacing="0" width="120">
<tbody>
<tr>
<td align="center">
<label for="unit-1-1" class="unit top label-unit-1-1"></label>
</td>
<td align="center">
<label for="unit-1-2" class="unit top label-unit-1-2"></label>
</td>
</tr>
<tr>
<td align="center">
<label for="unit-1-3" class="unit left label-unit-1-3"></label>
</td>
<td align="center">
<label for="unit-1-4" class="unit left label-unit-1-4"></label>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" width="120" cellpadding="0">
<tbody>
<tr>
<td align="center">
<label for="unit-2-1" class="unit top label-unit-2-1"></label>
</td>
<td align="center">
<label for="unit-2-2" class="unit left label-unit-2-2"></label>
</td>
</tr>
<tr>
<td align="center">
<label for="unit-2-3" class="unit top label-unit-2-3"></label>
</td>
<td align="center">
<label for="unit-2-4" class="unit left label-unit-2-4"></label>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line">
<table align="center" cellpadding="0" cellspacing="0" width="120">
<tbody>
<tr>
<td align="center">
<label for="unit-3-1" class="unit top label-unit-3-1"></label>
</td>
<td align="center">
<label for="unit-3-2" class="unit left label-unit-3-2"></label>
</td>
</tr>
<tr>
<td align="center">
<label for="unit-3-3" class="unit left label-unit-3-3"></label>
</td>
<td align="center">
<label for="unit-3-4" class="unit top label-unit-3-4"></label>
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" width="120">
<tbody>
<tr>
<td align="center">
<label for="unit-4-1" class="unit left label-unit-4-1"></label>
</td>
<td align="center">
<label for="unit-4-2" class="unit top label-unit-4-2"></label>
</td>
</tr>
<tr>
<td align="center">
<label for="unit-4-3" class="unit top label-unit-4-3"></label>
</td>
<td align="center">
<label for="unit-4-4" class="unit left label-unit-4-4"></label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div esd-text="true" class="result-final esd-text">
<h3 style="padding-bottom:15px">
Congratulations!
</h3>
<p style="padding-bottom:5px">
You've scored some amazing discounts! <b>15% OFF</b> your next purchase.
</p>
<p>
Use the promo code <b>PRIZE3</b> on our website.
</p>
</div>
<div class="result error-1">
<div>
<p esd-text="true" class="esd-text">
<img height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" alt="" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-1" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-2">
<div>
<p esd-text="true" class="esd-text">
<img alt="" height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-2" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-3">
<div>
<p esd-text="true" class="esd-text">
<img alt="" height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-3" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-4">
<div>
<p esd-text="true" class="esd-text">
<img src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" alt="" height="64" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-4" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-5">
<div>
<p esd-text="true" class="esd-text">
<img width="64" alt="" height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-5" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-6">
<div>
<p esd-text="true" class="esd-text">
<img alt="" height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-6" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-7">
<div>
<p esd-text="true" class="esd-text">
<img height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" alt="" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-7" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-8">
<div>
<p esd-text="true" class="esd-text">
<img height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" alt="" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-8" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-9">
<div>
<p esd-text="true" class="esd-text">
<img src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" alt="" height="64" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-9" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-10">
<div>
<p esd-text="true" class="esd-text">
<img height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" width="64" alt="" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-10" class="btn">
Continue
</label>
</p>
</div>
</div>
<div class="result error-11">
<div>
<p esd-text="true" class="esd-text">
<img width="64" alt="" height="64" src="https://zlnfb.stripocdn.email/content/guids/CABINET_436b38e2786c8095222fc89694e541787daf4477cd5c0c3e96fbc397805f7996/images/stopsign.png" style="margin:0 auto">
</p>
<p class="es-p15t es-p20b">
This car is stuck.
</p>
<p esd-text="true" class="esd-text">
<label for="hide-11" class="btn">
Continue
</label>
</p>
</div>
</div>
</div>
</div>
<!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
Wrapping up
Traffic Escape is a pretty neat small game that allows you to make your email more engaging and interactive. And even though it’s quite rigid in terms of editing the puzzle itself, you can still dedicate it to any occasion or holiday, and adapt its looks to match your style by replacing its visual elements. So feel free to use this game for your email marketing advantage and see how it works for you.
Create exceptional gamified emails with Stripo
0 comments