What do Tinder, Hinge, and Bumble have in widespread? Aside from the truth that all these apps assist discover a life accomplice, they’re all united by one standard mechanic, specifically swipes. Swipe left to skip, swipe proper to love. We determined to brainstorm and implement such mechanics in e mail advertising and marketing. And we did it.
This recreation mechanic can discover many makes use of in e mail advertising and marketing:
- shops can study extra about recipients with this mechanic on what viewers like and dislike, for higher future e mail personalization and product suggestions;
- recreation grant a chance to present recipients particular affords relying on what items they’re “preferred”;
- and far more.
On this article, we’ll present you intimately how one can create a full-fledged recreation that may embrace:
- AMP model of the sport with 5 photos;
- interactive HTML model with the identical 5 photos;
- fallback model for e mail shoppers that don’t help interactivity.
Let’s dive proper in.
Essential word: On cellular units, this recreation requires clicking on buttons, identical to on the desktop model.
AMP model
Let’s begin with the total code of the AMP model, that appears like this:
<fashion amp-custom>
.swipe-it-amp .game-container
show: flex;
justify-content: space-around;
align-items: middle;
overflow: hidden;
.swipe-it-amp .img-container
place: relative;
width: 220px;
peak: 250px;
padding: 10px;
.swipe-it-amp .img-container div
width: 90%;
peak: 90%;
box-sizing: border-box;
place: absolute;
border: 10px stable #ccc;
border-bottom-width: 30px;
background-size: cowl;
background-position: middle middle;
background-repeat: no-repeat;
.swipe-it-amp .flip
remodel: rotate(5deg);
.swipe-it-amp .btn
show: block;
width: 50px;
peak: 50px;
box-sizing: border-box;
border: 2px stable #333;
border-radius: 50%;
cursor: pointer;
.swipe-it-amp .btn:hover
background-color: #333;
.swipe-it-amp .like
background: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/like02_9CF.png) no-repeat middle 54%;
background-size: 50%;
.swipe-it-amp .dislike
background: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/dislike02_pHi.png) no-repeat middle middle;
background-size: 50%;
.swipe-it-amp .end result
text-align: middle;
padding: 20px;
.swipe-it-amp .cover
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
.swipe-it-amp .left
remodel: translate(-300px, 0);
.swipe-it-amp .proper
remodel: translate(300px, 0);
@media solely display and (max-width: 600px)
.swipe-it-amp .img-container
width: 160px;
peak: 190px;
.swipe-it-amp .btn
width: 40px;
peak: 40px;
</fashion>
<div class="swipe-it-amp">
<div class="game-container" [hidden]="order>=5">
<div>
<label [hidden]="order>=1" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 1, img1: 'dislike')"> </label>
<label hidden [hidden]="order!=1" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 2, img2: 'dislike')"> </label>
<label hidden [hidden]="order!=2" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 3, img3: 'dislike')"> </label>
<label hidden [hidden]="order!=3" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 4, img4: 'dislike')"> </label>
<label hidden [hidden]="order!=4" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 5, img5: 'dislike')"> </label>
</div>
<div class="img-container">
<div [class]="order>=5 ? 'flip cover '+path : 'flip'" class="flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/0f3561545ba54dac81427413014e5e29_8yw.jpeg);"></div>
<div [class]="order>=4 ? 'cover '+path : ''" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/09fce28b8e864fe0a789ad18ea82d94a_Y1U.jpeg);"></div>
<div [class]="order>=3 ? 'flip cover '+path : 'flip'" class="flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/08310c6c29e04188bf3c6c836757c65d_Hg6.jpeg);"></div>
<div [class]="order>=2 ? 'cover '+path : ''" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div [class]="order>=1 ? 'flip cover '+path : 'flip'" class="flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/001fe42d8cc040de9a9ff2bb349b4a5f.jpeg)"></div>
</div>
<div><label [hidden]="order>=1" class="btn like" position="button" tabindex="1" on="faucet:AMP.setState( path: 'proper', order: 1, img1: 'like')"> </label><label hidden [hidden]="order!=1" class="btn like" position="button" tabindex="1" on="faucet:AMP.setState( path: 'proper', order: 2, img2: 'like')"> </label><label hidden [hidden]="order!=2" class="btn like" position="button" tabindex="1" on="faucet:AMP.setState( path: 'proper', order: 3, img3: 'like')"> </label><label hidden [hidden]="order!=3" class="btn like" position="button" tabindex="1" on="faucet:AMP.setState( path: 'proper', order: 4, img4: 'like')"> </label><label hidden [hidden]="order!=4" class="btn like" position="button" tabindex="1" on="faucet:AMP.setState( path: 'proper', order: 5, img5: 'like')"> </label></div>
</div>
<div class="end result" hidden [hidden]="order!=5">
<div class="result-text">
<h2 fashion="padding-bottom:20px">Nice alternative!</h2>
</div>
</div>
</div>
Now, to the reason. Creating your recreation begins with these steps:
- add an empty construction to the e-mail;
- choose “Embody in AMP HTML” in its settings.
- subsequent, we pull the “HTML” block into this construction and paste the next code into it as a substitute of the prevailing code within the block.
<fashion amp-custom>
.swipe-it-amp .game-container
show: flex;
justify-content: space-around;
align-items: middle;
overflow: hidden;
.swipe-it-amp .img-container
place: relative;
width: 220px;
peak: 250px;
padding: 10px;
.swipe-it-amp .img-container div
width: 90%;
peak: 90%;
box-sizing: border-box;
place: absolute;
border: 10px stable #ccc;
border-bottom-width: 30px;
background-size: cowl;
background-position: middle middle;
background-repeat: no-repeat;
.swipe-it-amp .flip
remodel: rotate(5deg);
.swipe-it-amp .btn
show: block;
width: 50px;
peak: 50px;
box-sizing: border-box;
border: 2px stable #333;
border-radius: 50%;
cursor: pointer;
.swipe-it-amp .btn:hover
background-color: #333;
.swipe-it-amp .like
background: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/like02_9CF.png) no-repeat middle 54%;
background-size: 50%;
.swipe-it-amp .dislike
background: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/dislike02_pHi.png) no-repeat middle middle;
background-size: 50%;
.swipe-it-amp .end result
text-align: middle;
padding: 20px;
@media solely display and (max-width: 600px)
.swipe-it-amp .img-container
width: 160px;
peak: 190px;
.swipe-it-amp .btn
width: 40px;
peak: 40px;
</fashion>
<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="flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/0f3561545ba54dac81427413014e5e29_8yw.jpeg);"></div>
<div fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/09fce28b8e864fe0a789ad18ea82d94a_Y1U.jpeg);"></div>
<div class="flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/08310c6c29e04188bf3c6c836757c65d_Hg6.jpeg);"></div>
<div fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div class="flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/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="end result">
<div class="result-text">
<h2 fashion="padding-bottom:20px">Nice alternative!</h2>
</div>
</div>
</div>
We now have a component with pictures and like/dislike buttons. In addition to that, playing cards with pictures are displayed instantly and are positioned on high of one another. Each second card is barely rotated. The rotation diploma is specified within the kinds within the type of .swipe-it-amp .flip remodel: rotate(5deg); .
Every card has its personal like/dislike buttons which might be all displayed now within the e mail enhancing space, however will probably be hidden from the recipient (they are going to see solely the buttons to the corresponding picture). Additionally, the endgame message is presently seen, however it will likely be proven after the sport is over.
“Dislike” button
Right here’s how the code for the “Dislike” button seems like.
Let’s talk about this code intimately:
- position=”button” performing as a button;
- tabindex=”1″ is a compulsory attribute if there’s a position=”button” units the sequence of receiving focus when switching between parts utilizing the Tab key;
- on=”faucet:AMP.setState( path: ‘left’, order: 1, img1: ‘dislike’)” this half contains “click on” occasion handler (on=”faucet:”), and create a number of variables;
- path is the primary variable that we use to find out which strategy to transfer the playing cards so the values will probably be ‘left’ or ‘proper’;
- order is a second variable that we use to put in writing the variety of the cardboard so as, which is presently displayed;
- img1 is a 3rd variable that’s devoted to every card (every one has its personal img variable with a devoted quantity) and used to put in writing which button was clicked, ‘dislike’ or ‘like’ after which ship this information to the server;
- [hidden]=”order>=1″ attribute hides the component when the situation is met (in our instance, if the order variable is larger than or equal to 1, which means when the 2nd card ought to be proven).
In addition to that this code included within the all different label tags however all of the numbers elevated by 1 for every button.
On this a part of code, hidden attribute hides the component by default. We have to show solely the primary button without delay, the remaining will probably be hidden.
<label [hidden]="order>=1" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 1, img1: 'dislike')"> </label>
<label hidden [hidden]="order!=1" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 2, img2: 'dislike')"> </label>
<label hidden [hidden]="order!=2" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 3, img3: 'dislike')"> </label>
<label hidden [hidden]="order!=3" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 4, img4: 'dislike')"> </label>
<label hidden [hidden]="order!=4" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 5, img5: 'dislike')"> </label>
“Like” button
The state of affairs with this button is much like the “Dislike” button, solely within the path variable, we specify the path ‘proper’ in order that the playing cards transfer within the different path, and within the variables img1, img2 we modify the worth to ‘like’:
For the primary button we now have the code [hidden]=”order>=1″ position=”button” tabindex=”1″ on=”faucet:AMP.setState( path: ‘proper’, order: 1, img1: ‘like’)”.
For the remaining we now have the identical code, in the meantime growing all numbers by 1 for every button.
Сards
Our buttons are already hidden, now we have to cover and animate the playing cards.
To do that, we add the next courses earlier than the closing </fashion> tag, so it can appear to be this:
.swipe-it-amp .cover
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
.swipe-it-amp .left
remodel: translate(-300px, 0);
.swipe-it-amp .proper
remodel: translate(300px, 0);
Within the .cover class, we added the transition-duration: 0.1s; property in order that the cardboard doesn’t cover immediately and the animation of the motion is seen.
After that, we’d like the circumstances for when so as to add these courses.
<div [class]="order>=5 ? 'flip cover '+path : 'flip'" class="flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/0f3561545ba54dac81427413014e5e29_8yw.jpeg);"></div>
<div [class]="order>=4 ? 'cover '+path : ''" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/09fce28b8e864fe0a789ad18ea82d94a_Y1U.jpeg);"></div>
<div [class]="order>=3 ? 'flip cover '+path : 'flip'" class="flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/08310c6c29e04188bf3c6c836757c65d_Hg6.jpeg);"></div>
<div [class]="order>=2 ? 'cover '+path : ''" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div [class]="order>=1 ? 'flip cover '+path : 'flip'" class="flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/001fe42d8cc040de9a9ff2bb349b4a5f.jpeg)"></div>
Observe that our playing cards are one on high of the opposite. Within the format, the component that’s decrease within the code will probably be within the foreground. That’s, our playing cards will probably be positioned within the format not 1,2,3 however 3,2,1.
We now have following attribute to the primary card (the one decrease within the code with the ‘flip’ class): [class]=”order>=1 ? ‘flip cover ‘+path : ‘flip'” which is an attribute that comprises the situation for displaying courses. If the worth of the order variable is larger than or equal to 1, we add the flip class, the cover class, and the worth of the path variable. In any other case, we’ll solely go away the flip class. When the recipient clicks on the ‘Dislike’ or ‘Like’ buttons, the order quantity is written to the order variable 1,2,3, and so forth. After this, we now have the examine and courses for card animation.
We now have the identical for the following ones, and the place there isn’t any flip class, we don’t add it. In addition to that, we enhance the quantity by 1 within the examine for the order variable. Because of this, for the second card it will likely be: [class]=”order>=2 ? ‘cover ‘+path : ””, for the third: [class]=”order>=3 ? ‘flip cover ‘+path : ‘flip'” and so forth.
Completion display
The subsequent step is creating circumstances for displaying a message on the finish of the sport as a substitute of the block with the sport. To do that, we add the attribute [hidden]=”order>=5″ to the div tag with the category “game-container”.
In addition to that, we now have the attribute hidden [hidden]=”order!=5″ to the div tag with the category “end result”.
On this code the quantity 5 is the utmost variety of playing cards, if we need to make extra playing cards (for instance 10) then we have to change it to 10.
To alter your completion message, simply sort your individual right here:
In the meantime, altering “Submit” display messages requires altering texts inside these code strains:
Gathering information
Our recreation is prepared, however the information we obtain from it’s not but despatched to the server. The complete code of the sport with information gathering will appear to be this:
<fashion amp-custom>
.swipe-it-amp .game-container
show: flex;
justify-content: space-around;
align-items: middle;
overflow: hidden;
.swipe-it-amp .img-container
place: relative;
width: 220px;
peak: 250px;
padding: 10px;
.swipe-it-amp .img-container div
width: 90%;
peak: 90%;
box-sizing: border-box;
place: absolute;
border: 10px stable #ccc;
border-bottom-width: 30px;
background-size: cowl;
background-position: middle middle;
background-repeat: no-repeat;
.swipe-it-amp .flip
remodel: rotate(5deg);
.swipe-it-amp .btn
show: block;
width: 50px;
peak: 50px;
box-sizing: border-box;
border: 2px stable #333;
border-radius: 50%;
cursor: pointer;
.swipe-it-amp .btn:hover
background-color: #333;
.swipe-it-amp .like
background: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/like02_9CF.png) no-repeat middle 54%;
background-size: 50%;
.swipe-it-amp .dislike
background: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/dislike02_pHi.png) no-repeat middle middle;
background-size: 50%;
.swipe-it-amp .end result
text-align: middle;
padding: 20px;
.swipe-it-amp .cover
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
.swipe-it-amp .left
remodel: translate(-300px, 0);
.swipe-it-amp .proper
remodel: translate(300px, 0);
.swipe-it-amp .submit-btn
border-radius: 0px;
font-size: 16px;
background: #151515;
padding: 10px 17px;
show: inline-block;
coloration: #ffffff;
text-align: middle;
cursor: pointer;
border: 0;
.swipe-it-amp .amp-form-submit-success .result-text
show: none;
@media solely display and (max-width: 600px)
.swipe-it-amp .img-container
width: 160px;
peak: 190px;
.swipe-it-amp .btn
width: 40px;
peak: 40px;
</fashion>
<div class="swipe-it-amp">
<kind technique="submit" action-xhr="https://amp.stripo.e mail/v1/kind/ytxje/alltests">
<enter sort="hidden" title="user_email" worth="%EMAIL%">
<enter sort="hidden" title="image-1" [value]="img1">
<enter sort="hidden" title="image-2" [value]="img2">
<enter sort="hidden" title="image-3" [value]="img3">
<enter sort="hidden" title="image-4" [value]="img4">
<enter sort="hidden" title="image-5" [value]="img5">
<div class="game-container" [hidden]="order>=5">
<div>
<label [hidden]="order>=1" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 1, img1: 'dislike')"> </label>
<label hidden [hidden]="order!=1" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 2, img2: 'dislike')"> </label>
<label hidden [hidden]="order!=2" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 3, img3: 'dislike')"> </label>
<label hidden [hidden]="order!=3" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 4, img4: 'dislike')"> </label>
<label hidden [hidden]="order!=4" class="btn dislike" position="button" tabindex="1" on="faucet:AMP.setState( path: 'left', order: 5, img5: 'dislike')"> </label>
</div>
<div class="img-container">
<div [class]="order>=5 ? 'flip cover '+path : 'flip'" class="flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/0f3561545ba54dac81427413014e5e29_8yw.jpeg);"></div>
<div [class]="order>=4 ? 'cover '+path : ''" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/09fce28b8e864fe0a789ad18ea82d94a_Y1U.jpeg);"></div>
<div [class]="order>=3 ? 'flip cover '+path : 'flip'" class="flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/08310c6c29e04188bf3c6c836757c65d_Hg6.jpeg);"></div>
<div [class]="order>=2 ? 'cover '+path : ''" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div [class]="order>=1 ? 'flip cover '+path : 'flip'" class="flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/001fe42d8cc040de9a9ff2bb349b4a5f.jpeg)"></div>
</div>
<div><label [hidden]="order>=1" class="btn like" position="button" tabindex="1" on="faucet:AMP.setState( path: 'proper', order: 1, img1: 'like')"> </label><label hidden [hidden]="order!=1" class="btn like" position="button" tabindex="1" on="faucet:AMP.setState( path: 'proper', order: 2, img2: 'like')"> </label><label hidden [hidden]="order!=2" class="btn like" position="button" tabindex="1" on="faucet:AMP.setState( path: 'proper', order: 3, img3: 'like')"> </label><label hidden [hidden]="order!=3" class="btn like" position="button" tabindex="1" on="faucet:AMP.setState( path: 'proper', order: 4, img4: 'like')"> </label><label hidden [hidden]="order!=4" class="btn like" position="button" tabindex="1" on="faucet:AMP.setState( path: 'proper', order: 5, img5: 'like')"> </label></div>
</div>
<div class="end result" hidden [hidden]="order!=5">
<div class="result-text">
<h2 fashion="padding-bottom:20px">Nice alternative!</h2>
<p><button class="submit-btn" sort="submit">Submit</button></p>
</div>
<div submit-success fashion="text-align: middle;">
<desk width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="middle">
<amp-img noloading format="fastened" src="https://zlnfb.stripocdn.e mail/content material/guids/CABINET_5c04f7244165e68be04ea8f8377d8b355c6e17ed075dee1cc1629a830524db96/photos/okicon01.png" alt="survey" width="168" peak="159"></amp-img>
</td>
</tr>
<tr>
<td align="middle" class="esd-block-text">
<h2 fashion="padding:5px 0 10px;font-size:30px;text-align:middle">Congratulations</h2>
</td>
</tr>
<tr>
<td align="middle" class="esd-block-text">
<p fashion="font-size:15px">Thanks for filling out our survey</p>
</td>
</tr>
<tr>
<td align="middle" fashion="padding-top:20px"><a href="https://stripo.e mail/" goal="_blank" fashion="border-radius: 0px; font-size: 12px; background: #151515; padding: 13px 17px;show: inline-block; font-weight: regular; font-style: regular; line-height: 120%; coloration: #ffffff; text-decoration: none; text-align: middle;" class="esd-frame-element esd-hover-element esdev-disable-select">Study Extra</a></td>
</tr>
</tbody>
</desk>
</div>
<div submit-error fashion="text-align: middle;">
<desk width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="middle" class="esd-block-text">
<h2 fashion="padding-bottom:10px;coloration: #ec382a;">Error</h2>
</td>
</tr>
<tr>
<td align="middle" class="esd-block-text">
<p fashion="font-size:15px">Please, strive once more later.</p>
</td>
</tr>
</tbody>
</desk>
</div>
</div>
</kind>
</div>
First we have to create a Knowledge Service the place all information will probably be saved.
As soon as it’s carried out, we add the next code earlier than the div tag with the category “game-container”:
<kind technique="submit" action-xhr="https://amp.stripo.e mail/v1/kind/ytxje/alltests">
<enter sort="hidden" title="user_email" worth="%EMAIL%">
<enter sort="hidden" title="image-1" [value]="img1">
<enter sort="hidden" title="image-2" [value]="img2">
<enter sort="hidden" title="image-3" [value]="img3">
<enter sort="hidden" title="image-4" [value]="img4">
<enter sort="hidden" title="image-5" [value]="img5">
In addition to that, we add the closing </kind> tag on the finish of the code, earlier than the final </div> tag:
Within the first enter tag (title=”user_email”), you could substitute the worth with your individual. The consumer’s title is substituted into this enter with the merge-tag of the e-mail service used. In our instance, the merge-tag is for the Yespo service. In your case, you could substitute it with the one utilized in your e mail service.
Essential word: Extra about merge-tags and how one can use them described within the particular article in our Assist middle.
After that, substitute the hyperlink within the action-xhr attribute of the kind tag with your individual.
Enter tags with the attribute title=”image-1″, title=”image-2″ and so on. correspond to the variety of playing cards. Within the attribute [value] specified a variable for every card, during which we wrote the worth “Dislike” or “Like”.
Now we have to add the “Submit” button and blocks with a message a couple of profitable submission or an error. To do that, we paste this code as a substitute of block with “end result” class:
<div class="end result" hidden [hidden]="order!=5">
<div class="result-text">
<h2 fashion="padding-bottom:20px">Nice alternative!</h2>
<p><button class="submit-btn" sort="submit">Submit</button></p>
</div>
<div submit-success fashion="text-align: middle;">
<desk width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="middle">
<amp-img noloading format="fastened" src="https://zlnfb.stripocdn.e mail/content material/guids/CABINET_5c04f7244165e68be04ea8f8377d8b355c6e17ed075dee1cc1629a830524db96/photos/okicon01.png" alt="survey" width="168" peak="159"></amp-img>
</td>
</tr>
<tr>
<td align="middle" class="esd-block-text">
<h2 fashion="padding:5px 0 10px;font-size:30px;text-align:middle">Congratulations</h2>
</td>
</tr>
<tr>
<td align="middle" class="esd-block-text">
<p fashion="font-size:15px">Thanks for filling out our survey</p>
</td>
</tr>
<tr>
<td align="middle" fashion="padding-top:20px"><a href="https://stripo.e mail/" goal="_blank" fashion="border-radius: 0px; font-size: 12px; background: #151515; padding: 13px 17px;show: inline-block; font-weight: regular; font-style: regular; line-height: 120%; coloration: #ffffff; text-decoration: none; text-align: middle;" class="esd-frame-element esd-hover-element esdev-disable-select">Study Extra</a></td>
</tr>
</tbody>
</desk>
</div>
<div submit-error fashion="text-align: middle;">
<desk width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="middle" class="esd-block-text">
<h2 fashion="padding-bottom:10px;coloration: #ec382a;">Error</h2>
</td>
</tr>
<tr>
<td align="middle" class="esd-block-text">
<p fashion="font-size:15px">Please, strive once more later.</p>
</td>
</tr>
</tbody>
</desk>
</div>
</div>
We’ve received the core, now it’s time to make it shiny with some kinds. Paste this code earlier than “swipe-it-amp” div.
.swipe-it-amp .submit-btn
border-radius: 0px;
font-size: 16px;
background: #151515;
padding: 10px 17px;
show: inline-block;
coloration: #ffffff;
text-align: middle;
cursor: pointer;
border: 0;
.swipe-it-amp .amp-form-submit-success .result-text
show: none;
Essential word: div with the submit-success attribute seems when the info is shipped efficiently, and the submit-error when an error happens. In the meantime, .submit-btn is used to design the “submit” button.
This button is answerable for submitting the recipient’s solutions and sending them to your Knowledge Service.
Customizing kinds
You may tweak recreation seems to your liking by altering kinds within the code.
Like and dislike buttons
You may change how “Like” and “Dislike” buttons will look by changing hyperlinks to our icons to your individual:
In addition to that, you possibly can change border coloration for buttons. To do that, there’s a btn class within the code during which you could change the background coloration worth.
As a closing contact, you should utilize the :hover pseudo-class to specify the background coloration when the mouse hovers over the component.
Essential word: In our instance, the icons are white with a black body. To alter their coloration, you could add one other picture. The picture dimension ought to be 2 occasions bigger than the icon dimension. In our case, the icon is 50×50 px and the picture is 100×100 px.
Playing cards
Now let’s speak about altering kinds for playing cards. To make your playing cards match your preferences, you possibly can tweak this parameter — dimension, coloration, and border sort — to your individual values.
In the meantime, altering photos in playing cards requires altering hyperlinks to those photos on this a part of the code:
You may create the design of your individual by altering all these parts. So experiment with them to create the distinctive and suiting recreation in your e mail advertising and marketing wants.
Essential word: Altering kinds for the interactive HTML model is similar to the information above.
Interactive HTML model
Now we’re transferring to an interactive HTML model. Work on this model begins with one other empty construction with the setting “Embody in HTML” utilized. Make sure you lcoate it proper below the construction with the AMP model.
After that, we additionally insert an “HTML” block into it and add the next code:
<fashion>
.swipe-it-html .game-container
show: flex;
justify-content: space-around;
align-items: middle;
overflow: hidden;
.swipe-it-html .img-container
place: relative;
width: 220px;
peak: 250px;
padding: 10px;
.swipe-it-html .img-container div
width: 90%;
peak: 90%;
box-sizing: border-box;
place: absolute;
border: 10px stable #ccc;
border-bottom-width: 30px;
background-size: cowl;
background-position: middle middle;
background-repeat: no-repeat;
.swipe-it-html .flip
remodel: rotate(5deg);
.swipe-it-html .btn
show: block;
width: 50px;
peak: 50px;
box-sizing: border-box;
border: 2px stable #333;
border-radius: 50%;
cursor: pointer;
.swipe-it-html .btn:hover
background-color: #333;
.swipe-it-html .like
show: none;
background: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/like02_9CF.png) no-repeat middle 54%;
background-size: 50%;
.swipe-it-html .dislike
show: none;
background: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/dislike02_pHi.png) no-repeat middle middle;
background-size: 50%;
.swipe-it-html .end result
text-align: middle;
padding: 20px;
show: none;
.swipe-it-html .submit-btn
border-radius: 0px;
font-size: 16px;
background: #151515;
padding: 10px 17px;
show: inline-block;
coloration: #ffffff;
text-align: middle;
cursor: pointer;
border: 0;
@media solely display and (max-width: 600px)
.swipe-it-html .img-container
width: 160px;
peak: 190px;
.swipe-it-html .btn
width: 40px;
peak: 40px;
.input-img-1:checked~.input-img-2:checked~.input-img-3:checked~.input-img-4:checked~.input-img-5:checked~.game-container
show: none;
.input-img-1:checked~.input-img-2:checked~.input-img-3:checked~.input-img-4:checked~.input-img-5:checked~.end result
show: 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
show: 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
show: none !necessary;
#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
remodel: 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
remodel: translate(300px, 0);
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
</fashion>
<div class="swipe-it-html">
<kind technique="get" motion="https://amp.stripo.e mail/v1/kind/ytxje/alltests" goal="_blank">
<enter sort="hidden" title="user_email" worth="%EMAIL%">
<enter sort="radio" class="input-img-0" title="image-1" checked fashion="show:none">
<enter sort="radio" class="input-img-1" id="input-dislike-1" title="image-1" worth="dislike" fashion="show:none">
<enter sort="radio" class="input-img-1" id="input-like-1" title="image-1" worth="like" fashion="show:none">
<enter sort="radio" class="input-img-2" id="input-dislike-2" title="image-2" worth="dislike" fashion="show:none">
<enter sort="radio" class="input-img-2" id="input-like-2" title="image-2" worth="like" fashion="show:none">
<enter sort="radio" class="input-img-3" id="input-dislike-3" title="image-3" worth="dislike" fashion="show:none">
<enter sort="radio" class="input-img-3" id="input-like-3" title="image-3" worth="like" fashion="show:none">
<enter sort="radio" class="input-img-4" id="input-dislike-4" title="image-4" worth="dislike" fashion="show:none">
<enter sort="radio" class="input-img-4" id="input-like-4" title="image-4" worth="like" fashion="show:none">
<enter sort="radio" class="input-img-5" id="input-dislike-5" title="image-5" worth="dislike" fashion="show:none">
<enter sort="radio" class="input-img-5" id="input-like-5" title="image-5" worth="like" fashion="show: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 flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/0f3561545ba54dac81427413014e5e29_8yw.jpeg);"></div>
<div class="image-4" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/09fce28b8e864fe0a789ad18ea82d94a_Y1U.jpeg);"></div>
<div class="image-3 flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/08310c6c29e04188bf3c6c836757c65d_Hg6.jpeg);"></div>
<div class="image-2" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div class="image-1 flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/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="end result">
<div class="result-text">
<h2 fashion="padding-bottom:20px">Nice alternative!</h2>
<p><button class="submit-btn" sort="submit">Submit</button></p>
</div>
</div>
</kind>
</div>
Gathering information
To ensure that information gathering to work on this model, you want a hyperlink within the motion attribute of the kind tag to your information Service, which was created for the AMP model.
Within the first enter tag (title=”user_email), you additionally want to exchange the worth with your individual merge-tag , identical to within the case with the AMP model.
The interactive HTML model has an analogous construction, however the “Dislike” and “Like” buttons are sure to the enter tags. Due to this binding, we are able to add transition and conceal the blocks utilizing the pseudo-class :checked.
The variety of enter tags should match the variety of “Dislike” and “Like” buttons, and one enter “input-img-0” with the checked attribute by default, is required to show the very first buttons and the cardboard.
Customizing kinds
Now, a couple of phrases about kinds for interactive HTML model.
Essential word: If the variety of buttons adjustments, then the kinds additionally have to be modified.
Here is what the kinds for displaying and hiding the “Dislike” and “Like” buttons appear to be:
Right here we now have kinds for card transition:
The final however not least, we now have kinds that cover the sport on the finish and present a message:
Fallback model
The final cease of our information is the fallback model. The format of this model is visually much like our interactive variations however with out interactivity. Because of this, clicking on parts will result in the net model of the e-mail
We proceed to work with the interactive HTML block that we made above and insert the next code between the </fashion> tag and <div class=”swipe-it-html”>.
<!--[if !mso]><!--><enter sort="checkbox" id="fallback_ctrl" class="fallback_ctrl" fashion="show:none !necessary;mso-hide:all;" checked>
<!--<![endif]-->
<!-- FALLBACK -->
<div id="fallback" class="fallback">
<desk width="100%">
<tbody>
<tr align="middle">
<td width="20%"><a category="btn" goal="_blank" href="https://viewstripo.e mail/55c0629f-70d1-42af-a22d-0760504d46461723026118684?sort=amphtml"><img src="https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/dislike02_pHi.png" alt fashion="show: block;" width="25" peak="25"></a></td>
<td width="60%"><a goal="_blank" fashion="show:inline-block;border: 10px stable #ccc;border-bottom-width: 30px;" href="https://viewstripo.e mail/55c0629f-70d1-42af-a22d-0760504d46461723026118684?sort=amphtml"><img class="adapt-img" src="https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/001fe42d8cc040de9a9ff2bb349b4a5f_eDR.jpg" alt fashion="show: block;" width="200" peak="210"></a></td>
<td width="20%"><a category="btn" goal="_blank" href="https://viewstripo.e mail/55c0629f-70d1-42af-a22d-0760504d46461723026118684?sort=amphtml"><img src="https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/like02_9CF.png" alt fashion="show: block;" width="25" peak="25"></a></td>
</tr>
</tbody>
</desk>
</div><!-- /FALLBACK -->
<!--[if !mso]><!-->
<!-- INTERACTIVE ELEMENT -->
<div class="container" fashion="mso-hide:all;show:none;">
In addition to that, on the very finish of the code, you could insert one other piece of code:
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
To make issues work correctly and ship the recipient to the precise net web page when clicking on the fallback parts, it’s best to change hyperlinks to your individual net model right here:
Subsequent, we work with kinds to indicate solely the model appropriate for the mail consumer and make the buttons look the identical as within the interactive model. We add the kinds themselves to the fashion tag:
.fallback .btn
show: block;
border: 2px stable #333;
border-radius: 50%;
padding: 12px;
width: 25px;
peak: 25px;
.fallback .btn:hover
background-color: #333;
@media solely display and (max-width: 600px)
.fallback .btn
padding: 7px;
/* --- */
@media display and (-webkit-min-device-pixel-ratio: 0)
enter.fallback_ctrl:checked~.container
show: block !necessary;
enter.fallback_ctrl:checked~#fallback
show: none !necessary;
[owa] .container
show: none !necessary;
[class~="x_container"]
show: none !necessary;
[id~="x_fallback"]
show: block !necessary;
@media display and (max-width: 600px)
physique[data-outlook-cycle] #fallback
show: block !necessary;
physique[data-outlook-cycle] .container
show: none !necessary;
Let’s cease for a bit to debate necessary code parts. We now have a particular enter:
We use it to indicate or cover the fallback through kinds. It’s within the feedback <!–[if !mso]><!–> … <!–<![endif]–> to verify it’s hidden within the Outlook Desktop consumer.
As well as, we now have <div id=”fallback” class=”fallback”></div> that comprises the complete format of our fallback model. It ought to have a easy, tabular format appropriate for Outlook. In our instance, this can be a desk within the type of tabs with hyperlinks that result in the net model. You may make your individual model, for instance, in order that the contents of the tabs are displayed one below the opposite with out going to the net model. The primary factor is to make use of a format that’s comprehensible for Outlook.
This code is answerable for the looks of the “Dislike” and “Like” buttons:
The kinds beneath are answerable for hiding and displaying the fallback model. In the event you take away them or remark them out, the fallback model will probably be seen within the enhancing space in addition to preview mode, so you possibly can regulate its design to the specified kind (by way of the code). However do not forget to return these kinds again earlier than sending the e-mail.
These kinds don’t have clear guidelines for every e mail consumer, however there are a set of hacks that can be utilized to regulate the show:
- kinds that begin with [owa] are used for Outlook;
- the [class~=”x_container”] kinds are wanted for Outlook In case [owa] doesn’t work;
- physique[data-outlook-cycle] kinds wanted for Outlook on iOS and Android cellular units;
- mso-hide:all; is used for Outlook.com.
The complete code
Right here is the fallback code of the sport, together with the interactive HTML half and the fallback model:
<fashion>
.swipe-it-html .game-container
show: flex;
justify-content: space-around;
align-items: middle;
overflow: hidden;
.swipe-it-html .img-container
place: relative;
width: 220px;
peak: 250px;
padding: 10px;
.swipe-it-html .img-container div
width: 90%;
peak: 90%;
box-sizing: border-box;
place: absolute;
border: 10px stable #ccc;
border-bottom-width: 30px;
background-size: cowl;
background-position: middle middle;
background-repeat: no-repeat;
.swipe-it-html .flip
remodel: rotate(5deg);
.swipe-it-html .btn
show: block;
width: 50px;
peak: 50px;
box-sizing: border-box;
border: 2px stable #333;
border-radius: 50%;
cursor: pointer;
.swipe-it-html .btn:hover
background-color: #333;
.swipe-it-html .like
show: none;
background: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/like02_9CF.png) no-repeat middle 54%;
background-size: 50%;
.swipe-it-html .dislike
show: none;
background: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/dislike02_pHi.png) no-repeat middle middle;
background-size: 50%;
.swipe-it-html .end result
text-align: middle;
padding: 20px;
show: none;
.swipe-it-html .submit-btn
border-radius: 0px;
font-size: 16px;
background: #151515;
padding: 10px 17px;
show: inline-block;
coloration: #ffffff;
text-align: middle;
cursor: pointer;
border: 0;
@media solely display and (max-width: 600px)
.swipe-it-html .img-container
width: 160px;
peak: 190px;
.swipe-it-html .btn
width: 40px;
peak: 40px;
.input-img-1:checked~.input-img-2:checked~.input-img-3:checked~.input-img-4:checked~.input-img-5:checked~.game-container
show: none;
.input-img-1:checked~.input-img-2:checked~.input-img-3:checked~.input-img-4:checked~.input-img-5:checked~.end result
show: 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
show: 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
show: none !necessary;
#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
remodel: 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
remodel: translate(300px, 0);
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
.fallback .btn
show: block;
border: 2px stable #333;
border-radius: 50%;
padding: 12px;
width: 25px;
peak: 25px;
.fallback .btn:hover
background-color: #333;
@media solely display and (max-width: 600px)
.fallback .btn
padding: 7px;
/* --- */
@media display and (-webkit-min-device-pixel-ratio: 0)
enter.fallback_ctrl:checked~.container
show: block !necessary;
enter.fallback_ctrl:checked~#fallback
show: none !necessary;
[owa] .container
show: none !necessary;
[class~="x_container"]
show: none !necessary;
[id~="x_fallback"]
show: block !necessary;
@media display and (max-width: 600px)
physique[data-outlook-cycle] #fallback
show: block !necessary;
physique[data-outlook-cycle] .container
show: none !necessary;
</fashion>
<!--[if !mso]><!--><enter sort="checkbox" id="fallback_ctrl" class="fallback_ctrl" fashion="show:none !necessary;mso-hide:all;" checked>
<!--<![endif]-->
<!-- FALLBACK -->
<div id="fallback" class="fallback">
<desk width="100%">
<tbody>
<tr align="middle">
<td width="20%"><a category="btn" goal="_blank" href="https://viewstripo.e mail/55c0629f-70d1-42af-a22d-0760504d46461723026118684?sort=amphtml"><img src="https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/dislike02_pHi.png" alt fashion="show: block;" width="25" peak="25"></a></td>
<td width="60%"><a goal="_blank" fashion="show:inline-block;border: 10px stable #ccc;border-bottom-width: 30px;" href="https://viewstripo.e mail/55c0629f-70d1-42af-a22d-0760504d46461723026118684?sort=amphtml"><img class="adapt-img" src="https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/001fe42d8cc040de9a9ff2bb349b4a5f_eDR.jpg" alt fashion="show: block;" width="200" peak="210"></a></td>
<td width="20%"><a category="btn" goal="_blank" href="https://viewstripo.e mail/55c0629f-70d1-42af-a22d-0760504d46461723026118684?sort=amphtml"><img src="https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/like02_9CF.png" alt fashion="show: block;" width="25" peak="25"></a></td>
</tr>
</tbody>
</desk>
</div><!-- /FALLBACK -->
<!--[if !mso]><!-->
<!-- INTERACTIVE ELEMENT -->
<div class="container" fashion="mso-hide:all;show:none;">
<div class="swipe-it-html">
<kind technique="get" motion="https://amp.stripo.e mail/v1/kind/ytxje/alltests" goal="_blank">
<enter sort="hidden" title="user_email" worth="%EMAIL%">
<enter sort="radio" class="input-img-0" title="image-1" checked fashion="show:none">
<enter sort="radio" class="input-img-1" id="input-dislike-1" title="image-1" worth="dislike" fashion="show:none">
<enter sort="radio" class="input-img-1" id="input-like-1" title="image-1" worth="like" fashion="show:none">
<enter sort="radio" class="input-img-2" id="input-dislike-2" title="image-2" worth="dislike" fashion="show:none">
<enter sort="radio" class="input-img-2" id="input-like-2" title="image-2" worth="like" fashion="show:none">
<enter sort="radio" class="input-img-3" id="input-dislike-3" title="image-3" worth="dislike" fashion="show:none">
<enter sort="radio" class="input-img-3" id="input-like-3" title="image-3" worth="like" fashion="show:none">
<enter sort="radio" class="input-img-4" id="input-dislike-4" title="image-4" worth="dislike" fashion="show:none">
<enter sort="radio" class="input-img-4" id="input-like-4" title="image-4" worth="like" fashion="show:none">
<enter sort="radio" class="input-img-5" id="input-dislike-5" title="image-5" worth="dislike" fashion="show:none">
<enter sort="radio" class="input-img-5" id="input-like-5" title="image-5" worth="like" fashion="show: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 flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/0f3561545ba54dac81427413014e5e29_8yw.jpeg);"></div>
<div class="image-4" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/09fce28b8e864fe0a789ad18ea82d94a_Y1U.jpeg);"></div>
<div class="image-3 flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_ae8966dae28bde57b03cb58d7cf4ccc98e9a70aefdbfb6ab39fb9522001b990b/photos/08310c6c29e04188bf3c6c836757c65d_Hg6.jpeg);"></div>
<div class="image-2" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div class="image-1 flip" fashion="background-image:url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/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="end result">
<div class="result-text">
<h2 fashion="padding-bottom:20px">Nice alternative!</h2>
<p><button class="submit-btn" sort="submit">Submit</button></p>
</div>
</div>
</kind>
</div>
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
Wrapping up
New interactive mechanics aren’t solely a strategy to distinguish your emails from opponents, but additionally to shock your recipients by providing a extra partaking strategy to work together with the already acquainted e mail newsletters. We hope that this information will develop into a dependable help for you in creating distinctive e mail newsletters that may delight your recipients and delight you with improved efficiency of your e mail campaigns.
Create distinctive emails with Stripo
