mailinapp
Documentation menu

Scratch-off block

A scratch-to-reveal prize card, built on the same :checked CSS technique as the accordion and spin-to-win blocks: a hidden checkbox, a tappable label styled as a scratch surface, and a CSS rule that swaps what's visible the moment it's checked — no JavaScript anywhere.

How it works

Wherever kinetic CSS is honored, the block renders a scratch surface — a <label> styled with a diagonal gray-striped background and a "Scratch here" prompt — layered over the prize. Tapping it checks the linked hidden checkbox, which triggers a CSS rule that hides the scratch surface and reveals the prize underneath, right in the inbox. There's no drag gesture or partial-scratch animation; it's a single tap-to-reveal, the same interaction spin-to-win's wheel and the accordion's expand/collapse both use.

The fallback is what makes this block worth calling out specifically: instead of a separate always-visible control the way spin-to-win and quiz have, scratch-off relies on a "safe default" in the styling itself. The scratch surface's own inline style is display:none — it only becomes visible at all once a <style> rule (scoped to kinetic-capable clients) explicitly forces it to display:block. In Outlook and any other client that doesn't honor that stylesheet, the surface simply never appears, and the prize element — which carries no such hiding style — is visible by default. So there's no "unscratched" dead end anywhere: a client either shows the scratch gesture (and the prize appears once tapped), or skips the gesture entirely and shows the prize outright. Nobody is ever stuck staring at an un-scratchable card.

Like spin-to-win, scratch-off doesn't post anything back to MailInApp when the surface is scratched — there's no reveal event, vote, or submission recorded. It doesn't appear in the responses dashboard, the CSV export, or the click heatmap. If the block has an optional prize link configured, tapping the revealed prize just follows that link like any other <a href> — it isn't routed through MailInApp's click-tracking redirect the way a button/image/social block's link is, so a scratch-off's prize click won't show up in the click heatmap either.

Configurable fields:

  • Title — the headline above the card, plus its own color and font size.
  • Prize text — what's revealed underneath the scratch surface (default "🎉 20% off your next order!").
  • Prize link (optional) — if set, the revealed prize renders as a real button-styled link to that URL; if left blank, it renders as plain bold text instead, since there's nothing to link to.
  • Background color, padding, border, border radius on the card.
  • Prize text color and prize background color — deliberately have no built-in default the way most color overrides do, because the block renders two visually different prize variants (a white-on-color button when a link is set, dark text with no background when it isn't) and a single hardcoded default would make one of the two variants invisible. Each variant falls back to its own sensible default only when you leave the field empty.

Examples

Subject

Scratch off to reveal your discount

A retention email can use scratch-off as a lighter-weight alternative to spin-to-win for a single guaranteed discount reveal — see Engagement & loyalty for more on this kind of lightweight gamification. A birthday or anniversary send can reveal a personalized coupon code as the prize text (combine it with a merge tag to personalize the code per recipient, since the prize text itself is just configurable copy). A "we picked a winner" campaign-conclusion email can use it to reveal whether a specific recipient won a giveaway, with the prize link pointing at a claim page.

What the static fallback looks like

<div id="em-scratch-1" style="margin:12px 0;text-align:center;background-color:transparent">
  <p style="margin:0 0 10px;font-weight:700;font-size:18px;color:#111827">
    Scratch to reveal your prize!
  </p>
  <!-- scratch surface (checkbox + label, display:none by default) omitted:
       only shown where a kinetic-tier <style> rule forces it visible -->
  <div class="sc-prize" style="margin-top:10px">
    <a href="https://acme.example.com/claim"
       style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
              color:#ffffff;border-radius:6px;text-decoration:none;
              font-size:14px;font-weight:600">
      🎉 20% off your next order!
    </a>
  </div>
</div>

The prize <div> carries no hiding style of its own, so it's visible unconditionally unless a kinetic-tier stylesheet actively hides it — the reveal gesture is purely additive on top of an already-visible prize.

Related