An easy-to-follow guide on creating an interactive “Swipe-it-like” game in Stripo (code sample included) — Stripo.email

tag:

In the first input tag (name="user_email"), you need to replace the value with your own. The user's name is substituted into this input with the merge-tag of the email service used. In our example, the merge-tag is for the Yespo service. In your case, you need to replace it with the one used in your email service.

Important note: More about merge-tags and how to use them described in the special article in our Help center.

After that, replace the link in the action-xhr attribute of the form tag with your own.

Input tags with the attribute name="image-1", name="image-2" etc. correspond to the number of cards. In the attribute [value] specified a variable for each card, in which we wrote the value “Dislike” or “Like”.

Now we need to add the “Submit” button and blocks with a message about a successful submission or an error. To do this, we paste this code instead of block with “result” class:

We’ve got the core, now it’s time to make it shiny with some styles. Paste this code before "swipe-it-amp" div.

.swipe-it-amp .submit-btn {
        border-radius: 0px;
        font-size: 16px;
        background: #151515;
        padding: 10px 17px;
        display: inline-block;
        color: #ffffff;
        text-align: center;
        cursor: pointer;
        border: 0;
    }
 
    .swipe-it-amp .amp-form-submit-success .result-text {
        display: none;
    }

Important note: div with the submit-success attribute appears when the data is sent successfully, and the submit-error when an error occurs. Meanwhile, .submit-btn is used to design the “submit” button.

This button is responsible for submitting the recipient’s answers and sending them to your Data Service.

Customizing styles

You can tweak game looks to your liking by changing styles in the code.

Like and dislike buttons

You can change how “Like” and “Dislike” buttons will look by replacing links to our icons to your own:

Besides that, you can change border color for buttons. To do this, there is a btn class in the code in which you need to change the background color value.

As a final touch, you can use the :hover pseudo-class to specify the background color when the mouse hovers over the element.

Important note: In our example, the icons are white with a black frame. To change their color, you need to upload another image. The image size should be 2 times larger than the icon size. In our case, the icon is 50×50 px and the image is 100×100 px.

Cards

Now let’s talk about changing styles for cards. To make your cards match your preferences, you can tweak this parameter — size, color, and border type — to your own values.

Meanwhile, changing images in cards requires changing links to these images in this part of the code:

You can create the design of your own by changing all these elements. So experiment with them to create the unique and suiting game for your email marketing needs.

Important note: Changing styles for the interactive HTML version is identical to the guide above. 

Interactive HTML version

Now we are moving to an interactive HTML version. Work on this version starts with another empty structure with the setting “Include in HTML” applied. Be sure to lcoate it right under the structure with the AMP version.

After that, we also insert an “HTML” block into it and add the following code:

Gathering data

In order for data gathering to work in this version, you need a link in the action attribute of the form tag to your data Service, which was created for the AMP version.

In the first input tag (name="user_email), you also need to replace the value with your own merge-tag , just like in the case with the AMP version.

The interactive HTML version has a similar structure, but the “Dislike” and “Like” buttons are bound to the input tags. Thanks to this binding, we can add transition and hide the blocks using the pseudo-class :checked.

The number of input tags must match the number of “Dislike” and “Like” buttons, and one input “input-img-0” with the checked attribute by default, is needed to display the very first buttons and the card.

Customizing styles

Now, a few words about styles for interactive HTML version.

Important note: If the number of buttons changes, then the styles also need to be changed.

Here's what the styles for showing and hiding the “Dislike” and “Like” buttons look like:

Here we have styles for card transition:

The last but not least, we have styles that hide the game at the end and show a message:

Fallback version

The last stop of our guide is the fallback version. The layout of this version is visually similar to our interactive versions but without interactivity. As a result, clicking on elements will lead to the web version of the email

We continue to work with the interactive HTML block that we made above and insert the following code between the tag and

Besides that, at the very end of the code, you need to insert another piece of code:








To make things work properly and send the recipient to the right web page when clicking on the fallback elements, you should change links to your own web version here:

Next, we work with styles to show only the version suitable for the mail client and make the buttons look the same as in the interactive version. We add the styles themselves to the style tag:
.fallback .btn {
        display: block;
        border: 2px solid #333;
        border-radius: 50%;
        padding: 12px;
        width: 25px;
        height: 25px;
    }
 
    .fallback .btn:hover {
        background-color: #333;
    }
 
    @media only screen and (max-width: 600px) {
        .fallback .btn {
            padding: 7px;
        }
    }
 
    /* --- */
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        input.fallback_ctrl:checked~.container {
            display: block !important;
        }
 
        input.fallback_ctrl:checked~#fallback {
            display: none !important;
        }
    }
 
    [owa] .container {
        display: none !important;
    }
 
    [class~="x_container"] {
        display: none !important;
    }
 
    [id~="x_fallback"] {
        display: block !important;
    }
 
    @media screen and (max-width: 600px) {
        body[data-outlook-cycle] #fallback {
            display: block !important;
        }
 
        body[data-outlook-cycle] .container {
            display: none !important;
        }
    }
Let’s stop for a bit to discuss important code elements. We have a special input:

We use it to show or hide the fallback via styles. It is in the comments  …  to make sure it is hidden in the Outlook Desktop client.
In addition, we have  that contains the entire layout of our fallback version. It should have a simple, tabular layout suitable for Outlook. In our example, this is a table in the form of tabs with links that lead to the web version. You can make your own version, for example, so that the contents of the tabs are displayed one under the other without going to the web version. The main thing is to use a layout that is understandable for Outlook.

This code is responsible for the appearance of the “Dislike” and “Like” buttons:

The styles below are responsible for hiding and displaying the fallback version. If you remove them or comment them out, the fallback version will be visible in the editing area as well as preview mode, so you can adjust its design to the desired form (through the code). But don't forget to return these styles back before sending the email.

These styles don’t have clear rules for each email client, but there are a set of hacks that can be used to control the display:


styles that start with [owa] are used for Outlook;


the [class~="x_container"] styles are needed for Outlook In case [owa] does not work;


body[data-outlook-cycle] styles needed for Outlook on iOS and Android mobile devices;


mso-hide:all; is used for Outlook.com.


The full code
Here is the fallback code of the game, including the interactive HTML part and the fallback version:









Wrapping up
New interactive mechanics are not only a way to distinguish your emails from competitors, but also to surprise your recipients by offering a more engaging way to interact with the already familiar email newsletters. We hope that this guide will become a reliable support for you in creating unique email newsletters that will delight your recipients and delight you with improved performance of your email campaigns.





Create exceptional emails with Stripo