Rock. Paper. Scissors. Shoot!
Here’s what Emre needed to pull off to get his game to work as an interactive email…
First, he needed a way to “randomly” generate a rock, paper, or scissors image after the subscriber chose the move they wanted to play. Then, there needed to be logic that knew what message to display depending on if the game ended in a win, loss, or draw/tie.
Emre built this interactive email game inside of two main sections: a label container and a form. The label container displays everything a subscriber sees before they start playing. The form section displays the subscriber’s move, the computer’s move, the game result message, and a button to play again.
The randomizerAt first, Emre considered creating one large image with all three moves that would animate and rotate to randomly show only one. That is possible. But the problem was there’s no good way to determine the result of the game using that method. He needed a way to “catch” the randomizer’s input to determine the outcome of the game and show the right message.
Emre got an idea from an Email on Acid blog post that explainedcampaign back in 2017. The secret ingredient for that inbox experience is radio buttons. Basically, you can code an email to display specific content based on the radio button a subscriber clicks.
Emre took this concept a little further and created what you might call a “magic button” (ooooh). There’s more to that “Play” button in this game than meets the eye. There’s a CSS animation going on inside of it.
You can watch the video for a full explanation. But basically, what’s happening is that there are three CSS classes (one for rock, paper, and scissors) that are constantly rotating. When a subscriber clicks “Play”, whichever class is on top is the move that the computer plays. So, that’s the randomizer.
The app logic
The next challenge was including application logic that determines who won – the subscriber or the computer. Plus, Emre needed a way to reset the game so his contacts could try it again. And yes, he needed to do all this using only CSS.
There’s no way to code things in CSS based on certain conditions. But Emre also does some JavaScript development in which he uses what are known as which also work in CSS and allow for some inline logic.
Emre created a container with three different <p> tags telling players whether they won, lost, or tied. And the CSS logic he built with ternary operators knew which <p> tag to display based on the inputs from the player and the randomizer.
Finally, another button allows the subscriber to play again. As you’ll recall, Emre built this section of the email inside a <form>. Clicking the button clears the form and resets the game.
The fallbacks
Of course, interactive emails are still quite tricky to pull off and support varies among email clients. Because Emre used CSS animations for this email game, it’s in clients using WebKit, which includes Apple Mail, Outlook for macOS, and a few smaller email clients.
For non-Apple users, Emre developed a fallback in which Christmas Island Business Email List that “magic Play button” is just a normal link that lets people play the game in a web browser.
However, you’ll also notice that red disclaimer at the top of the game. This only displays for non-Apple users. That’s because Emre wants them to know that his interactive email could be experienced as intended if they are able to switch devices or email clients.
Ready to code your own interactive email?
Maybe your head is swimming with ideas right now. Or maybe you’re feeling a little overwhelmed at the thought of developing your own interactive email.
These kinds of campaigns are definitely more work. So, you and your team should put on those email strategy caps and think about whether the effort will be worth the investment. What’s your reason for developing an interactive email and what do you want to achieve? Emre developed his Rock, Paper, Scissors UAE Cell Number game to show potential clients what PotionLabs can do. (So, reach out if you need an awesome email coded up.)
Interactivity can also be a You can start with some simple interactive email elements and build from there until you’re ready to take the leap into gamifying the inbox experience.
