An easy-to-follow guide on making an interactive Claw Machine game (code samples included)

We think everybody knows these machines with claws in parks and funfairs, where you need to get yourself a toy using this claw. These machines gave us our first experience of real disappointment when the toy you want slips away at the last moment, and the game is over. We’ve decided to fix this, as our interactive email game, Claw Machine, will bring your recipients joy, gifts, engagement, and nothing less. We’ll show you how to create this game from scratch and give you every piece of code you’ll need.

How this game works

Well, how you should play the game is explained in its name. It’s an email version of the Claw Machine game, but the only thing is that you are always winning. You have three buttons to control your claw movement (go left, go right, grab the toy). You need to grab three toys, and once it’s done, you’ll receive a real gift you can use to treat yourself (promo code, discount, etc.). The prize is pre-determined by you, so no matter which side recipients grab the toys from, they’ll receive the same prize in the end.

It’s a fun way of granting ordinary things recipients are accustomed to. 

• dedicate your game design to various occasions and festives to make your emails more unique;
• provide a fun and engaging way of granting ordinary things recipients accustomed to, making sure they will remember your emails for long.

In this article, we will show you in detail how to create a full-fledged game that is compatible with major email clients, so all your subscribers will be able to interact with the game and include the following:

• AMP version of the game;
• kinetic version, built with HTML5 and CSS3;
• fallback version for email clients that do not support interactivity.

Now, let’s get down to our game creation process.

AMP version

First thing you need to do is insert an empty one-column structure in the template. Insert it, then select it and make sure it is included only in AMP HTML.

After that, add an HTML block into this structure and paste the following code into this block:

