What do Tinder, Hinge, and Bumble have in common? Apart from the fact that all these apps help find a life partner, they are all united by one popular mechanic, namely swipes. Swipe left to skip, swipe right to like. We decided to brainstorm and implement such mechanics in email marketing. And we did it.
This game mechanic can find many uses in email marketing:
- stores can learn more about recipients with this mechanic on what audience like and dislike, for better future email personalization and product recommendations;
- game grant an opportunity to give recipients special offers depending on what goods they are “liked”;
- and much more.
In this article, we will show you in detail how to create a full-fledged game that will include:
- AMP version of the game with five images;
- interactive HTML version with the same five images;
- fallback version for email clients that do not support interactivity.
Let’s dive right in.
Important note: On mobile devices, this game requires clicking on buttons, just like on the desktop version.
AMP version
Let’s start with the full code of the AMP version, that looks like this:
<style amp-custom>
.swipe-it-amp .game-container {
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
}
.swipe-it-amp .img-container {
position: relative;
width: 220px;
height: 250px;
padding: 10px;
}
.swipe-it-amp .img-container div {
width: 90%;
height: 90%;
box-sizing: border-box;
position: absolute;
border: 10px solid #ccc;
border-bottom-width: 30px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.swipe-it-amp .turn {
transform: rotate(5deg);
}
.swipe-it-amp .btn {
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 2px solid #333;
border-radius: 50%;
cursor: pointer;
}
.swipe-it-amp .btn:hover {
background-color: #333;
}
.swipe-it-amp .like {
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/like02_9CF.png) no-repeat center 54%;
background-size: 50%;
}
.swipe-it-amp .dislike {
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/dislike02_pHi.png) no-repeat center center;
background-size: 50%;
}
.swipe-it-amp .result {
text-align: center;
padding: 20px;
}
.swipe-it-amp .hide {
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
}
.swipe-it-amp .left {
transform: translate(-300px, 0);
}
.swipe-it-amp .right {
transform: translate(300px, 0);
}
@media only screen and (max-width: 600px) {
.swipe-it-amp .img-container {
width: 160px;
height: 190px;
}
.swipe-it-amp .btn {
width: 40px;
height: 40px;
}
}
</style>
<div class="swipe-it-amp">
<div class="game-container" [hidden]="order>=5">
<div>
<label [hidden]="order>=1" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 1, img1: 'dislike'})"> </label>
<label hidden [hidden]="order!=1" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 2, img2: 'dislike'})"> </label>
<label hidden [hidden]="order!=2" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 3, img3: 'dislike'})"> </label>
<label hidden [hidden]="order!=3" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 4, img4: 'dislike'})"> </label>
<label hidden [hidden]="order!=4" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 5, img5: 'dislike'})"> </label>
</div>
<div class="img-container">
<div [class]="order>=5 ? 'turn hide '+direction : 'turn'" class="turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/0f3561545ba54dac81427413014e5e29_8yw.jpeg);"></div>
<div [class]="order>=4 ? 'hide '+direction : ''" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/09fce28b8e864fe0a789ad18ea82d94a_Y1U.jpeg);"></div>
<div [class]="order>=3 ? 'turn hide '+direction : 'turn'" class="turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/08310c6c29e04188bf3c6c836757c65d_Hg6.jpeg);"></div>
<div [class]="order>=2 ? 'hide '+direction : ''" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div [class]="order>=1 ? 'turn hide '+direction : 'turn'" class="turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/001fe42d8cc040de9a9ff2bb349b4a5f.jpeg)"></div>
</div>
<div><label [hidden]="order>=1" class="btn like" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'right', order: 1, img1: 'like'})"> </label><label hidden [hidden]="order!=1" class="btn like" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'right', order: 2, img2: 'like'})"> </label><label hidden [hidden]="order!=2" class="btn like" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'right', order: 3, img3: 'like'})"> </label><label hidden [hidden]="order!=3" class="btn like" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'right', order: 4, img4: 'like'})"> </label><label hidden [hidden]="order!=4" class="btn like" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'right', order: 5, img5: 'like'})"> </label></div>
</div>
<div class="result" hidden [hidden]="order!=5">
<div class="result-text">
<h2 style="padding-bottom:20px">Great choice!</h2>
</div>
</div>
</div>
Now, to the explanation. Creating your game starts with these steps:
- add an empty structure to the email;
- select "Include in AMP HTML" in its settings.
- next, we pull the “HTML” block into this structure and paste the following code into it instead of the existing code in the block.
<style amp-custom>
.swipe-it-amp .game-container {
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
}
.swipe-it-amp .img-container {
position: relative;
width: 220px;
height: 250px;
padding: 10px;
}
.swipe-it-amp .img-container div {
width: 90%;
height: 90%;
box-sizing: border-box;
position: absolute;
border: 10px solid #ccc;
border-bottom-width: 30px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.swipe-it-amp .turn {
transform: rotate(5deg);
}
.swipe-it-amp .btn {
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 2px solid #333;
border-radius: 50%;
cursor: pointer;
}
.swipe-it-amp .btn:hover {
background-color: #333;
}
.swipe-it-amp .like {
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/like02_9CF.png) no-repeat center 54%;
background-size: 50%;
}
.swipe-it-amp .dislike {
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/dislike02_pHi.png) no-repeat center center;
background-size: 50%;
}
.swipe-it-amp .result {
text-align: center;
padding: 20px;
}
@media only screen and (max-width: 600px) {
.swipe-it-amp .img-container {
width: 160px;
height: 190px;
}
.swipe-it-amp .btn {
width: 40px;
height: 40px;
}
}
</style>
<div class="swipe-it-amp">
<div class="game-container">
<div>
<label class="btn dislike"> </label>
<label class="btn dislike"> </label>
<label class="btn dislike"> </label>
<label class="btn dislike"> </label>
<label class="btn dislike"> </label>
</div>
<div class="img-container">
<div class="turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/0f3561545ba54dac81427413014e5e29_8yw.jpeg);"></div>
<div style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/09fce28b8e864fe0a789ad18ea82d94a_Y1U.jpeg);"></div>
<div class="turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/08310c6c29e04188bf3c6c836757c65d_Hg6.jpeg);"></div>
<div style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div class="turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/001fe42d8cc040de9a9ff2bb349b4a5f.jpeg)"></div>
</div>
<div>
<label class="btn like"> </label>
<label class="btn like"> </label>
<label class="btn like"> </label>
<label class="btn like"> </label>
<label class="btn like"> </label>
</div>
</div>
<div class="result">
<div class="result-text">
<h2 style="padding-bottom:20px">Great choice!</h2>
</div>
</div>
</div>
We have an element with photos and like/dislike buttons. Besides that, cards with photos are displayed immediately and are located on top of each other. Every second card is slightly rotated. The rotation degree is specified in the styles in the form of .swipe-it-amp .turn { transform: rotate(5deg); }.
Each card has its own like/dislike buttons that are all displayed now in the email editing area, but will be hidden from the recipient (they will see only the buttons to the corresponding image). Also, the endgame message is currently visible, but it will be shown after the game is over.
“Dislike” button
Here’s how the code for the “Dislike” button looks like.
Let’s discuss this code in detail:
- role="button" acting as a button;
- tabindex="1" is a mandatory attribute if there is a role="button" sets the sequence of receiving focus when switching between elements using the Tab key;
- on="tap:AMP.setState({ direction: 'left', order: 1, img1: 'dislike'})" this part includes “click” event handler (on="tap:"), and create several variables;
- direction is the first variable that we use to determine which way to move the cards so the values will be ‘left’ or ‘right’;
- order is a second variable that we use to write the number of the card in order, which is currently displayed;
- img1 is a third variable that is dedicated to each card (each one has its own img variable with a dedicated number) and used to write which button was clicked, 'dislike' or 'like' and then send this data to the server;
- [hidden]="order>=1" attribute hides the element when the condition is met (in our example, if the order variable is greater than or equal to 1, meaning when the 2nd card should be shown).
Besides that this code included in the all other label tags but all the numbers increased by 1 for each button.
In this part of code, hidden attribute hides the element by default. We need to display only the first button at once, the rest will be hidden.
<label [hidden]="order>=1" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 1, img1: 'dislike'})"> </label>
<label hidden [hidden]="order!=1" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 2, img2: 'dislike'})"> </label>
<label hidden [hidden]="order!=2" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 3, img3: 'dislike'})"> </label>
<label hidden [hidden]="order!=3" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 4, img4: 'dislike'})"> </label>
<label hidden [hidden]="order!=4" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 5, img5: 'dislike'})"> </label>
“Like” button
The situation with this button is similar to the “Dislike” button, only in the direction variable, we specify the direction 'right' so that the cards move in the other direction, and in the variables img1, img2 we change the value to 'like':
For the first button we have the code [hidden]="order>=1" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'right', order: 1, img1: 'like'})".
For the rest we have the same code, meanwhile increasing all numbers by 1 for each button.
Сards
Our buttons are already hidden, now we need to hide and animate the cards.
To do this, we add the following classes before the closing </style> tag, so it will look like this:
.swipe-it-amp .hide {
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
}
.swipe-it-amp .left {
transform: translate(-300px, 0);
}
.swipe-it-amp .right {
transform: translate(300px, 0);
}
In the .hide class, we added the transition-duration: 0.1s; property so that the card does not hide instantly and the animation of the movement is visible.
After that, we need the conditions for when to add these classes.
<div [class]="order>=5 ? 'turn hide '+direction : 'turn'" class="turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/0f3561545ba54dac81427413014e5e29_8yw.jpeg);"></div>
<div [class]="order>=4 ? 'hide '+direction : ''" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/09fce28b8e864fe0a789ad18ea82d94a_Y1U.jpeg);"></div>
<div [class]="order>=3 ? 'turn hide '+direction : 'turn'" class="turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/08310c6c29e04188bf3c6c836757c65d_Hg6.jpeg);"></div>
<div [class]="order>=2 ? 'hide '+direction : ''" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div [class]="order>=1 ? 'turn hide '+direction : 'turn'" class="turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/001fe42d8cc040de9a9ff2bb349b4a5f.jpeg)"></div>
Note that our cards are one on top of the other. In the layout, the element that is lower in the code will be in the foreground. That is, our cards will be located in the layout not 1,2,3 but 3,2,1.
We have following attribute to the first card (the one lower in the code with the 'turn' class): [class]="order>=1 ? 'turn hide '+direction : 'turn'" which is an attribute that contains the condition for displaying classes. If the value of the order variable is greater than or equal to 1, we add the turn class, the hide class, and the value of the direction variable. Otherwise, we will only leave the turn class. When the recipient clicks on the 'Dislike' or 'Like' buttons, the order number is written to the order variable 1,2,3, and so on. After this, we have the check and classes for card animation.
We have the same for the next ones, and where there is no turn class, we don’t add it. Besides that, we increase the number by 1 in the check for the order variable. As a result, for the second card it will be: [class]="order>=2 ? 'hide '+direction : ''", for the 3rd: [class]="order>=3 ? 'turn hide '+direction : 'turn'" and so on.
Completion screen
The next step is creating conditions for displaying a message at the end of the game instead of the block with the game. To do this, we add the attribute [hidden]="order>=5" to the div tag with the class "game-container".
Besides that, we have the attribute hidden [hidden]="order!=5" to the div tag with the class "result".
In this code the number 5 is the maximum number of cards, if we want to make more cards (for example 10) then we need to change it to 10.
To change your completion message, just type your own here:
Meanwhile, changing “Submit” screen messages requires changing texts inside these code lines:
Gathering data
Our game is ready, but the data we receive from it is not yet sent to the server. The full code of the game with data gathering will look like this:
<style amp-custom>
.swipe-it-amp .game-container {
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
}
.swipe-it-amp .img-container {
position: relative;
width: 220px;
height: 250px;
padding: 10px;
}
.swipe-it-amp .img-container div {
width: 90%;
height: 90%;
box-sizing: border-box;
position: absolute;
border: 10px solid #ccc;
border-bottom-width: 30px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.swipe-it-amp .turn {
transform: rotate(5deg);
}
.swipe-it-amp .btn {
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 2px solid #333;
border-radius: 50%;
cursor: pointer;
}
.swipe-it-amp .btn:hover {
background-color: #333;
}
.swipe-it-amp .like {
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/like02_9CF.png) no-repeat center 54%;
background-size: 50%;
}
.swipe-it-amp .dislike {
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/dislike02_pHi.png) no-repeat center center;
background-size: 50%;
}
.swipe-it-amp .result {
text-align: center;
padding: 20px;
}
.swipe-it-amp .hide {
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
}
.swipe-it-amp .left {
transform: translate(-300px, 0);
}
.swipe-it-amp .right {
transform: translate(300px, 0);
}
.swipe-it-amp .submit-btn {
border-radius: 0px;
font-size: 16px;
background: #151515;
padding: 10px 17px;
display: inline-block;
color: #ffffff;
text-align: center;
cursor: pointer;
border: 0;
}
.swipe-it-amp .amp-form-submit-success .result-text {
display: none;
}
@media only screen and (max-width: 600px) {
.swipe-it-amp .img-container {
width: 160px;
height: 190px;
}
.swipe-it-amp .btn {
width: 40px;
height: 40px;
}
}
</style>
<div class="swipe-it-amp">
<form method="post" action-xhr="https://amp.stripo.email/v1/form/ytxje/alltests">
<input type="hidden" name="user_email" value="%EMAIL%">
<input type="hidden" name="image-1" [value]="img1">
<input type="hidden" name="image-2" [value]="img2">
<input type="hidden" name="image-3" [value]="img3">
<input type="hidden" name="image-4" [value]="img4">
<input type="hidden" name="image-5" [value]="img5">
<div class="game-container" [hidden]="order>=5">
<div>
<label [hidden]="order>=1" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 1, img1: 'dislike'})"> </label>
<label hidden [hidden]="order!=1" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 2, img2: 'dislike'})"> </label>
<label hidden [hidden]="order!=2" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 3, img3: 'dislike'})"> </label>
<label hidden [hidden]="order!=3" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 4, img4: 'dislike'})"> </label>
<label hidden [hidden]="order!=4" class="btn dislike" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'left', order: 5, img5: 'dislike'})"> </label>
</div>
<div class="img-container">
<div [class]="order>=5 ? 'turn hide '+direction : 'turn'" class="turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/0f3561545ba54dac81427413014e5e29_8yw.jpeg);"></div>
<div [class]="order>=4 ? 'hide '+direction : ''" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/09fce28b8e864fe0a789ad18ea82d94a_Y1U.jpeg);"></div>
<div [class]="order>=3 ? 'turn hide '+direction : 'turn'" class="turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/08310c6c29e04188bf3c6c836757c65d_Hg6.jpeg);"></div>
<div [class]="order>=2 ? 'hide '+direction : ''" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div [class]="order>=1 ? 'turn hide '+direction : 'turn'" class="turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/001fe42d8cc040de9a9ff2bb349b4a5f.jpeg)"></div>
</div>
<div><label [hidden]="order>=1" class="btn like" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'right', order: 1, img1: 'like'})"> </label><label hidden [hidden]="order!=1" class="btn like" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'right', order: 2, img2: 'like'})"> </label><label hidden [hidden]="order!=2" class="btn like" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'right', order: 3, img3: 'like'})"> </label><label hidden [hidden]="order!=3" class="btn like" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'right', order: 4, img4: 'like'})"> </label><label hidden [hidden]="order!=4" class="btn like" role="button" tabindex="1" on="tap:AMP.setState({ direction: 'right', order: 5, img5: 'like'})"> </label></div>
</div>
<div class="result" hidden [hidden]="order!=5">
<div class="result-text">
<h2 style="padding-bottom:20px">Great choice!</h2>
<p><button class="submit-btn" type="submit">Submit</button></p>
</div>
<div submit-success style="text-align: center;">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<amp-img noloading layout="fixed" src="https://zlnfb.stripocdn.email/content/guids/CABINET_5c04f7244165e68be04ea8f8377d8b355c6e17ed075dee1cc1629a830524db96/images/okicon01.png" alt="survey" width="168" height="159"></amp-img>
</td>
</tr>
<tr>
<td align="center" class="esd-block-text">
<h2 style="padding:5px 0 10px;font-size:30px;text-align:center">Congratulations</h2>
</td>
</tr>
<tr>
<td align="center" class="esd-block-text">
<p style="font-size:15px">Thank you for filling out our survey</p>
</td>
</tr>
<tr>
<td align="center" style="padding-top:20px"><a href="https://stripo.email/" target="_blank" style="border-radius: 0px; font-size: 12px; background: #151515; padding: 13px 17px;display: inline-block; font-weight: normal; font-style: normal; line-height: 120%; color: #ffffff; text-decoration: none; text-align: center;" class="esd-frame-element esd-hover-element esdev-disable-select">Learn More</a></td>
</tr>
</tbody>
</table>
</div>
<div submit-error style="text-align: center;">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" class="esd-block-text">
<h2 style="padding-bottom:10px;color: #ec382a;">Error</h2>
</td>
</tr>
<tr>
<td align="center" class="esd-block-text">
<p style="font-size:15px">Please, try again later.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
First we need to create a Data Service where all data will be stored.
Once it’s done, we add the following code before the div tag with the class “game-container”:
<form method="post" action-xhr="https://amp.stripo.email/v1/form/ytxje/alltests">
<input type="hidden" name="user_email" value="%EMAIL%">
<input type="hidden" name="image-1" [value]="img1">
<input type="hidden" name="image-2" [value]="img2">
<input type="hidden" name="image-3" [value]="img3">
<input type="hidden" name="image-4" [value]="img4">
<input type="hidden" name="image-5" [value]="img5">
Besides that, we add the closing </form> tag at the end of the code, before the last </div> tag:
In the first input tag (name="user_email"), you need to replace the value with your own. The user's name is substituted into this input with the merge-tag of the email service used. In our example, the merge-tag is for the Yespo service. In your case, you need to replace it with the one used in your email service.
Important note: More about merge-tags and how to use them described in the special article in our Help center.
After that, replace the link in the action-xhr attribute of the form tag with your own.
Input tags with the attribute name="image-1", name="image-2" etc. correspond to the number of cards. In the attribute [value] specified a variable for each card, in which we wrote the value “Dislike” or “Like”.
Now we need to add the “Submit” button and blocks with a message about a successful submission or an error. To do this, we paste this code instead of block with “result” class:
<div class="result" hidden [hidden]="order!=5">
<div class="result-text">
<h2 style="padding-bottom:20px">Great choice!</h2>
<p><button class="submit-btn" type="submit">Submit</button></p>
</div>
<div submit-success style="text-align: center;">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<amp-img noloading layout="fixed" src="https://zlnfb.stripocdn.email/content/guids/CABINET_5c04f7244165e68be04ea8f8377d8b355c6e17ed075dee1cc1629a830524db96/images/okicon01.png" alt="survey" width="168" height="159"></amp-img>
</td>
</tr>
<tr>
<td align="center" class="esd-block-text">
<h2 style="padding:5px 0 10px;font-size:30px;text-align:center">Congratulations</h2>
</td>
</tr>
<tr>
<td align="center" class="esd-block-text">
<p style="font-size:15px">Thank you for filling out our survey</p>
</td>
</tr>
<tr>
<td align="center" style="padding-top:20px"><a href="https://stripo.email/" target="_blank" style="border-radius: 0px; font-size: 12px; background: #151515; padding: 13px 17px;display: inline-block; font-weight: normal; font-style: normal; line-height: 120%; color: #ffffff; text-decoration: none; text-align: center;" class="esd-frame-element esd-hover-element esdev-disable-select">Learn More</a></td>
</tr>
</tbody>
</table>
</div>
<div submit-error style="text-align: center;">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" class="esd-block-text">
<h2 style="padding-bottom:10px;color: #ec382a;">Error</h2>
</td>
</tr>
<tr>
<td align="center" class="esd-block-text">
<p style="font-size:15px">Please, try again later.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
We’ve got the core, now it’s time to make it shiny with some styles. Paste this code before "swipe-it-amp" div.
.swipe-it-amp .submit-btn {
border-radius: 0px;
font-size: 16px;
background: #151515;
padding: 10px 17px;
display: inline-block;
color: #ffffff;
text-align: center;
cursor: pointer;
border: 0;
}
.swipe-it-amp .amp-form-submit-success .result-text {
display: none;
}
Important note: div with the submit-success attribute appears when the data is sent successfully, and the submit-error when an error occurs. Meanwhile, .submit-btn is used to design the “submit” button.
This button is responsible for submitting the recipient’s answers and sending them to your Data Service.
Customizing styles
You can tweak game looks to your liking by changing styles in the code.
Like and dislike buttons
You can change how “Like” and “Dislike” buttons will look by replacing links to our icons to your own:
Besides that, you can change border color for buttons. To do this, there is a btn class in the code in which you need to change the background color value.
As a final touch, you can use the :hover pseudo-class to specify the background color when the mouse hovers over the element.
Important note: In our example, the icons are white with a black frame. To change their color, you need to upload another image. The image size should be 2 times larger than the icon size. In our case, the icon is 50×50 px and the image is 100×100 px.
Cards
Now let’s talk about changing styles for cards. To make your cards match your preferences, you can tweak this parameter — size, color, and border type — to your own values.
Meanwhile, changing images in cards requires changing links to these images in this part of the code:
You can create the design of your own by changing all these elements. So experiment with them to create the unique and suiting game for your email marketing needs.
Important note: Changing styles for the interactive HTML version is identical to the guide above.
Interactive HTML version
Now we are moving to an interactive HTML version. Work on this version starts with another empty structure with the setting “Include in HTML” applied. Be sure to lcoate it right under the structure with the AMP version.
After that, we also insert an “HTML” block into it and add the following code:
<style>
.swipe-it-html .game-container {
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
}
.swipe-it-html .img-container {
position: relative;
width: 220px;
height: 250px;
padding: 10px;
}
.swipe-it-html .img-container div {
width: 90%;
height: 90%;
box-sizing: border-box;
position: absolute;
border: 10px solid #ccc;
border-bottom-width: 30px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.swipe-it-html .turn {
transform: rotate(5deg);
}
.swipe-it-html .btn {
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 2px solid #333;
border-radius: 50%;
cursor: pointer;
}
.swipe-it-html .btn:hover {
background-color: #333;
}
.swipe-it-html .like {
display: none;
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/like02_9CF.png) no-repeat center 54%;
background-size: 50%;
}
.swipe-it-html .dislike {
display: none;
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/dislike02_pHi.png) no-repeat center center;
background-size: 50%;
}
.swipe-it-html .result {
text-align: center;
padding: 20px;
display: none;
}
.swipe-it-html .submit-btn {
border-radius: 0px;
font-size: 16px;
background: #151515;
padding: 10px 17px;
display: inline-block;
color: #ffffff;
text-align: center;
cursor: pointer;
border: 0;
}
@media only screen and (max-width: 600px) {
.swipe-it-html .img-container {
width: 160px;
height: 190px;
}
.swipe-it-html .btn {
width: 40px;
height: 40px;
}
}
.input-img-1:checked~.input-img-2:checked~.input-img-3:checked~.input-img-4:checked~.input-img-5:checked~.game-container {
display: none;
}
.input-img-1:checked~.input-img-2:checked~.input-img-3:checked~.input-img-4:checked~.input-img-5:checked~.result {
display: block;
}
.input-img-0:checked~* .label-dislike-1,
.input-img-0:checked~* .label-like-1,
.input-img-1:checked~* .label-dislike-2,
.input-img-1:checked~* .label-like-2,
.input-img-2:checked~* .label-dislike-3,
.input-img-2:checked~* .label-like-3,
.input-img-3:checked~* .label-dislike-4,
.input-img-3:checked~* .label-like-4,
.input-img-4:checked~* .label-dislike-5,
.input-img-4:checked~* .label-like-5 {
display: block;
}
.input-img-1:checked~* .label-dislike-1,
.input-img-1:checked~* .label-like-1,
.input-img-2:checked~* .label-dislike-2,
.input-img-2:checked~* .label-like-2,
.input-img-3:checked~* .label-dislike-3,
.input-img-3:checked~* .label-like-3,
.input-img-4:checked~* .label-dislike-4,
.input-img-4:checked~* .label-like-4 {
display: none !important;
}
#input-dislike-1:checked~* .image-1,
#input-dislike-2:checked~* .image-2,
#input-dislike-3:checked~* .image-3,
#input-dislike-4:checked~* .image-4,
#input-dislike-5:checked~* .image-5 {
transform: translate(-300px, 0);
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
}
#input-like-1:checked~* .image-1,
#input-like-2:checked~* .image-2,
#input-like-3:checked~* .image-3,
#input-like-4:checked~* .image-4,
#input-like-5:checked~* .image-5 {
transform: translate(300px, 0);
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
}
</style>
<div class="swipe-it-html">
<form method="get" action="https://amp.stripo.email/v1/form/ytxje/alltests" target="_blank">
<input type="hidden" name="user_email" value="%EMAIL%">
<input type="radio" class="input-img-0" name="image-1" checked style="display:none">
<input type="radio" class="input-img-1" id="input-dislike-1" name="image-1" value="dislike" style="display:none">
<input type="radio" class="input-img-1" id="input-like-1" name="image-1" value="like" style="display:none">
<input type="radio" class="input-img-2" id="input-dislike-2" name="image-2" value="dislike" style="display:none">
<input type="radio" class="input-img-2" id="input-like-2" name="image-2" value="like" style="display:none">
<input type="radio" class="input-img-3" id="input-dislike-3" name="image-3" value="dislike" style="display:none">
<input type="radio" class="input-img-3" id="input-like-3" name="image-3" value="like" style="display:none">
<input type="radio" class="input-img-4" id="input-dislike-4" name="image-4" value="dislike" style="display:none">
<input type="radio" class="input-img-4" id="input-like-4" name="image-4" value="like" style="display:none">
<input type="radio" class="input-img-5" id="input-dislike-5" name="image-5" value="dislike" style="display:none">
<input type="radio" class="input-img-5" id="input-like-5" name="image-5" value="like" style="display:none">
<div class="game-container">
<div>
<label for="input-dislike-1" class="btn dislike label-dislike-1"> </label>
<label for="input-dislike-2" class="btn dislike label-dislike-2"> </label>
<label for="input-dislike-3" class="btn dislike label-dislike-3"> </label>
<label for="input-dislike-4" class="btn dislike label-dislike-4"> </label>
<label for="input-dislike-5" class="btn dislike label-dislike-5"> </label>
</div>
<div class="img-container">
<div class="image-5 turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/0f3561545ba54dac81427413014e5e29_8yw.jpeg);"></div>
<div class="image-4" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/09fce28b8e864fe0a789ad18ea82d94a_Y1U.jpeg);"></div>
<div class="image-3 turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/08310c6c29e04188bf3c6c836757c65d_Hg6.jpeg);"></div>
<div class="image-2" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div class="image-1 turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/001fe42d8cc040de9a9ff2bb349b4a5f.jpeg)"></div>
</div>
<div>
<label for="input-like-1" class="btn like label-like-1"> </label>
<label for="input-like-2" class="btn like label-like-2"> </label>
<label for="input-like-3" class="btn like label-like-3"> </label>
<label for="input-like-4" class="btn like label-like-4"> </label>
<label for="input-like-5" class="btn like label-like-5"> </label>
</div>
</div>
<div class="result">
<div class="result-text">
<h2 style="padding-bottom:20px">Great choice!</h2>
<p><button class="submit-btn" type="submit">Submit</button></p>
</div>
</div>
</form>
</div>
Gathering data
In order for data gathering to work in this version, you need a link in the action attribute of the form tag to your data Service, which was created for the AMP version.
In the first input tag (name="user_email), you also need to replace the value with your own merge-tag , just like in the case with the AMP version.
The interactive HTML version has a similar structure, but the “Dislike” and “Like” buttons are bound to the input tags. Thanks to this binding, we can add transition and hide the blocks using the pseudo-class :checked.
The number of input tags must match the number of “Dislike” and “Like” buttons, and one input “input-img-0” with the checked attribute by default, is needed to display the very first buttons and the card.
Customizing styles
Now, a few words about styles for interactive HTML version.
Important note: If the number of buttons changes, then the styles also need to be changed.
Here's what the styles for showing and hiding the “Dislike” and “Like” buttons look like:
Here we have styles for card transition:
The last but not least, we have styles that hide the game at the end and show a message:
Fallback version
The last stop of our guide is the fallback version. The layout of this version is visually similar to our interactive versions but without interactivity. As a result, clicking on elements will lead to the web version of the email
We continue to work with the interactive HTML block that we made above and insert the following code between the </style> tag and <div class="swipe-it-html">.
<!--[if !mso]><!--><input type="checkbox" id="fallback_ctrl" class="fallback_ctrl" style="display:none !important;mso-hide:all;" checked>
<!--<![endif]-->
<!-- FALLBACK -->
<div id="fallback" class="fallback">
<table width="100%">
<tbody>
<tr align="center">
<td width="20%"><a class="btn" target="_blank" href="https://viewstripo.email/55c0629f-70d1-42af-a22d-0760504d46461723026118684?type=amphtml"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/dislike02_pHi.png" alt style="display: block;" width="25" height="25"></a></td>
<td width="60%"><a target="_blank" style="display:inline-block;border: 10px solid #ccc;border-bottom-width: 30px;" href="https://viewstripo.email/55c0629f-70d1-42af-a22d-0760504d46461723026118684?type=amphtml"><img class="adapt-img" src="https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/001fe42d8cc040de9a9ff2bb349b4a5f_eDR.jpg" alt style="display: block;" width="200" height="210"></a></td>
<td width="20%"><a class="btn" target="_blank" href="https://viewstripo.email/55c0629f-70d1-42af-a22d-0760504d46461723026118684?type=amphtml"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/like02_9CF.png" alt style="display: block;" width="25" height="25"></a></td>
</tr>
</tbody>
</table>
</div><!-- /FALLBACK -->
<!--[if !mso]><!-->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="mso-hide:all;display:none;">
Besides that, at the very end of the code, you need to insert another piece of code:
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
To make things work properly and send the recipient to the right web page when clicking on the fallback elements, you should change links to your own web version here:
Next, we work with styles to show only the version suitable for the mail client and make the buttons look the same as in the interactive version. We add the styles themselves to the style tag:
.fallback .btn {
display: block;
border: 2px solid #333;
border-radius: 50%;
padding: 12px;
width: 25px;
height: 25px;
}
.fallback .btn:hover {
background-color: #333;
}
@media only screen and (max-width: 600px) {
.fallback .btn {
padding: 7px;
}
}
/* --- */
@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 stop for a bit to discuss important code elements. We have a special input:
We use it to show or hide the fallback via styles. It is in the comments <!--[if !mso]><!--> … <!--<![endif]--> to make sure it is hidden in the Outlook Desktop client.
In addition, we have <div id="fallback" class="fallback"></div> that contains the entire layout of our fallback version. It should have a simple, tabular layout suitable for Outlook. In our example, this is a table in the form of tabs with links that lead to the web version. You can make your own version, for example, so that the contents of the tabs are displayed one under the other without going to the web version. The main thing is to use a layout that is understandable for Outlook.
This code is responsible for the appearance of the “Dislike” and “Like” buttons:
The styles below are responsible for hiding and displaying the fallback version. If you remove them or comment them out, the fallback version will be visible in the editing area as well as preview mode, so you can adjust its design to the desired form (through the code). But don't forget to return these styles back before sending the email.
These styles don’t have clear rules for each email client, but there are 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 needed for Outlook on iOS and Android mobile devices;
- mso-hide:all; is used for Outlook.com.
The full code
Here is the fallback code of the game, including the interactive HTML part and the fallback version:
<style>
.swipe-it-html .game-container {
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
}
.swipe-it-html .img-container {
position: relative;
width: 220px;
height: 250px;
padding: 10px;
}
.swipe-it-html .img-container div {
width: 90%;
height: 90%;
box-sizing: border-box;
position: absolute;
border: 10px solid #ccc;
border-bottom-width: 30px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.swipe-it-html .turn {
transform: rotate(5deg);
}
.swipe-it-html .btn {
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 2px solid #333;
border-radius: 50%;
cursor: pointer;
}
.swipe-it-html .btn:hover {
background-color: #333;
}
.swipe-it-html .like {
display: none;
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/like02_9CF.png) no-repeat center 54%;
background-size: 50%;
}
.swipe-it-html .dislike {
display: none;
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/dislike02_pHi.png) no-repeat center center;
background-size: 50%;
}
.swipe-it-html .result {
text-align: center;
padding: 20px;
display: none;
}
.swipe-it-html .submit-btn {
border-radius: 0px;
font-size: 16px;
background: #151515;
padding: 10px 17px;
display: inline-block;
color: #ffffff;
text-align: center;
cursor: pointer;
border: 0;
}
@media only screen and (max-width: 600px) {
.swipe-it-html .img-container {
width: 160px;
height: 190px;
}
.swipe-it-html .btn {
width: 40px;
height: 40px;
}
}
.input-img-1:checked~.input-img-2:checked~.input-img-3:checked~.input-img-4:checked~.input-img-5:checked~.game-container {
display: none;
}
.input-img-1:checked~.input-img-2:checked~.input-img-3:checked~.input-img-4:checked~.input-img-5:checked~.result {
display: block;
}
.input-img-0:checked~* .label-dislike-1,
.input-img-0:checked~* .label-like-1,
.input-img-1:checked~* .label-dislike-2,
.input-img-1:checked~* .label-like-2,
.input-img-2:checked~* .label-dislike-3,
.input-img-2:checked~* .label-like-3,
.input-img-3:checked~* .label-dislike-4,
.input-img-3:checked~* .label-like-4,
.input-img-4:checked~* .label-dislike-5,
.input-img-4:checked~* .label-like-5 {
display: block;
}
.input-img-1:checked~* .label-dislike-1,
.input-img-1:checked~* .label-like-1,
.input-img-2:checked~* .label-dislike-2,
.input-img-2:checked~* .label-like-2,
.input-img-3:checked~* .label-dislike-3,
.input-img-3:checked~* .label-like-3,
.input-img-4:checked~* .label-dislike-4,
.input-img-4:checked~* .label-like-4 {
display: none !important;
}
#input-dislike-1:checked~* .image-1,
#input-dislike-2:checked~* .image-2,
#input-dislike-3:checked~* .image-3,
#input-dislike-4:checked~* .image-4,
#input-dislike-5:checked~* .image-5 {
transform: translate(-300px, 0);
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
}
#input-like-1:checked~* .image-1,
#input-like-2:checked~* .image-2,
#input-like-3:checked~* .image-3,
#input-like-4:checked~* .image-4,
#input-like-5:checked~* .image-5 {
transform: translate(300px, 0);
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
}
.fallback .btn {
display: block;
border: 2px solid #333;
border-radius: 50%;
padding: 12px;
width: 25px;
height: 25px;
}
.fallback .btn:hover {
background-color: #333;
}
@media only screen and (max-width: 600px) {
.fallback .btn {
padding: 7px;
}
}
/* --- */
@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" id="fallback_ctrl" class="fallback_ctrl" style="display:none !important;mso-hide:all;" checked>
<!--<![endif]-->
<!-- FALLBACK -->
<div id="fallback" class="fallback">
<table width="100%">
<tbody>
<tr align="center">
<td width="20%"><a class="btn" target="_blank" href="https://viewstripo.email/55c0629f-70d1-42af-a22d-0760504d46461723026118684?type=amphtml"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/dislike02_pHi.png" alt style="display: block;" width="25" height="25"></a></td>
<td width="60%"><a target="_blank" style="display:inline-block;border: 10px solid #ccc;border-bottom-width: 30px;" href="https://viewstripo.email/55c0629f-70d1-42af-a22d-0760504d46461723026118684?type=amphtml"><img class="adapt-img" src="https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/001fe42d8cc040de9a9ff2bb349b4a5f_eDR.jpg" alt style="display: block;" width="200" height="210"></a></td>
<td width="20%"><a class="btn" target="_blank" href="https://viewstripo.email/55c0629f-70d1-42af-a22d-0760504d46461723026118684?type=amphtml"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/like02_9CF.png" alt style="display: block;" width="25" height="25"></a></td>
</tr>
</tbody>
</table>
</div><!-- /FALLBACK -->
<!--[if !mso]><!-->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="mso-hide:all;display:none;">
<div class="swipe-it-html">
<form method="get" action="https://amp.stripo.email/v1/form/ytxje/alltests" target="_blank">
<input type="hidden" name="user_email" value="%EMAIL%">
<input type="radio" class="input-img-0" name="image-1" checked style="display:none">
<input type="radio" class="input-img-1" id="input-dislike-1" name="image-1" value="dislike" style="display:none">
<input type="radio" class="input-img-1" id="input-like-1" name="image-1" value="like" style="display:none">
<input type="radio" class="input-img-2" id="input-dislike-2" name="image-2" value="dislike" style="display:none">
<input type="radio" class="input-img-2" id="input-like-2" name="image-2" value="like" style="display:none">
<input type="radio" class="input-img-3" id="input-dislike-3" name="image-3" value="dislike" style="display:none">
<input type="radio" class="input-img-3" id="input-like-3" name="image-3" value="like" style="display:none">
<input type="radio" class="input-img-4" id="input-dislike-4" name="image-4" value="dislike" style="display:none">
<input type="radio" class="input-img-4" id="input-like-4" name="image-4" value="like" style="display:none">
<input type="radio" class="input-img-5" id="input-dislike-5" name="image-5" value="dislike" style="display:none">
<input type="radio" class="input-img-5" id="input-like-5" name="image-5" value="like" style="display:none">
<div class="game-container">
<div>
<label for="input-dislike-1" class="btn dislike label-dislike-1"> </label>
<label for="input-dislike-2" class="btn dislike label-dislike-2"> </label>
<label for="input-dislike-3" class="btn dislike label-dislike-3"> </label>
<label for="input-dislike-4" class="btn dislike label-dislike-4"> </label>
<label for="input-dislike-5" class="btn dislike label-dislike-5"> </label>
</div>
<div class="img-container">
<div class="image-5 turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/0f3561545ba54dac81427413014e5e29_8yw.jpeg);"></div>
<div class="image-4" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/09fce28b8e864fe0a789ad18ea82d94a_Y1U.jpeg);"></div>
<div class="image-3 turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/images/08310c6c29e04188bf3c6c836757c65d_Hg6.jpeg);"></div>
<div class="image-2" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div class="image-1 turn" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/images/001fe42d8cc040de9a9ff2bb349b4a5f.jpeg)"></div>
</div>
<div>
<label for="input-like-1" class="btn like label-like-1"> </label>
<label for="input-like-2" class="btn like label-like-2"> </label>
<label for="input-like-3" class="btn like label-like-3"> </label>
<label for="input-like-4" class="btn like label-like-4"> </label>
<label for="input-like-5" class="btn like label-like-5"> </label>
</div>
</div>
<div class="result">
<div class="result-text">
<h2 style="padding-bottom:20px">Great choice!</h2>
<p><button class="submit-btn" type="submit">Submit</button></p>
</div>
</div>
</form>
</div>
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
Wrapping up
New interactive mechanics are not only a way to distinguish your emails from competitors, but also to surprise your recipients by offering a more engaging way to interact with the already familiar email newsletters. We hope that this guide will become a reliable support for you in creating unique email newsletters that will delight your recipients and delight you with improved performance of your email campaigns.
0 comments