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 fashionable 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 sport 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;
- sport grant a chance to provide recipients particular presents relying on what items they’re “appreciated”;
- and rather more.
On this article, we are going to present you intimately how one can create a full-fledged sport that may embody:
- AMP model of the sport with 5 photos;
- interactive HTML model with the identical 5 photos;
- fallback model for e-mail purchasers that don’t help interactivity.
Let’s dive proper in.
Vital observe: On cell units, this sport requires clicking on buttons, similar to on the desktop model.
AMP model
Let’s begin with the complete 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: heart;
overflow: hidden;
}
.swipe-it-amp .img-container {
place: relative;
width: 220px;
top: 250px;
padding: 10px;
}
.swipe-it-amp .img-container div {
width: 90%;
top: 90%;
box-sizing: border-box;
place: absolute;
border: 10px stable #ccc;
border-bottom-width: 30px;
background-size: cowl;
background-position: heart heart;
background-repeat: no-repeat;
}
.swipe-it-amp .flip {
rework: rotate(5deg);
}
.swipe-it-amp .btn {
show: block;
width: 50px;
top: 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 heart 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 heart heart;
background-size: 50%;
}
.swipe-it-amp .consequence {
text-align: heart;
padding: 20px;
}
.swipe-it-amp .conceal {
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
}
.swipe-it-amp .left {
rework: translate(-300px, 0);
}
.swipe-it-amp .proper {
rework: translate(300px, 0);
}
@media solely display and (max-width: 600px) {
.swipe-it-amp .img-container {
width: 160px;
top: 190px;
}
.swipe-it-amp .btn {
width: 40px;
top: 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 conceal '+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 ? 'conceal '+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 conceal '+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 ? 'conceal '+path : ''" fashion="background-image:url(https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div [class]="order>=1 ? 'flip conceal '+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="consequence" hidden [hidden]="order!=5">
<div class="result-text">
<h2 fashion="padding-bottom:20px">Nice selection!</h2>
</div>
</div>
</div>Now, to the reason. Creating your sport begins with these steps:
- add an empty construction to the e-mail;
- choose “Embrace 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: heart;
overflow: hidden;
}
.swipe-it-amp .img-container {
place: relative;
width: 220px;
top: 250px;
padding: 10px;
}
.swipe-it-amp .img-container div {
width: 90%;
top: 90%;
box-sizing: border-box;
place: absolute;
border: 10px stable #ccc;
border-bottom-width: 30px;
background-size: cowl;
background-position: heart heart;
background-repeat: no-repeat;
}
.swipe-it-amp .flip {
rework: rotate(5deg);
}
.swipe-it-amp .btn {
show: block;
width: 50px;
top: 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 heart 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 heart heart;
background-size: 50%;
}
.swipe-it-amp .consequence {
text-align: heart;
padding: 20px;
}
@media solely display and (max-width: 600px) {
.swipe-it-amp .img-container {
width: 160px;
top: 190px;
}
.swipe-it-amp .btn {
width: 40px;
top: 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="consequence">
<div class="result-text">
<h2 fashion="padding-bottom:20px">Nice selection!</h2>
</div>
</div>
</div>
We now have a component with photographs and like/dislike buttons. In addition to that, playing cards with photographs are displayed instantly and are situated on prime of one another. Each second card is barely rotated. The rotation diploma is specified within the types within the type of .swipe-it-amp .flip { rework: 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 at present 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 to be 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 method 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 at present 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 knowledge to the server;
- [hidden]=”order>=1″ attribute hides the component when the situation is met (in our instance, if the order variable is bigger than or equal to 1, that means when the 2nd card must 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 directly, 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 scenario 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’ve the code [hidden]=”order>=1″ position=”button” tabindex=”1″ on=”faucet:AMP.setState({ path: ‘proper’, order: 1, img1: ‘like’})”.
For the remaining we’ve the identical code, in the meantime rising all numbers by 1 for every button.
Сards
Our buttons are already hidden, now we have to conceal and animate the playing cards.
To do that, we add the next lessons earlier than the closing </fashion> tag, so it is going to appear to be this:
.swipe-it-amp .conceal {
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
}
.swipe-it-amp .left {
rework: translate(-300px, 0);
}
.swipe-it-amp .proper {
rework: translate(300px, 0);
}
Within the .conceal class, we added the transition-duration: 0.1s; property in order that the cardboard doesn’t conceal immediately and the animation of the motion is seen.
After that, we’d like the circumstances for when so as to add these lessons.
<div [class]="order>=5 ? 'flip conceal '+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 ? 'conceal '+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 conceal '+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 ? 'conceal '+path : ''" fashion="background-image:url(https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div [class]="order>=1 ? 'flip conceal '+path : 'flip'" class="flip" fashion="background-image:url(https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/001fe42d8cc040de9a9ff2bb349b4a5f.jpeg)"></div>Notice that our playing cards are one on prime of the opposite. Within the structure, the component that’s decrease within the code will probably be within the foreground. That’s, our playing cards will probably be situated within the structure 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 conceal ‘+path : ‘flip'” which is an attribute that incorporates the situation for displaying lessons. If the worth of the order variable is bigger than or equal to 1, we add the flip class, the conceal class, and the worth of the path variable. In any other case, we are going to 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’ve the verify and lessons 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 improve the quantity by 1 within the verify for the order variable. Because of this, for the second card it will likely be: [class]=”order>=2 ? ‘conceal ‘+path : ””, for the third: [class]=”order>=3 ? ‘flip conceal ‘+path : ‘flip'” and so forth.
Completion display
The following 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’ve the attribute hidden [hidden]=”order!=5″ to the div tag with the category “consequence”.
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 vary your completion message, simply kind your personal right here:
In the meantime, altering “Submit” display messages requires altering texts inside these code traces:
Gathering knowledge
Our sport is prepared, however the knowledge we obtain from it’s not but despatched to the server. The complete code of the sport with knowledge gathering will appear to be this:
<fashion amp-custom>
.swipe-it-amp .game-container {
show: flex;
justify-content: space-around;
align-items: heart;
overflow: hidden;
}
.swipe-it-amp .img-container {
place: relative;
width: 220px;
top: 250px;
padding: 10px;
}
.swipe-it-amp .img-container div {
width: 90%;
top: 90%;
box-sizing: border-box;
place: absolute;
border: 10px stable #ccc;
border-bottom-width: 30px;
background-size: cowl;
background-position: heart heart;
background-repeat: no-repeat;
}
.swipe-it-amp .flip {
rework: rotate(5deg);
}
.swipe-it-amp .btn {
show: block;
width: 50px;
top: 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 heart 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 heart heart;
background-size: 50%;
}
.swipe-it-amp .consequence {
text-align: heart;
padding: 20px;
}
.swipe-it-amp .conceal {
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
}
.swipe-it-amp .left {
rework: translate(-300px, 0);
}
.swipe-it-amp .proper {
rework: translate(300px, 0);
}
.swipe-it-amp .submit-btn {
border-radius: 0px;
font-size: 16px;
background: #151515;
padding: 10px 17px;
show: inline-block;
shade: #ffffff;
text-align: heart;
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;
top: 190px;
}
.swipe-it-amp .btn {
width: 40px;
top: 40px;
}
}
</fashion>
<div class="swipe-it-amp">
<kind methodology="publish" action-xhr="https://amp.stripo.e-mail/v1/kind/ytxje/alltests">
<enter kind="hidden" title="user_email" worth="%EMAIL%">
<enter kind="hidden" title="image-1" [value]="img1">
<enter kind="hidden" title="image-2" [value]="img2">
<enter kind="hidden" title="image-3" [value]="img3">
<enter kind="hidden" title="image-4" [value]="img4">
<enter kind="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 conceal '+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 ? 'conceal '+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 conceal '+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 ? 'conceal '+path : ''" fashion="background-image:url(https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/019a8993af7b4c32a48c4616560ecfc2.jpeg)"></div>
<div [class]="order>=1 ? 'flip conceal '+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="consequence" hidden [hidden]="order!=5">
<div class="result-text">
<h2 fashion="padding-bottom:20px">Nice selection!</h2>
<p><button class="submit-btn" kind="submit">Submit</button></p>
</div>
<div submit-success fashion="text-align: heart;">
<desk width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="heart">
<amp-img noloading structure="fastened" src="https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_5c04f7244165e68be04ea8f8377d8b355c6e17ed075dee1cc1629a830524db96/photos/okicon01.png" alt="survey" width="168" top="159"></amp-img>
</td>
</tr>
<tr>
<td align="heart" class="esd-block-text">
<h2 fashion="padding:5px 0 10px;font-size:30px;text-align:heart">Congratulations</h2>
</td>
</tr>
<tr>
<td align="heart" class="esd-block-text">
<p fashion="font-size:15px">Thanks for filling out our survey</p>
</td>
</tr>
<tr>
<td align="heart" 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%; shade: #ffffff; text-decoration: none; text-align: heart;" class="esd-frame-element esd-hover-element esdev-disable-select">Be taught Extra</a></td>
</tr>
</tbody>
</desk>
</div>
<div submit-error fashion="text-align: heart;">
<desk width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="heart" class="esd-block-text">
<h2 fashion="padding-bottom:10px;shade: #ec382a;">Error</h2>
</td>
</tr>
<tr>
<td align="heart" 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 Information Service the place all knowledge will probably be saved.
As soon as it’s completed, we add the next code earlier than the div tag with the category “game-container”:
<kind methodology="publish" action-xhr="https://amp.stripo.e-mail/v1/kind/ytxje/alltests">
<enter kind="hidden" title="user_email" worth="%EMAIL%">
<enter kind="hidden" title="image-1" [value]="img1">
<enter kind="hidden" title="image-2" [value]="img2">
<enter kind="hidden" title="image-3" [value]="img3">
<enter kind="hidden" title="image-4" [value]="img4">
<enter kind="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”), it is advisable to substitute the worth with your personal. 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, it is advisable to substitute it with the one utilized in your e-mail service.
Vital observe: Extra about merge-tags and how one can use them described within the particular article in our Assist heart.
After that, substitute the hyperlink within the action-xhr attribute of the kind tag with your personal.
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, wherein 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 “consequence” class:
<div class="consequence" hidden [hidden]="order!=5">
<div class="result-text">
<h2 fashion="padding-bottom:20px">Nice selection!</h2>
<p><button class="submit-btn" kind="submit">Submit</button></p>
</div>
<div submit-success fashion="text-align: heart;">
<desk width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="heart">
<amp-img noloading structure="fastened" src="https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_5c04f7244165e68be04ea8f8377d8b355c6e17ed075dee1cc1629a830524db96/photos/okicon01.png" alt="survey" width="168" top="159"></amp-img>
</td>
</tr>
<tr>
<td align="heart" class="esd-block-text">
<h2 fashion="padding:5px 0 10px;font-size:30px;text-align:heart">Congratulations</h2>
</td>
</tr>
<tr>
<td align="heart" class="esd-block-text">
<p fashion="font-size:15px">Thanks for filling out our survey</p>
</td>
</tr>
<tr>
<td align="heart" 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%; shade: #ffffff; text-decoration: none; text-align: heart;" class="esd-frame-element esd-hover-element esdev-disable-select">Be taught Extra</a></td>
</tr>
</tbody>
</desk>
</div>
<div submit-error fashion="text-align: heart;">
<desk width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="heart" class="esd-block-text">
<h2 fashion="padding-bottom:10px;shade: #ec382a;">Error</h2>
</td>
</tr>
<tr>
<td align="heart" 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 types. 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;
shade: #ffffff;
text-align: heart;
cursor: pointer;
border: 0;
}
.swipe-it-amp .amp-form-submit-success .result-text {
show: none;
}
Vital observe: 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 liable for submitting the recipient’s solutions and sending them to your Information Service.
Customizing types
You possibly can tweak sport seems to be to your liking by altering types within the code.
Like and dislike buttons
You possibly can change how “Like” and “Dislike” buttons will look by changing hyperlinks to our icons to your personal:
In addition to that, you’ll be able to change border shade for buttons. To do that, there’s a btn class within the code wherein it is advisable to change the background shade worth.
As a remaining contact, you need to use the :hover pseudo-class to specify the background shade when the mouse hovers over the component.
Vital observe: In our instance, the icons are white with a black body. To vary their shade, it is advisable to add one other picture. The picture dimension must be 2 instances 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 types for playing cards. To make your playing cards match your preferences, you’ll be able to tweak this parameter — dimension, shade, and border kind — to your personal values.
In the meantime, altering photos in playing cards requires altering hyperlinks to those photos on this a part of the code:
You possibly can create the design of your personal by altering all these parts. So experiment with them to create the distinctive and suiting sport in your e-mail advertising and marketing wants.
Vital observe: Altering types for the interactive HTML model is equivalent to the information above.
Interactive HTML model
Now we’re shifting to an interactive HTML model. Work on this model begins with one other empty construction with the setting “Embrace in HTML” utilized. Make sure to 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: heart;
overflow: hidden;
}
.swipe-it-html .img-container {
place: relative;
width: 220px;
top: 250px;
padding: 10px;
}
.swipe-it-html .img-container div {
width: 90%;
top: 90%;
box-sizing: border-box;
place: absolute;
border: 10px stable #ccc;
border-bottom-width: 30px;
background-size: cowl;
background-position: heart heart;
background-repeat: no-repeat;
}
.swipe-it-html .flip {
rework: rotate(5deg);
}
.swipe-it-html .btn {
show: block;
width: 50px;
top: 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 heart 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 heart heart;
background-size: 50%;
}
.swipe-it-html .consequence {
text-align: heart;
padding: 20px;
show: none;
}
.swipe-it-html .submit-btn {
border-radius: 0px;
font-size: 16px;
background: #151515;
padding: 10px 17px;
show: inline-block;
shade: #ffffff;
text-align: heart;
cursor: pointer;
border: 0;
}
@media solely display and (max-width: 600px) {
.swipe-it-html .img-container {
width: 160px;
top: 190px;
}
.swipe-it-html .btn {
width: 40px;
top: 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~.consequence {
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 !vital;
}
#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 {
rework: 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 {
rework: translate(300px, 0);
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
visibility: hidden;
}
</fashion>
<div class="swipe-it-html">
<kind methodology="get" motion="https://amp.stripo.e-mail/v1/kind/ytxje/alltests" goal="_blank">
<enter kind="hidden" title="user_email" worth="%EMAIL%">
<enter kind="radio" class="input-img-0" title="image-1" checked fashion="show:none">
<enter kind="radio" class="input-img-1" id="input-dislike-1" title="image-1" worth="dislike" fashion="show:none">
<enter kind="radio" class="input-img-1" id="input-like-1" title="image-1" worth="like" fashion="show:none">
<enter kind="radio" class="input-img-2" id="input-dislike-2" title="image-2" worth="dislike" fashion="show:none">
<enter kind="radio" class="input-img-2" id="input-like-2" title="image-2" worth="like" fashion="show:none">
<enter kind="radio" class="input-img-3" id="input-dislike-3" title="image-3" worth="dislike" fashion="show:none">
<enter kind="radio" class="input-img-3" id="input-like-3" title="image-3" worth="like" fashion="show:none">
<enter kind="radio" class="input-img-4" id="input-dislike-4" title="image-4" worth="dislike" fashion="show:none">
<enter kind="radio" class="input-img-4" id="input-like-4" title="image-4" worth="like" fashion="show:none">
<enter kind="radio" class="input-img-5" id="input-dislike-5" title="image-5" worth="dislike" fashion="show:none">
<enter kind="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="consequence">
<div class="result-text">
<h2 fashion="padding-bottom:20px">Nice selection!</h2>
<p><button class="submit-btn" kind="submit">Submit</button></p>
</div>
</div>
</kind>
</div>Gathering knowledge
To ensure that knowledge gathering to work on this model, you want a hyperlink within the motion attribute of the kind tag to your knowledge Service, which was created for the AMP model.
Within the first enter tag (title=”user_email), you additionally want to switch the worth with your personal merge-tag , similar 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 types
Now, just a few phrases about types for interactive HTML model.
Vital observe: If the variety of buttons adjustments, then the types additionally should be modified.
Here is what the types for exhibiting and hiding the “Dislike” and “Like” buttons appear to be:
Right here we’ve types for card transition:
The final however not least, we’ve types that conceal the sport on the finish and present a message:
Fallback model
The final cease of our information is the fallback model. The structure of this model is visually much like our interactive variations however with out interactivity. Because of this, clicking on parts will result in the online 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 kind="checkbox" id="fallback_ctrl" class="fallback_ctrl" fashion="show:none !vital;mso-hide:all;" checked>
<!--<![endif]-->
<!-- FALLBACK -->
<div id="fallback" class="fallback">
<desk width="100%">
<tbody>
<tr align="heart">
<td width="20%"><a category="btn" goal="_blank" href="https://viewstripo.e-mail/55c0629f-70d1-42af-a22d-0760504d46461723026118684?kind=amphtml"><img src="https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/dislike02_pHi.png" alt fashion="show: block;" width="25" top="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?kind=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" top="210"></a></td>
<td width="20%"><a category="btn" goal="_blank" href="https://viewstripo.e-mail/55c0629f-70d1-42af-a22d-0760504d46461723026118684?kind=amphtml"><img src="https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/like02_9CF.png" alt fashion="show: block;" width="25" top="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, it is advisable to insert one other piece of code:
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
To make issues work correctly and ship the recipient to the best internet web page when clicking on the fallback parts, you must change hyperlinks to your personal internet model right here:
Subsequent, we work with types to point out solely the model appropriate for the mail shopper and make the buttons look the identical as within the interactive model. We add the types themselves to the fashion tag:
.fallback .btn {
show: block;
border: 2px stable #333;
border-radius: 50%;
padding: 12px;
width: 25px;
top: 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 !vital;
}
enter.fallback_ctrl:checked~#fallback {
show: none !vital;
}
}
[owa] .container {
show: none !vital;
}
[class~="x_container"] {
show: none !vital;
}
[id~="x_fallback"] {
show: block !vital;
}
@media display and (max-width: 600px) {
physique[data-outlook-cycle] #fallback {
show: block !vital;
}
physique[data-outlook-cycle] .container {
show: none !vital;
}
}Let’s cease for a bit to debate vital code parts. We now have a particular enter:
We use it to point out or conceal the fallback by way of types. It’s within the feedback <!–[if !mso]><!–> … <!–<![endif]–> to ensure it’s hidden within the Outlook Desktop shopper.
As well as, we’ve <div id=”fallback” class=”fallback”></div> that incorporates the complete structure of our fallback model. It ought to have a easy, tabular structure appropriate for Outlook. In our instance, this can be a desk within the type of tabs with hyperlinks that result in the online model. You can also make your personal model, for instance, in order that the contents of the tabs are displayed one below the opposite with out going to the online model. The principle factor is to make use of a structure that’s comprehensible for Outlook.
This code is liable for the looks of the “Dislike” and “Like” buttons:
The types beneath are liable for hiding and displaying the fallback model. Should 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’ll be able to regulate its design to the specified kind (by the code). However remember to return these types again earlier than sending the e-mail.
These types don’t have clear guidelines for every e-mail shopper, however there are a set of hacks that can be utilized to regulate the show:
- types that begin with [owa] are used for Outlook;
- the [class~=”x_container”] types are wanted for Outlook In case [owa] doesn’t work;
- physique[data-outlook-cycle] types wanted for Outlook on iOS and Android cell 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: heart;
overflow: hidden;
}
.swipe-it-html .img-container {
place: relative;
width: 220px;
top: 250px;
padding: 10px;
}
.swipe-it-html .img-container div {
width: 90%;
top: 90%;
box-sizing: border-box;
place: absolute;
border: 10px stable #ccc;
border-bottom-width: 30px;
background-size: cowl;
background-position: heart heart;
background-repeat: no-repeat;
}
.swipe-it-html .flip {
rework: rotate(5deg);
}
.swipe-it-html .btn {
show: block;
width: 50px;
top: 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 heart 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 heart heart;
background-size: 50%;
}
.swipe-it-html .consequence {
text-align: heart;
padding: 20px;
show: none;
}
.swipe-it-html .submit-btn {
border-radius: 0px;
font-size: 16px;
background: #151515;
padding: 10px 17px;
show: inline-block;
shade: #ffffff;
text-align: heart;
cursor: pointer;
border: 0;
}
@media solely display and (max-width: 600px) {
.swipe-it-html .img-container {
width: 160px;
top: 190px;
}
.swipe-it-html .btn {
width: 40px;
top: 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~.consequence {
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 !vital;
}
#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 {
rework: 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 {
rework: 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;
top: 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 !vital;
}
enter.fallback_ctrl:checked~#fallback {
show: none !vital;
}
}
[owa] .container {
show: none !vital;
}
[class~="x_container"] {
show: none !vital;
}
[id~="x_fallback"] {
show: block !vital;
}
@media display and (max-width: 600px) {
physique[data-outlook-cycle] #fallback {
show: block !vital;
}
physique[data-outlook-cycle] .container {
show: none !vital;
}
}
</fashion>
<!--[if !mso]><!--><enter kind="checkbox" id="fallback_ctrl" class="fallback_ctrl" fashion="show:none !vital;mso-hide:all;" checked>
<!--<![endif]-->
<!-- FALLBACK -->
<div id="fallback" class="fallback">
<desk width="100%">
<tbody>
<tr align="heart">
<td width="20%"><a category="btn" goal="_blank" href="https://viewstripo.e-mail/55c0629f-70d1-42af-a22d-0760504d46461723026118684?kind=amphtml"><img src="https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/dislike02_pHi.png" alt fashion="show: block;" width="25" top="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?kind=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" top="210"></a></td>
<td width="20%"><a category="btn" goal="_blank" href="https://viewstripo.e-mail/55c0629f-70d1-42af-a22d-0760504d46461723026118684?kind=amphtml"><img src="https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_efee7e987d401eb6229e290061b7146290b32f77ab86ee8dd79a59a6ef0a5152/photos/like02_9CF.png" alt fashion="show: block;" width="25" top="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 methodology="get" motion="https://amp.stripo.e-mail/v1/kind/ytxje/alltests" goal="_blank">
<enter kind="hidden" title="user_email" worth="%EMAIL%">
<enter kind="radio" class="input-img-0" title="image-1" checked fashion="show:none">
<enter kind="radio" class="input-img-1" id="input-dislike-1" title="image-1" worth="dislike" fashion="show:none">
<enter kind="radio" class="input-img-1" id="input-like-1" title="image-1" worth="like" fashion="show:none">
<enter kind="radio" class="input-img-2" id="input-dislike-2" title="image-2" worth="dislike" fashion="show:none">
<enter kind="radio" class="input-img-2" id="input-like-2" title="image-2" worth="like" fashion="show:none">
<enter kind="radio" class="input-img-3" id="input-dislike-3" title="image-3" worth="dislike" fashion="show:none">
<enter kind="radio" class="input-img-3" id="input-like-3" title="image-3" worth="like" fashion="show:none">
<enter kind="radio" class="input-img-4" id="input-dislike-4" title="image-4" worth="dislike" fashion="show:none">
<enter kind="radio" class="input-img-4" id="input-like-4" title="image-4" worth="like" fashion="show:none">
<enter kind="radio" class="input-img-5" id="input-dislike-5" title="image-5" worth="dislike" fashion="show:none">
<enter kind="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="consequence">
<div class="result-text">
<h2 fashion="padding-bottom:20px">Nice selection!</h2>
<p><button class="submit-btn" kind="submit">Submit</button></p>
</div>
</div>
</kind>
</div>
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->Wrapping up
New interactive mechanics are usually not solely a method to distinguish your emails from opponents, but additionally to shock your recipients by providing a extra participating method to work together with the already acquainted e-mail newsletters. We hope that this information will change 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