<style amp-custom>
  .claw-machine-amp { position: relative; } .claw-machine-amp .result { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-content: center; justify-content: center; align-items: center; padding: 30px; box-sizing: border-box; text-align: center; background: #efefef; flex-direction: column; } .claw-machine-amp .claw-container { position: relative; overflow: hidden; } .claw-machine-amp .claw-forward, .claw-machine-amp .claw-back { position: absolute; height: 100%; width: 100%; left: 0; } .claw-machine-amp .claw-block { position: absolute; top: 0; left: 50%; width: 80px; height: 100%; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-amp .claw { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .claw-machine-amp .claw-img { position: absolute; top: -60px; left: 0; width: 80px; height: 285px; } .claw-machine-amp .left1 { left: 33%; } .claw-machine-amp .left2 { left: 50%; } .claw-machine-amp .left3 { left: 69%; } .claw-machine-amp .move { top: 60px; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-amp .move2 { top: -120px; transition-delay: 0.7s; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-amp .move-forward { transition-delay: 1.2s; transition-timing-function: ease-out; } .claw-machine-amp .left1 .move-forward { left: -86px; transition-duration: 0.3s; } .claw-machine-amp .left2 .move-forward { left: -182px; transition-duration: 0.6s; } .claw-machine-amp .left3 .move-forward { left: -286px; transition-duration: 0.9s; } .claw-machine-amp .move-back { transition-delay: 2.5s; transition-timing-function: ease-out; } .claw-machine-amp .left1 .move-back { left: 86px; transition-duration: 0.3s; } .claw-machine-amp .left2 .move-back { left: 182px; transition-duration: 0.6s; } .claw-machine-amp .left3 .move-back { left: 286px; transition-duration: 0.9s; } .claw-machine-amp .toy.move-toy { bottom: -260px; transition-delay: 2s; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-amp .toy { width: 100px; height: 100px; position: absolute; bottom: -42px; left: -12px; } .claw-machine-amp .vhide { visibility: hidden; } .claw-machine-amp .vshow { visibility: visible; transition-delay: 0.5s; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-amp .vshow2 { visibility: visible; transition-delay: 2.7s; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-amp .buttons { position: relative; text-align: center; height: 80px; background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_a7e4717a9e2142650e31ff86ed91dc30d2d64fff6c89a61baad6945119015032/images/buttonsbg4.png); background-repeat: no-repeat; background-size: contain; background-position: top center; padding-top: 15px; box-sizing: border-box; } .claw-machine-amp .btn { appearance: none; border-radius: 4px; border-width: 0; color: #ffffff; cursor: pointer; display: inline-block; line-height: 1; padding: 8px 12px 12px; transition-duration: .15s; font-size: 16px; margin: 0 10px; } .claw-machine-amp .green { background-color: #9ac31d; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #2ea839 0 -3px 0 inset; } .claw-machine-amp .green:active { box-shadow: #2ea839 0 3px 7px inset; transform: translateY(2px); } .claw-machine-amp .red { background-color: #df0714; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #891005 0 -3px 0 inset; } .claw-machine-amp .red:active { box-shadow: #891005 0 3px 7px inset; transform: translateY(2px); } .claw-machine-amp .result-img div { width: 50px; height: 50px; } .claw-machine-amp .result-img { display: flex; justify-content: center; align-items: flex-start; padding-bottom: 20px; width: 100%; } @media only screen and (max-width: 600px) { .claw-machine-amp .claw-img { width: 50px; } .claw-machine-amp .move { top: 20px; } .claw-machine-amp .move2 { top: -80px; } .claw-machine-amp .left1 .move-forward { left: -56px; } .claw-machine-amp .left2 .move-forward { left: -98px; } .claw-machine-amp .left3 .move-forward { left: -145px; } .claw-machine-amp .left1 .move-back { left: 56px; } .claw-machine-amp .left2 .move-back { left: 98px; } .claw-machine-amp .left3 .move-back { left: 145px; } .claw-machine-amp .toy { bottom: 80px; left: -6px; width: 60px; height: 60px; } .claw-machine-amp .toy.move-toy { bottom: -100px; } .claw-machine-amp .buttons { padding: 3px 0 0; height: 50px; } .claw-machine-amp .result { padding: 15px; } .claw-machine-amp .result h4 { text-align: center; } .claw-machine-amp .additional-text { display: none; } .claw-machine-amp .btn { padding: 5px 10px 8px; } }
</style>
<div class="claw-machine-amp">
  <div class="claw-container">
    <div class="claw-block left2">
      <div id="claw-forward" class="claw-forward">
        <div id="claw-back" class="claw-back">
          <div id="claw" class="claw">
            <div id="claw-img" class="claw-img">
              <div class="toy">
                <div>
                  <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy1.png" width="100" class="adapt-img">
                </div>
              </div>
              <div class="toy">
                <div>
                  <img src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy2.png" width="100" alt="" class="adapt-img">
                </div>
              </div>
              <div class="toy">
                <div>
                  <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_d492c9f34307104a7bd9d8654f678b779024e9f54a54e2df64ca9eb44003cb38/images/toy3_F42.png" width="100" class="adapt-img">
                </div>
              </div>
              <div class="toy">
                <div>
                  <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy4.png" width="100" class="adapt-img">
                </div>
              </div>
              <div class="toy">
                <div>
                  <img width="100" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy5.png" class="adapt-img">
                </div>
              </div>
              <img width="80" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_6a27227bb662b38c71278b253df32bd68eeb777f0aaa7db033051b098d995f57/images/2.png" class="adapt-img">
            </div>
          </div>
        </div>
      </div>
    </div>
    <img src="https://zlnfb.stripocdn.email/content/guids/CABINET_967f5c8f9ec3afb3513241f84d9f63811f38ba26eb9599c0f3ec2d4ca559a816/images/bg8.png" width="560" alt="" class="adapt-img">
  </div>
  <div class="buttons">
    <button type="button" class="btn green">
      ←
    </button>
    <button type="button" class="btn green">
      →
    </button>
    <button type="button" class="btn red">
      ↓
    </button>
    <button type="button" class="btn red">
      ↓
    </button>
    <button type="button" class="btn red">
      ↓
    </button>
  </div>
  <div class="esd-text result vhide">
    <div class="result-img">
      <div hidden>
        <img src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy1.png" width="50" alt="" class="adapt-img">
      </div>
      <div hidden>
        <img src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy2.png" width="50" alt="" class="adapt-img">
      </div>
      <div hidden>
        <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_d492c9f34307104a7bd9d8654f678b779024e9f54a54e2df64ca9eb44003cb38/images/toy3_F42.png" width="50" class="adapt-img">
      </div>
      <div hidden>
        <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy4.png" width="50" class="adapt-img">
      </div>
      <div hidden>
        <img width="50" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy5.png" class="adapt-img">
      </div>
    </div>
    <h4 style="font-size:18px;padding-bottom:5px">
      You've scored some amazing discounts!
    </h4>
    <h4 style="padding-bottom:15px;font-size:18px">
      <b>15% OFF</b> on your next order.
    </h4>
    <p style="padding-bottom:15px;font-size:16px">
      Use the promo code <b>PRIZE1</b> on our
        <a href="https://stripo.email/" target="_blank" style="font-size:16px">
          website
        </a>
    </p>
    <p class="additional-text" style="font-size:12px;padding-top:5px;padding-bottom:25px">
      Make sure to use your winnings soon! These discounts can be used together or on separate purchases, so enjoy the savings while they last!
    </p>
  </div>
</div>

Once pasted, you’ll see this layout of the game.

The game’s concept is that the recipient draws three random toys and then sees a message with a promo code. This message also displays the toys they’ve drawn.

We have a block with the claw-back class, which contains the claw layout and all the toys. Within the claw-back block are many different blocks used for animation. Since AMP prohibits the use of the animation style, we’ll create a complex animation from several simple animations. Therefore, for each individual movement (down, up, left, and right), we’ll use a separate block.

First of all, we need to make our down button work. To do this, you need to replace the existing down buttons’ code:

With this code:

<button [hidden]="+toy !=0" on="tap:claw-img.toggleClass(class='move', force=false),claw.toggleClass(class='move2', force=false),AMP.setState({ num: floor(random() * floor(2)+1), toy: +toy+1, allNum: allNum +','+num }),claw-img.toggleClass(class='move', force=true),claw.toggleClass(class='move2', force=true)" type="button" class="btn red">
      ↓
    </button>
    <button [hidden]="+toy !=1" hidden on="tap:claw-img.toggleClass(class='move', force=false),claw.toggleClass(class='move2', force=false),AMP.setState({ num: floor(random() * floor(2)+3), toy: +toy+1, allNum: allNum +','+num }),claw-img.toggleClass(class='move', force=true),claw.toggleClass(class='move2', force=true)" type="button" class="btn red">
      ↓
    </button>
    <button on="tap:claw-img.toggleClass(class='move', force=false),claw.toggleClass(class='move2', force=false),AMP.setState({ num: floor(random() * floor(2)+5), toy: +toy+1, allNum: allNum +','+num }),claw-img.toggleClass(class='move', force=true),claw.toggleClass(class='move2', force=true)" type="button" [hidden]="+toy<2" hidden [disabled]="+toy&gt;=3" class="btn red">
      ↓
</button>

You’re probably wondering why there are three down buttons. In our example, three toys can be drawn, but there are six in total. To create the appearance of randomness and prevent duplicate toys, three down buttons were included in the game code.

Let’s take a closer look at the code.

The first button has the attribute [hidden]="+toy !=0". This means that as soon as the toy variable changes its value from 0 to any other value, this button will be hidden.

The second one has [hidden]="+toy !=1" hidden. This button will be hidden initially and only appear when toy equals 1.

The third one has the attributes [hidden]="+toy<2" hidden [disabled]="+toy>=3". It will be hidden initially and appear when toy equals 2 or greater. There’s also a disabled attribute, which disables the button when toy equals or exceeds 3, preventing the recipient from clicking more than necessary.

Next, let’s look at how animation works. The code uses classes for it, but for it to work every time, these classes must be removed. However, you can’t remove a class immediately after adding it, because the animation won’t have time to finish. So, the code first removes any classes, if any, and then adds them. This process continues every time the down button is clicked.

Adding and removing classes is done as follows. All buttons have the same entry.

At the start:

claw-img.toggleClass(class='move', force=false),

claw.toggleClass(class='move2', force=false)

At the end:

claw-img.toggleClass(class='move', force=true),

claw.toggleClass(class='move2', force=true)

• claw-img and claw are the IDs of the elements to which we’re adding the class;
• .toggleClass(class='move', force=false) is the AMP syntax for changing a class. Here, 'move' (the class name) must be enclosed in single quotes, force=false indicates we’re removing the class, and force=true indicates we’re adding the class.

Next are the variables. We have this part in our code:

AMP.setState({ num: floor(random() * floor(2)+1), toy: +toy+1, allNum: allNum +','+num })

When a button is clicked, a random number is written to the num variable, with different values ​​for each button. For the first button, floor(random() * floor(2) + 1) is 1 or 2, for the second, floor(random() * floor(2) + 3) is 3 or 4, and for the third, floor(random() * floor(2) + 5) is 5 or 6.

The toy variable is used to count the number of toys. It displays the desired down button and a message with the result after three toys have been drawn.

The last variable, allNum, simply stores all the numbers of the toys the recipient has drawn, so they can be displayed at the end.

All these variables are placed in AMP.setState({ }), which is a special AMP syntax for creating variables.

For all animations, the code already contains styles that are responsible for up and down movements:

Next, we need to make the right and left buttons work. To do this, replace the existing buttons code with this one:

<button on="tap:AMP.setState({ pos: +pos == -1 ? -1 : +pos-1, allNum: allNum +','+num, num: null })" type="button" class="btn green">
  ←
</button>
<button on="tap:AMP.setState({ pos: +pos == 1 ? 1 : +pos+1, allNum: allNum +','+num, num: null })" type="button" class="btn green">
  →
</button>

This code uses the pos variable to determine the claw’s position. It can take the values ​​-1, 0, or 1, meaning the claw is on the left, center, or right, respectively. Depending on this value, the claw-block is assigned the classes left1, left2, and left3. Currently, it has the left2 class, so the claws are displayed in the center.

The styles for all of this are already written in the code you copied at the very beginning of the guide here:

And here:

It’s worth noting that transition-duration: 0.5s and transition-timing-function: ease-out have been added to the claw-block, as these styles describe the animation (they determine how smoothly an element changes when the recipient interacts with it). The left value, which changes, doesn’t change instantly but over 0.5 seconds with an ease-out effect (the animation starts quickly and slows down toward the end).

The way everything works is simple. When clicking the left button, for example, the pos value is checked. If it’s not -1, which could be 0 (claws in the middle) or 1 (claws on the right), the value is decreased by one. If the variable’s value is -1, it won’t change because there’s nowhere else to move. The same logic applies to the right button. Thus, the claws always move through three positions: left, center, and right.

The final touch to ensure everything works as expected is to add the following code to the block with the claw-block class: 

[class]="pos == -1 ? 'claw-block left1' : pos == 0 ? 'claw-block left2' : pos == 1 ? 'claw-block left3' : 'claw-block left2'"

So it must look like this:

Now, we need to make sure that the toys that the recipient takes out of the machine also work.

The code already has a variable `num` that gives us the toy number. All that remains is to make it display the specific toy when the claws are at the bottom. To do this, we need to add the classes `vshow` and `vhide`. The `vhide` class will be set by default, and depending on the value of `num`, we will either keep `vhide` or change it to `vshow`.

To avoid doing everything manually, simply replace the entire current claw-img block, which currently looks like this:

With this code:

<div id="claw-img" class="claw-img">
              <div  class="toy">
                <div [class]="num!=1 ? 'vhide' : 'vshow'" class="vhide">
                  <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy1.png" width="100" class="adapt-img">
                </div>
              </div>
              <div class="toy">
                <div [class]="num!=2 ? 'vhide' : 'vshow'" class="vhide">
                  <img src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy2.png" width="100" alt="" class="adapt-img">
                </div>
              </div>
              <div class="toy">
                <div [class]="num!=3 ? 'vhide' : 'vshow'" class="vhide">
                  <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_d492c9f34307104a7bd9d8654f678b779024e9f54a54e2df64ca9eb44003cb38/images/toy3_F42.png" width="100" class="adapt-img">
                </div>
              </div>
              <div class="toy">
                <div [class]="num!=4 ? 'vhide' : 'vshow'" class="vhide">
                  <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy4.png" width="100" class="adapt-img">
                </div>
              </div>
              <div class="toy">
                <div [class]="num!=5 ? 'vhide' : 'vshow'" class="vhide">
                  <img width="100" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy5.png" class="adapt-img">
                </div>
              </div>
              <div class="toy">
                <div [class]="num!=6 ? 'vhide' : 'vshow'" class="vhide">
                  <img width="100" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_fd7337964dd5ec76fd06f0fdfee8598b969f85b87481c41cacb859030259809d/images/toy6.png" class="adapt-img">
                </div>
              </div>
              <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_6a27227bb662b38c71278b253df32bd68eeb777f0aaa7db033051b098d995f57/images/2.png" width="80" class="adapt-img">
            </div>

The style code for the toys is already present in the game.

The game already looks great, but to make everything look as realistic as possible, we should add an additional animation so that the toy falls into the container on the left, just like in a real claw machine.

To do this, we need to add three more animations: the claws moving to the left, the toy falling, and the claws returning to their original position. The claws can be in three positions: left, center, and right. Therefore, we need to describe the styles for moving left and back for each position.

The layout already includes blocks with the classes `claw-forward` and `claw-back`. We will add animation classes to them. The style code is described here:

And here:

Just replace all current left, down, and right buttons with this code:

<button on="tap:AMP.setState({ pos: +pos == -1 ? -1 : +pos-1, allNum: allNum +','+num, num: null }),claw-forward.toggleClass(class='move-forward', force=false),claw-back.toggleClass(class='move-back', force=false)" type="button" class="btn green">
      ←
    </button>
    <button on="tap:AMP.setState({ pos: +pos == 1 ? 1 : +pos+1, allNum: allNum +','+num, num: null }),claw-forward.toggleClass(class='move-forward', force=false),claw-back.toggleClass(class='move-back', force=false)" type="button" class="btn green">
      →
    </button>
<button [hidden]="+toy !=0" on="tap:claw-img.toggleClass(class='move', force=false),claw.toggleClass(class='move2', force=false),claw-forward.toggleClass(class='move-forward', force=false),claw-back.toggleClass(class='move-back', force=false),AMP.setState({ num: floor(random() * floor(2)+1), toy: +toy+1, allNum: allNum +','+num }),claw-img.toggleClass(class='move', force=true),claw.toggleClass(class='move2', force=true),claw-forward.toggleClass(class='move-forward', force=true),claw-back.toggleClass(class='move-back', force=true)" type="button" class="btn red">
      ↓
    </button>
    <button on="tap:claw-img.toggleClass(class='move', force=false),claw.toggleClass(class='move2', force=false),claw-forward.toggleClass(class='move-forward', force=false),claw-back.toggleClass(class='move-back', force=false),AMP.setState({ num: floor(random() * floor(2)+3), toy: +toy+1, allNum: allNum +','+num }),claw-img.toggleClass(class='move', force=true),claw.toggleClass(class='move2', force=true),claw-forward.toggleClass(class='move-forward', force=true),claw-back.toggleClass(class='move-back', force=true)" type="button" [hidden]="+toy !=1" hidden class="btn red">
      ↓
    </button>
    <button [hidden]="+toy&lt;2" hidden on="tap:claw-img.toggleClass(class='move', force=false),claw.toggleClass(class='move2', force=false),claw-forward.toggleClass(class='move-forward', force=false),claw-back.toggleClass(class='move-back', force=false),AMP.setState({ num: floor(random() * floor(2)+5), toy: +toy+1, allNum: allNum +','+num }),claw-img.toggleClass(class='move', force=true),claw.toggleClass(class='move2', force=true),claw-forward.toggleClass(class='move-forward', force=true),claw-back.toggleClass(class='move-back', force=true)" type="button" [disabled]="+toy&gt;=3" class="btn red">
      ↓
    </button>

The down buttons were updated to include code for adding and removing the classes move-forward and move-back, as was done above:

• claw-forward.toggleClass(class='move-forward', force=false);
• claw-back.toggleClass(class='move-back', force=false);
• claw-forward.toggleClass(class='move-forward', force=true);
• claw-back.toggleClass(class='move-back', force=true).

The left and right buttons only had the removal of the move-forward and move-back classes added to avoid problems with the animation.

Next, we need to add an animation for the toy falling. Simply replace the entire block of code related to the toys, which currently looks like this:

With this code:

<div id="claw-img" class="claw-img">
  <div [class]="num!=1 ? 'toy' : 'toy move-toy'" class="toy">
    <div [class]="num!=1 ? 'vhide' : 'vshow'" class="vhide">
      <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy1.png" width="100" class="adapt-img">
    </div>
  </div>
  <div [class]="num!=2 ? 'toy' : 'toy move-toy'" class="toy">
    <div [class]="num!=2 ? 'vhide' : 'vshow'" class="vhide">
      <img src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy2.png" width="100" alt="" class="adapt-img">
    </div>
  </div>
  <div [class]="num!=3 ? 'toy' : 'toy move-toy'" class="toy">
    <div [class]="num!=3 ? 'vhide' : 'vshow'" class="vhide">
      <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_d492c9f34307104a7bd9d8654f678b779024e9f54a54e2df64ca9eb44003cb38/images/toy3_F42.png" width="100" class="adapt-img">
    </div>
  </div>
  <div [class]="num!=4 ? 'toy' : 'toy move-toy'" class="toy">
    <div [class]="num!=4 ? 'vhide' : 'vshow'" class="vhide">
      <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy4.png" width="100" class="adapt-img">
    </div>
  </div>
  <div [class]="num!=5 ? 'toy' : 'toy move-toy'" class="toy">
    <div [class]="num!=5 ? 'vhide' : 'vshow'" class="vhide">
      <img width="100" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy5.png" class="adapt-img">
    </div>
  </div>
  <div [class]="num!=6 ? 'toy' : 'toy move-toy'" class="toy">
    <div [class]="num!=6 ? 'vhide' : 'vshow'" class="vhide">
      <img width="100" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_fd7337964dd5ec76fd06f0fdfee8598b969f85b87481c41cacb859030259809d/images/toy6.png" class="adapt-img">
    </div>
  </div>
  <img src="https://zlnfb.stripocdn.email/content/guids/CABINET_6a27227bb662b38c71278b253df32bd68eeb777f0aaa7db033051b098d995f57/images/2.png" width="80" alt="" class="adapt-img">
</div>

We added this code, `[class]="num!=1 ? 'toy' : 'toy move-toy'`, in which, depending on the value of `num`, the class `move-toy` is added to the `toy` class. The styles include an animation delay, so the toy that the recipient has pulled out starts falling after 2 seconds. This is precisely when the claws are positioned above the toy container.

Here’s how the styles code for this looks:

The full animation is set and done. The last thing we need is to display a message at the end of the game. For this, we will use the vshow2 class.

The message will be displayed after the third toy falls into the container. We calculated the approximate time it takes for the claws to lift and drop the toy and added it to the transition-delay:

Currently, at the bottom of the code, we have a block with the class "result". It is currently hidden using the "vhide" class; we need to change this class.

Add the following code to this block:

[class]="toy!=3 ? 'result vhide' : 'result vshow2'"

So now it looks like this:

This section, in addition to the text, also contains a set of images of toys to show the recipient the ones they grabbed from the machine. Simply replace the entire block with images div class="result-img" with the following code:

<div class="result-img">
      <div [hidden]="allNum.indexOf(1)==-1 && num != 1" hidden>
        <img src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy1.png" width="50" alt="" class="adapt-img">
      </div>
      <div hidden [hidden]="allNum.indexOf(2)==-1 && num != 2">
        <img src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy2.png" width="50" alt="" class="adapt-img">
      </div>
      <div [hidden]="allNum.indexOf(3)==-1 && num != 3" hidden>
        <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_d492c9f34307104a7bd9d8654f678b779024e9f54a54e2df64ca9eb44003cb38/images/toy3_F42.png" width="50" class="adapt-img">
      </div>
      <div [hidden]="allNum.indexOf(4)==-1 && num != 4" hidden>
        <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy4.png" width="50" class="adapt-img">
      </div>
      <div hidden [hidden]="allNum.indexOf(5)==-1 && num != 5">
        <img width="50" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy5.png" class="adapt-img">
      </div>
      <div [hidden]="allNum.indexOf(6)==-1 && num != 6" hidden>
        <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_fd7337964dd5ec76fd06f0fdfee8598b969f85b87481c41cacb859030259809d/images/toy6.png" width="50" class="adapt-img">
      </div>
    </div>

This code lists all six toys. In addition, the code checks the `allNum` variable, which stores the numbers of the toys selected by the user. The `num` variable is also checked because the number of the last toy hasn’t yet been recorded in `allNum`. If the number of a specific toy is present, that block is displayed; otherwise, it remains hidden.

One last point to mention: some of the styles listed above are modified for mobile devices. Therefore, after making changes to the styles, you should check the mobile version and, if necessary, modify the styles for mobile devices. These styles are enclosed in the `@media only screen and (max-width: 600px) {}` block.

The AMP version is done. We’ll leave the full code below so that you can check whether you have done everything correctly according to the guide.

<style amp-custom>
  .claw-machine-amp { position: relative; } .claw-machine-amp .result { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-content: center; justify-content: center; align-items: center; padding: 30px; box-sizing: border-box; text-align: center; background: #efefef; flex-direction: column; } .claw-machine-amp .claw-container { position: relative; overflow: hidden; } .claw-machine-amp .claw-forward, .claw-machine-amp .claw-back { position: absolute; height: 100%; width: 100%; left: 0; } .claw-machine-amp .claw-block { position: absolute; top: 0; left: 50%; width: 80px; height: 100%; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-amp .claw { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .claw-machine-amp .claw-img { position: absolute; top: -60px; left: 0; width: 80px; height: 285px; } .claw-machine-amp .left1 { left: 33%; } .claw-machine-amp .left2 { left: 50%; } .claw-machine-amp .left3 { left: 69%; } .claw-machine-amp .move { top: 60px; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-amp .move2 { top: -120px; transition-delay: 0.7s; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-amp .move-forward { transition-delay: 1.2s; transition-timing-function: ease-out; } .claw-machine-amp .left1 .move-forward { left: -86px; transition-duration: 0.3s; } .claw-machine-amp .left2 .move-forward { left: -182px; transition-duration: 0.6s; } .claw-machine-amp .left3 .move-forward { left: -286px; transition-duration: 0.9s; } .claw-machine-amp .move-back { transition-delay: 2.5s; transition-timing-function: ease-out; } .claw-machine-amp .left1 .move-back { left: 86px; transition-duration: 0.3s; } .claw-machine-amp .left2 .move-back { left: 182px; transition-duration: 0.6s; } .claw-machine-amp .left3 .move-back { left: 286px; transition-duration: 0.9s; } .claw-machine-amp .toy.move-toy { bottom: -260px; transition-delay: 2s; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-amp .toy { width: 100px; height: 100px; position: absolute; bottom: -42px; left: -12px; } .claw-machine-amp .vhide { visibility: hidden; } .claw-machine-amp .vshow { visibility: visible; transition-delay: 0.5s; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-amp .vshow2 { visibility: visible; transition-delay: 2.7s; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-amp .buttons { position: relative; text-align: center; height: 80px; background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_a7e4717a9e2142650e31ff86ed91dc30d2d64fff6c89a61baad6945119015032/images/buttonsbg4.png); background-repeat: no-repeat; background-size: contain; background-position: top center; padding-top: 15px; box-sizing: border-box; } .claw-machine-amp .btn { appearance: none; border-radius: 4px; border-width: 0; color: #ffffff; cursor: pointer; display: inline-block; line-height: 1; padding: 8px 12px 12px; transition-duration: .15s; font-size: 16px; margin: 0 10px; } .claw-machine-amp .green { background-color: #9ac31d; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #2ea839 0 -3px 0 inset; } .claw-machine-amp .green:active { box-shadow: #2ea839 0 3px 7px inset; transform: translateY(2px); } .claw-machine-amp .red { background-color: #df0714; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #891005 0 -3px 0 inset; } .claw-machine-amp .red:active { box-shadow: #891005 0 3px 7px inset; transform: translateY(2px); } .claw-machine-amp .result-img div { width: 50px; height: 50px; } .claw-machine-amp .result-img { display: flex; justify-content: center; align-items: flex-start; padding-bottom: 20px; width: 100%; } @media only screen and (max-width: 600px) { .claw-machine-amp .claw-img { width: 50px; } .claw-machine-amp .move { top: 20px; } .claw-machine-amp .move2 { top: -80px; } .claw-machine-amp .left1 .move-forward { left: -56px; } .claw-machine-amp .left2 .move-forward { left: -98px; } .claw-machine-amp .left3 .move-forward { left: -145px; } .claw-machine-amp .left1 .move-back { left: 56px; } .claw-machine-amp .left2 .move-back { left: 98px; } .claw-machine-amp .left3 .move-back { left: 145px; } .claw-machine-amp .toy { bottom: 80px; left: -6px; width: 60px; height: 60px; } .claw-machine-amp .toy.move-toy { bottom: -100px; } .claw-machine-amp .buttons { padding: 3px 0 0; height: 50px; } .claw-machine-amp .result { padding: 15px; } .claw-machine-amp .result h4 { text-align: center; } .claw-machine-amp .additional-text { display: none; } .claw-machine-amp .btn { padding: 5px 10px 8px; } }
</style>
<div class="claw-machine-amp">
  <div class="claw-container">
    <div [class]="pos == -1 ? &#39;claw-block left1&#39; : pos == 0 ? &#39;claw-block left2&#39; : pos == 1 ? &#39;claw-block left3&#39; : &#39;claw-block left2&#39;" class="claw-block left2">
      <div id="claw-forward" class="claw-forward">
        <div id="claw-back" class="claw-back">
          <div id="claw" class="claw">
            <div id="claw-img" class="claw-img">
              <div [class]="num!=1 ? &#39;toy&#39; : &#39;toy move-toy&#39;" class="toy">
                <div [class]="num!=1 ? &#39;vhide&#39; : &#39;vshow&#39;" class="vhide">
                  <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy1.png" width="100" class="adapt-img">
                </div>
              </div>
              <div [class]="num!=2 ? &#39;toy&#39; : &#39;toy move-toy&#39;" class="toy">
                <div [class]="num!=2 ? &#39;vhide&#39; : &#39;vshow&#39;" class="vhide">
                  <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy2.png" width="100" class="adapt-img">
                </div>
              </div>
              <div [class]="num!=3 ? &#39;toy&#39; : &#39;toy move-toy&#39;" class="toy">
                <div [class]="num!=3 ? &#39;vhide&#39; : &#39;vshow&#39;" class="vhide">
                  <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_d492c9f34307104a7bd9d8654f678b779024e9f54a54e2df64ca9eb44003cb38/images/toy3_F42.png" width="100" class="adapt-img">
                </div>
              </div>
              <div [class]="num!=4 ? &#39;toy&#39; : &#39;toy move-toy&#39;" class="toy">
                <div [class]="num!=4 ? &#39;vhide&#39; : &#39;vshow&#39;" class="vhide">
                  <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy4.png" width="100" class="adapt-img">
                </div>
              </div>
              <div [class]="num!=5 ? &#39;toy&#39; : &#39;toy move-toy&#39;" class="toy">
                <div [class]="num!=5 ? &#39;vhide&#39; : &#39;vshow&#39;" class="vhide">
                  <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy5.png" width="100" class="adapt-img">
                </div>
              </div>
              <div [class]="num!=6 ? &#39;toy&#39; : &#39;toy move-toy&#39;" class="toy">
                <div [class]="num!=6 ? &#39;vhide&#39; : &#39;vshow&#39;" class="vhide">
                  <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_fd7337964dd5ec76fd06f0fdfee8598b969f85b87481c41cacb859030259809d/images/toy6.png" width="100" class="adapt-img">
                </div>
              </div>
              <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_6a27227bb662b38c71278b253df32bd68eeb777f0aaa7db033051b098d995f57/images/2.png" width="80" class="adapt-img">
            </div>
          </div>
        </div>
      </div>
    </div>
    <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_967f5c8f9ec3afb3513241f84d9f63811f38ba26eb9599c0f3ec2d4ca559a816/images/bg8.png" width="560" class="adapt-img">
  </div>
  <div class="buttons">
    <button type="button" on="tap:AMP.setState({ pos: +pos == -1 ? -1 : +pos-1, allNum: allNum +&#39;,&#39;+num, num: null }),claw-forward.toggleClass(class=&#39;move-forward&#39;, force=false),claw-back.toggleClass(class=&#39;move-back&#39;, force=false)" class="btn green">
      ←
    </button>
    <button type="button" on="tap:AMP.setState({ pos: +pos == 1 ? 1 : +pos+1, allNum: allNum +&#39;,&#39;+num, num: null }),claw-forward.toggleClass(class=&#39;move-forward&#39;, force=false),claw-back.toggleClass(class=&#39;move-back&#39;, force=false)" class="btn green">
      →
    </button>
    <button type="button" [hidden]="+toy !=0" on="tap:claw-img.toggleClass(class=&#39;move&#39;, force=false),claw.toggleClass(class=&#39;move2&#39;, force=false),claw-forward.toggleClass(class=&#39;move-forward&#39;, force=false),claw-back.toggleClass(class=&#39;move-back&#39;, force=false),AMP.setState({ num: floor(random() * floor(2)+1), toy: +toy+1, allNum: allNum +&#39;,&#39;+num }),claw-img.toggleClass(class=&#39;move&#39;, force=true),claw.toggleClass(class=&#39;move2&#39;, force=true),claw-forward.toggleClass(class=&#39;move-forward&#39;, force=true),claw-back.toggleClass(class=&#39;move-back&#39;, force=true)" class="btn red">
      ↓
    </button>
    <button type="button" [hidden]="+toy !=1" hidden on="tap:claw-img.toggleClass(class=&#39;move&#39;, force=false),claw.toggleClass(class=&#39;move2&#39;, force=false),claw-forward.toggleClass(class=&#39;move-forward&#39;, force=false),claw-back.toggleClass(class=&#39;move-back&#39;, force=false),AMP.setState({ num: floor(random() * floor(2)+3), toy: +toy+1, allNum: allNum +&#39;,&#39;+num }),claw-img.toggleClass(class=&#39;move&#39;, force=true),claw.toggleClass(class=&#39;move2&#39;, force=true),claw-forward.toggleClass(class=&#39;move-forward&#39;, force=true),claw-back.toggleClass(class=&#39;move-back&#39;, force=true)" class="btn red">
      ↓
    </button>
    <button type="button" [disabled]="+toy&gt;=3" [hidden]="+toy&lt;2" hidden on="tap:claw-img.toggleClass(class=&#39;move&#39;, force=false),claw.toggleClass(class=&#39;move2&#39;, force=false),claw-forward.toggleClass(class=&#39;move-forward&#39;, force=false),claw-back.toggleClass(class=&#39;move-back&#39;, force=false),AMP.setState({ num: floor(random() * floor(2)+5), toy: +toy+1, allNum: allNum +&#39;,&#39;+num }),claw-img.toggleClass(class=&#39;move&#39;, force=true),claw.toggleClass(class=&#39;move2&#39;, force=true),claw-forward.toggleClass(class=&#39;move-forward&#39;, force=true),claw-back.toggleClass(class=&#39;move-back&#39;, force=true)" class="btn red">
      ↓
    </button>
  </div>
  <div [class]="toy!=3 ? &#39;result vhide&#39; : &#39;result vshow2&#39;" class="esd-text result vhide">
    <div class="result-img">
      <div hidden [hidden]="allNum.indexOf(1)==-1 && num != 1">
        <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy1.png" width="50" class="adapt-img">
      </div>
      <div hidden [hidden]="allNum.indexOf(2)==-1 && num != 2">
        <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy2.png" width="50" class="adapt-img">
      </div>
      <div hidden [hidden]="allNum.indexOf(3)==-1 && num != 3">
        <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_d492c9f34307104a7bd9d8654f678b779024e9f54a54e2df64ca9eb44003cb38/images/toy3_F42.png" width="50" class="adapt-img">
      </div>
      <div hidden [hidden]="allNum.indexOf(4)==-1 && num != 4">
        <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy4.png" width="50" class="adapt-img">
      </div>
      <div hidden [hidden]="allNum.indexOf(5)==-1 && num != 5">
        <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy5.png" width="50" class="adapt-img">
      </div>
      <div [hidden]="allNum.indexOf(6)==-1 && num != 6" hidden>
        <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_fd7337964dd5ec76fd06f0fdfee8598b969f85b87481c41cacb859030259809d/images/toy6.png" width="50" class="adapt-img">
      </div>
    </div>
    <h4 style="font-size: 18px; padding-bottom: 5px">
      You've scored some amazing discounts!
    </h4>
    <h4 style="padding-bottom: 15px; font-size: 18px">
      <b>15% OFF</b> on your next order.
    </h4>
    <p style="padding-bottom: 15px; font-size: 16px">
      Use the promo code <b>PRIZE1</b> on our
        <a href="https://stripo.email/" target="_blank" style="font-size: 16px">
          website
        </a>
    </p>
    <p class="additional-text" style="font-size: 12px; padding-top: 5px; padding-bottom: 25px">
      Make sure to use your winnings soon! These discounts can be used together or on separate purchases, so enjoy the savings while they last!
    </p>
  </div>
</div>

Kinetic version built with HTML5 and CSS3

Now, we need to create a kinetic version, which can also be called an interactive HTML version, built with HTML5 and CSS3. First, we create a foundation for this version, so we’ll start with another empty one-column structure. Select it and pick an “Include in HTML only” option.

After that, insert an HTML block into this structure and paste this code:

<style>
  @media only screen and (max-width: 600px) { .claw-machine-html .btn { padding: 5px 10px 8px !important; } .claw-machine-html .claw-img { width: 50px !important; } #input-down1:checked~* .claw-1 .claw-img, #input-down2:checked~* .claw-2 .claw-img, #input-down3:checked~* .claw-3 .claw-img { top: 20px !important; } #input-down1:checked~* .claw-1, #input-down2:checked~* .claw-2, #input-down3:checked~* .claw-3 { top: -80px !important; } .claw-machine-html .toy { bottom: 80px !important; left: -6px !important; width: 60px !important; height: 60px !important; } #input-down1:checked~* .claw-1 .toy, #input-down2:checked~* .claw-2 .toy, #input-down3:checked~* .claw-3 .toy { bottom: -100px!important; } .claw-machine-html .buttons { padding: 3px 0 0 !important; height: 50px !important; } .claw-machine-html .result { padding: 15px !important; } .claw-machine-html .result h4 { text-align: center; } .claw-machine-html .additional-text { display: none; } #input-down1:checked~* .claw-1 .claw-forward, #input-down2:checked~* .claw-2 .claw-forward, #input-down3:checked~* .claw-3 .claw-forward { left: -98px!important; } #input-down1:checked~* .claw-1 .claw-back, #input-down2:checked~* .claw-2 .claw-back, #input-down3:checked~* .claw-3 .claw-back { left: 98px!important;} #input-left1:checked~*#input-down1:checked~* .claw-1 .claw-forward, #input-left1:checked~*#input-down2:checked~* .claw-2 .claw-forward, #input-left1:checked~*#input-down3:checked~* .claw-3 .claw-forward { left: -56px!important; } #input-left1:checked~*#input-down1:checked~* .claw-1 .claw-back, #input-left1:checked~*#input-down2:checked~* .claw-2 .claw-back, #input-left1:checked~*#input-down3:checked~* .claw-3 .claw-back { left: 56px!important; } #input-right3:checked~*#input-down1:checked~* .claw-1 .claw-forward, #input-right3:checked~*#input-down2:checked~* .claw-2 .claw-forward, #input-right3:checked~*#input-down3:checked~* .claw-3 .claw-forward { left: -145px!important; } #input-right3:checked~*#input-down1:checked~* .claw-1 .claw-back, #input-right3:checked~*#input-down2:checked~* .claw-2 .claw-back, #input-right3:checked~*#input-down3:checked~* .claw-3 .claw-back { left: 145px!important; } } .claw-machine-html { position: relative; } .claw-machine-html .result { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-content: center; justify-content: center; align-items: center; padding: 30px; box-sizing: border-box; text-align: center; background: #efefef; flex-direction: column; z-index: 9; visibility: hidden; } .claw-machine-html .claw-container { position: relative; overflow: hidden; } .claw-machine-html .claw-block { position: absolute; top: 0; left: 50%; width: 80px; height: 100%; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-html .claw { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; } .claw-machine-html .claw-img { position: absolute; top: -60px; left: 0; width: 80px; height: 285px; } .claw-machine-html .toy { width: 100px; height: 100px; position: absolute; bottom: -42px; left: -12px; } .claw-machine-html .toy-1, .claw-machine-html .toy-2, .claw-machine-html .toy-3 { visibility: hidden; } .claw-machine-html .buttons { position: relative; text-align: center; height: 80px; background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_a7e4717a9e2142650e31ff86ed91dc30d2d64fff6c89a61baad6945119015032/images/buttonsbg4.png); background-repeat: no-repeat; background-size: contain; background-position: top center; padding-top: 15px; box-sizing: border-box; } .claw-machine-html .btn { appearance: none; border-radius: 4px; border-width: 0; color: #ffffff; cursor: pointer; display: inline-block; line-height: 1; padding: 8px 12px 12px; transition-duration: .15s; font-size: 16px; margin: 0 10px; } .claw-machine-html .green { background-color: #9ac31d; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #2ea839 0 -3px 0 inset; } .claw-machine-html .green:active { box-shadow: #2ea839 0 3px 7px inset; transform: translateY(2px); } .claw-machine-html .red { background-color: #df0714; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #891005 0 -3px 0 inset; } .claw-machine-html .red:active { box-shadow: #891005 0 3px 7px inset; transform: translateY(2px); } .claw-machine-html .result-img div { width: 50px; height: 50px; } .claw-machine-html .result-img { display: flex; justify-content: center; align-items: flex-start; padding-bottom: 20px; width: 100%; } #input-left1:checked~* .btn-right3, #input-left2:checked~* .btn-left2, #input-right2:checked~* .btn-right2, #input-right3:checked~* .btn-left1 { display: none } #input-left1:checked~* .btn-right2, #input-left2:checked~* .btn-left1, #input-right2:checked~* .btn-right3, #input-right3:checked~* .btn-left2 { display: inline-block } #input-left1:checked~* .claw-block { left: 33%; } #input-left2:checked~* .claw-block, #input-right2:checked~* .claw-block { left: 50%; } #input-right3:checked~* .claw-block { left: 69%; } .claw-machine-html .btn-left2, .claw-machine-html .btn-right2, .claw-machine-html .btn-down2, .claw-machine-html .btn-down3, .claw-machine-html .claw-2, .claw-machine-html .claw-3 { display: none } #input-down1:checked~* .claw-1 .claw-img, #input-down2:checked~* .claw-2 .claw-img, #input-down3:checked~* .claw-3 .claw-img { top: 60px; transition-duration: 0.5s; transition-timing-function: ease-out; } #input-down1:checked~* .claw-1, #input-down2:checked~* .claw-2, #input-down3:checked~* .claw-3 { top: -120px; transition-delay: 0.7s; transition-duration: 0.5s; transition-timing-function: ease-out; } #input-down1:checked~* .btn-down2, #input-down2:checked~* .btn-down3 { display: inline-block; } #input-down1:checked~* .btn-down1, #input-down2:checked~* .btn-down2 { display: none; } #input-down3:checked~.result { visibility: visible; transition-delay: 2.7s; transition-duration: 0.5s; transition-timing-function: ease-out; } #input-down1:checked~* .toy-1, #input-down2:checked~* .toy-2, #input-down3:checked~* .toy-3 { visibility: visible; transition-delay: 0.5s; transition-duration: 0.5s; transition-timing-function: ease-out; } #input-down2:checked~* .toy-1, #input-down3:checked~* .toy-2, #input-down2:checked~* .claw-1, #input-down3:checked~* .claw-2 { display: none !important; } #input-down1:checked~* .claw-2, #input-down2:checked~* .claw-3 { display: block; } .claw-machine-html .claw-forward, .claw-machine-html .claw-back { position: absolute; height: 100%; width: 100%; left: 0; } #input-down1:checked~* .claw-1 .toy, #input-down2:checked~* .claw-2 .toy, #input-down3:checked~* .claw-3 .toy { bottom: -260px; transition-delay: 2s; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-html .claw-forward { transition-delay: 1.2s; transition-timing-function: ease-out; } .claw-machine-html .claw-back { transition-delay: 2.5s; transition-timing-function: ease-out; } #input-down1:checked~* .claw-1 .claw-forward, #input-down2:checked~* .claw-2 .claw-forward, #input-down3:checked~* .claw-3 .claw-forward { left: -182px; transition-duration: 0.6s; } #input-down1:checked~* .claw-1 .claw-back, #input-down2:checked~* .claw-2 .claw-back, #input-down3:checked~* .claw-3 .claw-back { left: 182px; transition-duration: 0.6s; } #input-left1:checked~*#input-down1:checked~* .claw-1 .claw-forward, #input-left1:checked~*#input-down2:checked~* .claw-2 .claw-forward, #input-left1:checked~*#input-down3:checked~* .claw-3 .claw-forward { left: -86px; } #input-left1:checked~*#input-down1:checked~* .claw-1 .claw-back, #input-left1:checked~*#input-down2:checked~* .claw-2 .claw-back, #input-left1:checked~*#input-down3:checked~* .claw-3 .claw-back { left: 86px; } #input-right3:checked~*#input-down1:checked~* .claw-1 .claw-forward, #input-right3:checked~*#input-down2:checked~* .claw-2 .claw-forward, #input-right3:checked~*#input-down3:checked~* .claw-3 .claw-forward { left: -286px; } #input-right3:checked~*#input-down1:checked~* .claw-1 .claw-back, #input-right3:checked~*#input-down2:checked~* .claw-2 .claw-back, #input-right3:checked~*#input-down3:checked~* .claw-3 .claw-back { left: 286px; } 
</style>
  <div class="claw-machine-html">
    <form>
      <input id="input-left1" name="move" type="radio" style="display:none">
      <input id="input-left2" name="move" type="radio" style="display:none">
      <input id="input-right2" name="move" type="radio" style="display:none">
      <input type="radio" id="input-right3" name="move" style="display:none">
      <input type="checkbox" id="input-down1" name="input-down" class="input-down" style="display:none">
      <input id="input-down2" name="input-down" type="checkbox" class="input-down" style="display:none">
      <input id="input-down3" name="input-down" type="checkbox" class="input-down" style="display:none">
      <div class="claw-container">
        <div class="claw-block">
          <div class="claw claw-3">
            <div class="claw-forward">
              <div class="claw-back">
                <div class="claw-img">
                  <div class="toy">
                    <div class="toy-3">
                      <img width="100" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_d492c9f34307104a7bd9d8654f678b779024e9f54a54e2df64ca9eb44003cb38/images/toy3_F42.png" class="adapt-img">
                    </div>
                  </div>
                  <img width="80" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_6a27227bb662b38c71278b253df32bd68eeb777f0aaa7db033051b098d995f57/images/2.png" class="adapt-img">
                </div>
              </div>
            </div>
          </div>
          <div class="claw claw-2">
            <div class="claw-forward">
              <div class="claw-back">
                <div class="claw-img">
                  <div class="toy">
                    <div class="toy-2">
                      <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy2.png" width="100" class="adapt-img">
                    </div>
                  </div>
                  <img width="80" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_6a27227bb662b38c71278b253df32bd68eeb777f0aaa7db033051b098d995f57/images/2.png" class="adapt-img">
                </div>
              </div>
            </div>
          </div>
          <div class="claw claw-1">
            <div class="claw-forward">
              <div class="claw-back">
                <div class="claw-img">
                  <div class="toy">
                    <div class="toy-1">
                      <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy1.png" width="100" class="adapt-img">
                    </div>
                  </div>
                  <img width="80" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_6a27227bb662b38c71278b253df32bd68eeb777f0aaa7db033051b098d995f57/images/2.png" class="adapt-img">
                </div>
              </div>
            </div>
          </div>
        </div>
        <img width="560" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_967f5c8f9ec3afb3513241f84d9f63811f38ba26eb9599c0f3ec2d4ca559a816/images/bg8.png" class="adapt-img" style="position:relative">
      </div>
      <div class="buttons">
        <label for="input-left1" class="btn green btn-left1">
          ←
        </label>
        <label for="input-left2" class="btn green btn-left2">
          ←
        </label>
        <label for="input-right2" class="btn green btn-right2">
          →
        </label>
        <label for="input-right3" class="btn green btn-right3">
          →
        </label>
        <label for="input-down1" class="btn red btn-down1">
          ↓
        </label>
        <label for="input-down2" class="btn red btn-down2">
          ↓
        </label>
        <label for="input-down3" class="btn red btn-down3">
          ↓
        </label>
      </div>
      <div class="esd-text result">
        <div class="result-img">
          <div class="result-img-1">
            <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy1.png" width="50" class="adapt-img">
          </div>
          <div class="result-img-2">
            <img width="50" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy2.png" class="adapt-img">
          </div>
          <div class="result-img-3">
            <img src="https://zlnfb.stripocdn.email/content/guids/CABINET_d492c9f34307104a7bd9d8654f678b779024e9f54a54e2df64ca9eb44003cb38/images/toy3_F42.png" width="50" alt="" class="adapt-img">
          </div>
        </div>
        <h4 style="font-size:18px!important;padding-bottom:5px">
          You've scored some amazing discounts!
        </h4>
        <h4 style="font-size:18px!important;padding-bottom:15px">
          <b>15% OFF</b> on your next order.
        </h4>
        <p style="padding-bottom:15px;font-size:16px!important">
          Use the promo code <b>PRIZE1</b> on our
        <a href="https://stripo.email/" target="_blank" style="font-size:16px!important">
          website
        </a>
        </p>
        <p class="additional-text" style="font-size:12px;padding-top:5px;padding-bottom:25px">
          Make sure to use your winnings soon! These discounts can be used together or on separate purchases, so enjoy the savings while they last!
        </p>
      </div>
    </form>
  </div>

The HTML version features the same animation as the AMP version. However, we cannot use random selection of toys, so there are only three toys shown sequentially.

Because of this, the claw’s layout is slightly different. The code contains three different claws (one for each toy). These claws are wrapped in all the containers to which the animation is attached.

The right, left, and down buttons have been replaced with label tags with a "for" attribute specifying the ID of the associated input.

Meanwhile, the number of down buttons remains unchanged. However, one additional button is added for both the right and left buttons. This is necessary so that each position has its own button: the far left, left in the middle, right in the middle, and the far right.

All inputs related to the buttons are located at the very top of the code:

It’s worth discussing the styling separately. Instead of adding classes, as is done in the AMP version, this version uses radio and checkbox inputs. As soon as the recipient clicks the button, one of the inputs is checked, triggering a set of animations.

The position of the claws to the left/right is changed by the following styles:

These styles are responsible for the downward and upward movement of the claws:

The animation of the claw moving with the toy to the left toward the container and back is created using these styles:

The animation for the toy falling is represented in the style code like this:

Here are the styles for how the end message appears once the game is finished:

In this version, as in the AMP version, some styles change on mobile devices. Therefore, after making changes to the styles, check the mobile version and, if necessary, modify the styles for mobile devices. They are enclosed in the block @media only screen and (max-width: 600px) {}.

Fallback version

The last thing we need to create is the fallback version. Fallback is required for email clients that don’t support HTML5 and CSS3, or AMP. This version will have a layout similar to our interactive version but without the interactivity. Clicking on any element will lead to the web version of the email.

In this example, the fallback will simply be an image of the game and a link to the web version of the email:

We continue working within the interactive HTML block that we created above.

Insert the following code between the </style> tag and <div class="claw-machine-html">:

<input type="checkbox" checked id="fallback_ctrl" class="fallback_ctrl" style="display:none !important;mso-hide:all">
<!-- FALLBACK -->
<span id="fallback" class="fallback">
    <table cellpadding="0" cellspacing="0" width="100%">
        <tbody>
            <tr>
                <td align="left" style="padding-bottom:20px">
                    <a target="_blank" href="https://viewstripo.email/18894a85-fed5-4c17-9e52-266bc7cbb6601759218398428?type=amphtml" class="esd-frame-element esd-hover-element esdev-disable-select"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_a7e4717a9e2142650e31ff86ed91dc30d2d64fff6c89a61baad6945119015032/images/clawmachine.png" width="560" alt class="adapt-img"></a>
                </td>
            </tr>
        </tbody>
    </table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="display:none;mso-hide:all">

You also need to insert this piece of code at the end of the code:

</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->

To change links in the fallback version to your own, just replace them here:

Now. we need to add styles to display only the version suitable for the email client. Add this code to the style tag at the very end:

    /* --- */
    @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;
        }
    }

This code has important piece for our fallback version:

<!--[if !mso]><!--><input type="checkbox" id="fallback_ctrl" class="fallback_ctrl" style="display:none !important;mso-hide:all;" checked>

<!--<![endif]-->

This input is used to show or hide the fallback using styles. It’s enclosed in comments <!--[if !mso]><!--> … <!--<![endif]--> to ensure that it’s hidden in the Outlook Desktop client.

Also worth noting is the <span id="fallback" class="fallback"></span> block, which contains all of our fallback layout. It should have a simple, tabular layout suitable for Outlook. In our example, it’s a table with links to the web version. You can create your own layout; just make sure it’s understandable for Outlook.

The styles below are used to hide and show the fallback version. If you remove them or comment them out, the fallback version will be visible, and you can customize its design. But don’t forget to re-enable these styles before sending the email.

These styles don’t have clear rules for each email client, but there is 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 are needed for Outlook on iOS and Android mobile devices;
• mso-hide:all; is used for Outlook.com.

The full code

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

<style>
  @media only screen and (max-width: 600px) { .claw-machine-html .btn { padding: 5px 10px 8px !important; } .claw-machine-html .claw-img { width: 50px !important; } #input-down1:checked~* .claw-1 .claw-img, #input-down2:checked~* .claw-2 .claw-img, #input-down3:checked~* .claw-3 .claw-img { top: 20px !important; } #input-down1:checked~* .claw-1, #input-down2:checked~* .claw-2, #input-down3:checked~* .claw-3 { top: -80px !important; } .claw-machine-html .toy { bottom: 80px !important; left: -6px !important; width: 60px !important; height: 60px !important; } #input-down1:checked~* .claw-1 .toy, #input-down2:checked~* .claw-2 .toy, #input-down3:checked~* .claw-3 .toy { bottom: -100px!important; } .claw-machine-html .buttons { padding: 3px 0 0 !important; height: 50px !important; } .claw-machine-html .result { padding: 15px !important; } .claw-machine-html .result h4 { text-align: center; } .claw-machine-html .additional-text { display: none; } #input-down1:checked~* .claw-1 .claw-forward, #input-down2:checked~* .claw-2 .claw-forward, #input-down3:checked~* .claw-3 .claw-forward { left: -98px!important; } #input-down1:checked~* .claw-1 .claw-back, #input-down2:checked~* .claw-2 .claw-back, #input-down3:checked~* .claw-3 .claw-back { left: 98px!important;} #input-left1:checked~*#input-down1:checked~* .claw-1 .claw-forward, #input-left1:checked~*#input-down2:checked~* .claw-2 .claw-forward, #input-left1:checked~*#input-down3:checked~* .claw-3 .claw-forward { left: -56px!important; } #input-left1:checked~*#input-down1:checked~* .claw-1 .claw-back, #input-left1:checked~*#input-down2:checked~* .claw-2 .claw-back, #input-left1:checked~*#input-down3:checked~* .claw-3 .claw-back { left: 56px!important; } #input-right3:checked~*#input-down1:checked~* .claw-1 .claw-forward, #input-right3:checked~*#input-down2:checked~* .claw-2 .claw-forward, #input-right3:checked~*#input-down3:checked~* .claw-3 .claw-forward { left: -145px!important; } #input-right3:checked~*#input-down1:checked~* .claw-1 .claw-back, #input-right3:checked~*#input-down2:checked~* .claw-2 .claw-back, #input-right3:checked~*#input-down3:checked~* .claw-3 .claw-back { left: 145px!important; } } .claw-machine-html { position: relative; } .claw-machine-html .result { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-content: center; justify-content: center; align-items: center; padding: 30px; box-sizing: border-box; text-align: center; background: #efefef; flex-direction: column; z-index: 9; visibility: hidden; } .claw-machine-html .claw-container { position: relative; overflow: hidden; } .claw-machine-html .claw-block { position: absolute; top: 0; left: 50%; width: 80px; height: 100%; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-html .claw { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; } .claw-machine-html .claw-img { position: absolute; top: -60px; left: 0; width: 80px; height: 285px; } .claw-machine-html .toy { width: 100px; height: 100px; position: absolute; bottom: -42px; left: -12px; } .claw-machine-html .toy-1, .claw-machine-html .toy-2, .claw-machine-html .toy-3 { visibility: hidden; } .claw-machine-html .buttons { position: relative; text-align: center; height: 80px; background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_a7e4717a9e2142650e31ff86ed91dc30d2d64fff6c89a61baad6945119015032/images/buttonsbg4.png); background-repeat: no-repeat; background-size: contain; background-position: top center; padding-top: 15px; box-sizing: border-box; } .claw-machine-html .btn { appearance: none; border-radius: 4px; border-width: 0; color: #ffffff; cursor: pointer; display: inline-block; line-height: 1; padding: 8px 12px 12px; transition-duration: .15s; font-size: 16px; margin: 0 10px; } .claw-machine-html .green { background-color: #9ac31d; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #2ea839 0 -3px 0 inset; } .claw-machine-html .green:active { box-shadow: #2ea839 0 3px 7px inset; transform: translateY(2px); } .claw-machine-html .red { background-color: #df0714; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #891005 0 -3px 0 inset; } .claw-machine-html .red:active { box-shadow: #891005 0 3px 7px inset; transform: translateY(2px); } .claw-machine-html .result-img div { width: 50px; height: 50px; } .claw-machine-html .result-img { display: flex; justify-content: center; align-items: flex-start; padding-bottom: 20px; width: 100%; } #input-left1:checked~* .btn-right3, #input-left2:checked~* .btn-left2, #input-right2:checked~* .btn-right2, #input-right3:checked~* .btn-left1 { display: none } #input-left1:checked~* .btn-right2, #input-left2:checked~* .btn-left1, #input-right2:checked~* .btn-right3, #input-right3:checked~* .btn-left2 { display: inline-block } #input-left1:checked~* .claw-block { left: 33%; } #input-left2:checked~* .claw-block, #input-right2:checked~* .claw-block { left: 50%; } #input-right3:checked~* .claw-block { left: 69%; } .claw-machine-html .btn-left2, .claw-machine-html .btn-right2, .claw-machine-html .btn-down2, .claw-machine-html .btn-down3, .claw-machine-html .claw-2, .claw-machine-html .claw-3 { display: none } #input-down1:checked~* .claw-1 .claw-img, #input-down2:checked~* .claw-2 .claw-img, #input-down3:checked~* .claw-3 .claw-img { top: 60px; transition-duration: 0.5s; transition-timing-function: ease-out; } #input-down1:checked~* .claw-1, #input-down2:checked~* .claw-2, #input-down3:checked~* .claw-3 { top: -120px; transition-delay: 0.7s; transition-duration: 0.5s; transition-timing-function: ease-out; } #input-down1:checked~* .btn-down2, #input-down2:checked~* .btn-down3 { display: inline-block; } #input-down1:checked~* .btn-down1, #input-down2:checked~* .btn-down2 { display: none; } #input-down3:checked~.result { visibility: visible; transition-delay: 2.7s; transition-duration: 0.5s; transition-timing-function: ease-out; } #input-down1:checked~* .toy-1, #input-down2:checked~* .toy-2, #input-down3:checked~* .toy-3 { visibility: visible; transition-delay: 0.5s; transition-duration: 0.5s; transition-timing-function: ease-out; } #input-down2:checked~* .toy-1, #input-down3:checked~* .toy-2, #input-down2:checked~* .claw-1, #input-down3:checked~* .claw-2 { display: none !important; } #input-down1:checked~* .claw-2, #input-down2:checked~* .claw-3 { display: block; } .claw-machine-html .claw-forward, .claw-machine-html .claw-back { position: absolute; height: 100%; width: 100%; left: 0; } #input-down1:checked~* .claw-1 .toy, #input-down2:checked~* .claw-2 .toy, #input-down3:checked~* .claw-3 .toy { bottom: -260px; transition-delay: 2s; transition-duration: 0.5s; transition-timing-function: ease-out; } .claw-machine-html .claw-forward { transition-delay: 1.2s; transition-timing-function: ease-out; } .claw-machine-html .claw-back { transition-delay: 2.5s; transition-timing-function: ease-out; } #input-down1:checked~* .claw-1 .claw-forward, #input-down2:checked~* .claw-2 .claw-forward, #input-down3:checked~* .claw-3 .claw-forward { left: -182px; transition-duration: 0.6s; } #input-down1:checked~* .claw-1 .claw-back, #input-down2:checked~* .claw-2 .claw-back, #input-down3:checked~* .claw-3 .claw-back { left: 182px; transition-duration: 0.6s; } #input-left1:checked~*#input-down1:checked~* .claw-1 .claw-forward, #input-left1:checked~*#input-down2:checked~* .claw-2 .claw-forward, #input-left1:checked~*#input-down3:checked~* .claw-3 .claw-forward { left: -86px; } #input-left1:checked~*#input-down1:checked~* .claw-1 .claw-back, #input-left1:checked~*#input-down2:checked~* .claw-2 .claw-back, #input-left1:checked~*#input-down3:checked~* .claw-3 .claw-back { left: 86px; } #input-right3:checked~*#input-down1:checked~* .claw-1 .claw-forward, #input-right3:checked~*#input-down2:checked~* .claw-2 .claw-forward, #input-right3:checked~*#input-down3:checked~* .claw-3 .claw-forward { left: -286px; } #input-right3:checked~*#input-down1:checked~* .claw-1 .claw-back, #input-right3:checked~*#input-down2:checked~* .claw-2 .claw-back, #input-right3:checked~*#input-down3:checked~* .claw-3 .claw-back { left: 286px; } /* --- */ @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; } }
</style>
<!--[if !mso]><!-- -->
<input checked id="fallback_ctrl" type="checkbox" class="fallback_ctrl" style="display:none !important;mso-hide:all">
<!--<![endif]-->
<!-- FALLBACK -->
<span id="fallback" class="fallback">
  <table cellpadding="0" cellspacing="0" width="100%">
    <tbody>
      <tr>
        <td align="left" style="padding-bottom:20px">
          <a target="_blank" href="https://viewstripo.email/18894a85-fed5-4c17-9e52-266bc7cbb6601759218398428?type=amphtml"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_a7e4717a9e2142650e31ff86ed91dc30d2d64fff6c89a61baad6945119015032/images/clawmachine.png" width="560" alt="" class="adapt-img"></a>
        </td>
      </tr>
    </tbody>
  </table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="display:none;mso-hide:all">
  <div class="claw-machine-html">
    <form>
      <input id="input-left1" name="move" type="radio" style="display:none">
      <input name="move" type="radio" id="input-left2" style="display:none">
      <input id="input-right2" name="move" type="radio" style="display:none">
      <input id="input-right3" name="move" type="radio" style="display:none">
      <input type="checkbox" id="input-down1" name="input-down" class="input-down" style="display:none">
      <input type="checkbox" id="input-down2" name="input-down" class="input-down" style="display:none">
      <input id="input-down3" name="input-down" type="checkbox" class="input-down" style="display:none">
      <div class="claw-container">
        <div class="claw-block">
          <div class="claw claw-3">
            <div class="claw-forward">
              <div class="claw-back">
                <div class="claw-img">
                  <div class="toy">
                    <div class="toy-3">
                      <img src="https://zlnfb.stripocdn.email/content/guids/CABINET_d492c9f34307104a7bd9d8654f678b779024e9f54a54e2df64ca9eb44003cb38/images/toy3_F42.png" width="100" alt="" class="adapt-img">
                    </div>
                  </div>
                  <img width="80" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_6a27227bb662b38c71278b253df32bd68eeb777f0aaa7db033051b098d995f57/images/2.png" class="adapt-img">
                </div>
              </div>
            </div>
          </div>
          <div class="claw claw-2">
            <div class="claw-forward">
              <div class="claw-back">
                <div class="claw-img">
                  <div class="toy">
                    <div class="toy-2">
                      <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy2.png" width="100" class="adapt-img">
                    </div>
                  </div>
                  <img width="80" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_6a27227bb662b38c71278b253df32bd68eeb777f0aaa7db033051b098d995f57/images/2.png" class="adapt-img">
                </div>
              </div>
            </div>
          </div>
          <div class="claw claw-1">
            <div class="claw-forward">
              <div class="claw-back">
                <div class="claw-img">
                  <div class="toy">
                    <div class="toy-1">
                      <img alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy1.png" width="100" class="adapt-img">
                    </div>
                  </div>
                  <img width="80" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_6a27227bb662b38c71278b253df32bd68eeb777f0aaa7db033051b098d995f57/images/2.png" class="adapt-img">
                </div>
              </div>
            </div>
          </div>
        </div>
        <a>
          <img width="560" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_967f5c8f9ec3afb3513241f84d9f63811f38ba26eb9599c0f3ec2d4ca559a816/images/bg8.png" class="adapt-img" style="position:relative">
        </a>
      </div>
      <div class="buttons">
        <label for="input-left1" class="btn green btn-left1">
          ←
        </label>
        <label for="input-left2" class="btn green btn-left2">
          ←
        </label>
        <label for="input-right2" class="btn green btn-right2">
          →
        </label>
        <label for="input-right3" class="btn green btn-right3">
          →
        </label>
        <label for="input-down1" class="btn red btn-down1">
          ↓
        </label>
        <label for="input-down2" class="btn red btn-down2">
          ↓
        </label>
        <label for="input-down3" class="btn red btn-down3">
          ↓
        </label>
      </div>
      <div class="esd-text result">
        <div class="result-img">
          <div class="result-img-1">
            <img width="50" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy1.png" class="adapt-img">
          </div>
          <div class="result-img-2">
            <img width="50" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_8389ad49c7cd4491329ae826528cad4540e2da023296aeb0d735bd8f735afce1/images/toy2.png" class="adapt-img">
          </div>
          <div class="result-img-3">
            <img src="https://zlnfb.stripocdn.email/content/guids/CABINET_d492c9f34307104a7bd9d8654f678b779024e9f54a54e2df64ca9eb44003cb38/images/toy3_F42.png" width="50" alt="" class="adapt-img">
          </div>
        </div>
        <h4 style="padding-bottom:5px;font-size:18px!important">
          You've scored some amazing discounts!
        </h4>
        <h4 style="font-size:18px!important;padding-bottom:15px">
          <b>15% OFF</b> on your next order.
        </h4>
        <p style="font-size:16px!important;padding-bottom:15px">
          Use the promo code <b>PRIZE1</b> on our
        <a href="https://stripo.email/" target="_blank" style="font-size:16px!important">
          website
        </a>
        </p>
        <p class="additional-text" style="font-size:12px;padding-top:5px;padding-bottom:25px">
          Make sure to use your winnings soon! These discounts can be used together or on separate purchases, so enjoy the savings while they last!
        </p>
      </div>
    </form>
  </div>
</div>
<!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->

Wrapping up

Although this guide turned out to be quite long, the game creation process is a piece of cake. In the end, you’ll receive a full-fledged game that can raise engagement of your email campaigns and help your newsletters outperform your competitors in terms of uniqueness and audience experience.