Blocco Gratta e vinci
Una card premio da grattare per rivelare, costruita sulla stessa tecnica CSS :checked dei blocchi fisarmonica e ruota della fortuna. Una casella di spunta nascosta, un'etichetta toccabile stilizzata come superficie da grattare, e una regola CSS che scambia ciò che è visibile nel momento in cui viene selezionata — nessun JavaScript da nessuna parte.
Come funziona
Ovunque il CSS cinetico venga rispettato, il blocco renderizza una superficie da grattare — un <label> stilizzato con uno sfondo a righe diagonali grigie e un invito "Gratta qui" — sovrapposta al premio. Toccarla seleziona la casella di spunta nascosta collegata, che attiva una regola CSS che nasconde la superficie da grattare e rivela il premio sottostante, proprio nella posta in arrivo. Non c'è alcun gesto di trascinamento o animazione di grattata parziale. È una singola rivelazione a tap: la stessa interazione usata sia dalla rotellina del blocco ruota della fortuna sia dall'espandi/comprimi della fisarmonica.
Il fallback è ciò che rende questo blocco degno di nota in modo specifico: invece di un controllo separato sempre visibile come hanno ruota della fortuna e quiz, il gratta e vinci si affida a un "predefinito sicuro" nello stile stesso. Lo stile inline della superficie da grattare è display:none; diventa visibile solo una volta che una regola <style> (limitata ai client capaci di cinetico) la forza esplicitamente a display:block. In Outlook e in qualsiasi altro client che non rispetti quel foglio di stile, la superficie semplicemente non compare mai, e l'elemento premio (che non porta uno stile di occultamento simile) è visibile di default. Quindi non c'è mai un vicolo cieco "non grattato" da nessuna parte: un client o mostra il gesto di grattata (e il premio compare una volta toccato), oppure salta del tutto il gesto e mostra direttamente il premio. Nessuno resta mai bloccato a fissare una card non grattabile.
Come la ruota della fortuna, il gratta e vinci non invia nulla a MailInApp quando la superficie viene grattata — non viene registrato alcun evento di rivelazione, voto o invio. Non compare nella dashboard delle risposte, nell'esportazione CSV, o nella mappa di calore dei clic. Se il blocco ha un link premio opzionale configurato, toccare il premio rivelato segue semplicemente quel link come qualsiasi altro <a href>. Non viene instradato attraverso il reindirizzamento di tracciamento clic di MailInApp nel modo in cui lo è il link di un blocco button/image/social, quindi il clic sul premio di un gratta e vinci non comparirà nemmeno nella mappa di calore dei clic.
Campi configurabili:
- Titolo — il titolo sopra la card, più colore e dimensione font propri.
- Testo premio — ciò che viene rivelato sotto la superficie da grattare (predefinito "🎉 20% di sconto sul tuo prossimo ordine!").
- Link premio (opzionale) — se impostato, il premio rivelato viene renderizzato come un vero link con stile pulsante verso quell'URL; se lasciato vuoto, viene renderizzato come semplice testo in grassetto, dato che non c'è nulla a cui collegarsi.
- Colore di sfondo, padding, bordo, raggio del bordo sulla card.
- Colore testo premio e colore sfondo premio — deliberatamente non hanno un predefinito integrato come la maggior parte delle sovrascritture colore, perché il blocco renderizza due varianti visivamente diverse del premio (un pulsante bianco su colore quando è impostato un link, testo scuro senza sfondo quando non lo è) e un unico predefinito fisso renderebbe invisibile una delle due varianti. Ogni variante ricade sul proprio predefinito sensato solo quando lasci il campo vuoto.
Esempi
Subject
Scratch off to reveal your discount
Un'email di retention può usare il gratta e vinci come alternativa più leggera alla ruota della fortuna per la rivelazione di un unico sconto garantito — vedi Coinvolgimento e fidelizzazione per saperne di più su questo tipo di gamification leggera. Un invio di compleanno o anniversario può rivelare un codice coupon personalizzato come testo del premio (combinalo con un tag di personalizzazione per personalizzare il codice per destinatario, dato che il testo del premio è semplicemente testo configurabile). Un'email di conclusione campagna "abbiamo scelto un vincitore" può usarlo per rivelare se un determinato destinatario ha vinto un giveaway, con il link premio che punta a una pagina di riscatto.
Come appare il fallback statico
<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>
Il <div> del premio non porta alcuno stile di occultamento proprio, quindi è visibile incondizionatamente a meno che un foglio di stile di livello cinetico non lo nasconda attivamente — il gesto di rivelazione è puramente additivo sopra un premio già visibile.