---

Looking for a challenge? If you’re starting to feel like you keep coding the same kinds of emails over and over again, take a page out of Emre Demirel’s playbook.

He decided to figure out how to build an interactive email featuring a game of Rock, Paper, Scissors that his subscribers could play without leaving their inboxes. Emre joined me for our latest episode of Notes from the Dev: Video Edition, and this one is sure to get your creative gears turning.

Email gamification is a cutting-edge topic in the email geek community, but it’s not often you find campaigns that can really pull it off. Emre created this interactive email game to showcase the capabilities of his email agency PotionLabs. And he was nice enough to walk us through how he built his email masterpiece.

Watch for yourself below, and don’t forget to subscribe to our YouTube channel so you catch every episode of Notes from the Dev as soon as it comes out.

https://youtu.be/s7XW8mr5P-U

What is email gamification?

Gamification has emerged as an effective way to engage and motivate people in various ways. It simply involves the introduction of gameplay where you wouldn’t normally expect it.

If you’ve used a fitness app that offers incentives or lets you earn badges – that's gamification. If you’ve played McDonald’s Monopoly – that’s gamification too. Gamification can be used to train employees, educate students, or motivate the sales team to close deals. Even rewards and loyalty programs are a form of gamification.

Email gamification brings fun and competition to the inbox. And it might be one of the best ways to stand out from your competition, especially if you can deliver an interactive email experience. However, as you’ll see in this episode of Notes from the Dev, it’s likely going to take some experimentation and hard work.

Interactive email challenges

When Emre started thinking through how to code a Rock, Paper, Scissors game for email, he realized there would be three main challenges:

1. He needed to create a randomizer that could display different competitor moves.
2. He had to build application logic using only CSS to display a certain message based on the outcome of the game.
3. The email needed conditional rendering for various email clients.

Here’s an animation showing Emre’s interactive email game in action:

If a developer were to code a game like this for the web, they’d most likely use JavaScript to get the job done. However, as you probably know, JavaScript is not supported in email, and everything needs to be built in HTML and CSS.

Emre actually used the Mailjet Markup Language (MJML) to start developing his email game. That’s because MJML is a responsive framework that works in all the most-popular email clients. So, Emre could be confident that coding a component in MJML meant it would work just about everywhere. Find out more about MJML basics in our episode with Nicole Hickman.

While you could try using AMP for Email to create interactive content for Gmail users, none of the other major mailbox providers supports AMP at this time. Emre’s Rock, Paper, Scissors interactive email game works with clients using the WebKit rendering engine, which is mainly anyone using an Apple product.

That’s a pretty good-sized audience on most contact lists. But we’ll explain how he handled non-WebKit email clients a little later.

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 randomizer

At 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 explained how we built an interactive quiz email campaign 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 ternary operators, 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 only going to work 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 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 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 progressive enhancement for email. 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.

Here are some other resources on interactive emails:

• How to build an interactive quiz in email
• Interactive emails: 5 ideas to try
• How to use interactivity in holiday emails
• How to make an interactive email with click-to-reveal code

As always, a huge thank you goes out to our guest, Emre Demirel. If you have questions for Emre or just want to connect online, you can find him on Twitter or contact him through PotionLabs.io. You’ll also find him hanging out in the Email Geeks Slack community.