Blocco Ruota della fortuna
Una ruota promozionale gamificata: un titolo, un gesto di rotazione e un unico premio configurato. È la risposta leggera dello studio a "gamifica questa promozione" — nessun pool di premi, nessuna probabilità, nessuna estrazione lato server, solo una rivelazione soddisfacente attorno a un link che già controlli.
Come funziona
La ruota della fortuna è uno dei blocchi costruiti sullo stesso trucco CSS casella-di-spunta-ed-etichetta :checked della fisarmonica. Una casella di spunta nascosta abbinata a un <label> funge da bersaglio del tap, e una regola CSS agganciata a :checked scambia ciò che è visibile, senza alcun JavaScript. Dove il CSS cinetico viene rispettato, toccare la grafica della ruota (🎡) seleziona la casella nascosta, che attiva un'animazione di rotazione di 0,9 secondi (una rotazione @keyframes fino a 720 gradi) e contemporaneamente rivela un pannello premio: un link con stile pulsante che punta al tuo URL premio configurato, preceduto da un "🎉" per il momento della rivelazione.
Sotto quel livello cinetico, l'HTML inviato via email renderizza sempre anche un secondo controllo: un link con stile pulsante semplice, con la stessa etichetta e destinazione. A differenza dei chip di fallback del sondaggio o della valutazione, questo pulsante non è nascosto via CSS dietro il livello cinetico — è sempre visibile. Un client che rispetta :checked mostra sia la ruota sia questo pulsante insieme; Outlook e qualsiasi altro client che non riesca a rispettare la regola mostra semplicemente il pulsante da solo. I destinatari non devono mai "girare" nulla per arrivare al premio — toccare uno dei due funziona.
Non c'è alcuna casualità in questo blocco. Ogni destinatario che gira — o ogni destinatario su un client che mostra il pulsante di fallback semplice — atterra sullo stesso identico link configurato. La "vincita" è garantita per progettazione: la ruota è un dispositivo di presentazione per un unico premio che hai già deciso ricevano tutti, non un meccanismo di selezione premio. Se vuoi che destinatari diversi vedano offerte diverse, è una questione di costruire versioni separate dell'email per segmenti di pubblico separati (oppure usare i tag di personalizzazione nello stesso link premio), non una funzionalità del blocco.
La ruota della fortuna non invia nulla a MailInApp quando viene toccata — non viene registrato da nessuna parte alcun voto, invio o evento di rivelazione. Questo significa che non compare mai nella dashboard delle risposte, nell'esportazione CSV, o nella mappa di calore dei clic (che traccia solo i link semplici dei blocchi button/image/social/elemento-generico, e il pulsante della ruota della fortuna non è collegato a quel meccanismo). Se hai bisogno di sapere quante persone hanno effettivamente interagito con la ruota, metti il link premio su una landing page che controlli e misuralo lì. In alternativa, usa la mappa di calore dei clic su un blocco button invece, se non ti serve l'animazione della ruota.
Campi configurabili:
- Titolo — il titolo sopra la ruota, più colore e dimensione font propri.
- Etichetta pulsante — il testo sia sul pulsante di fallback sempre visibile sia sul pulsante premio rivelato (predefinito "Tenta la fortuna").
- Link premio — dove puntano il pulsante/la rivelazione. Lasciato vuoto, l'HTML inviato via email ricade sull'URL della vista live ospitata propria del blocco invece che su un link morto; la vista live stessa renderizza un pulsante solo quando questo è impostato (non ha una propria destinazione di fallback su cui ricadere).
- Colore di sfondo, padding, bordo e raggio del bordo sulla card.
- Colore testo pulsante e colore sfondo pulsante — di default sui token del tema
$accente$branddel progetto rispettivamente, così si abbina al tuo brand fin da subito.
La grafica della ruota stessa (il cerchio a gradiente conico e l'emoji 🎡) non è configurabile — solo il testo circostante, il link e lo stile della card lo sono.
Esempi
Subject
You've got a spin waiting
Un rivenditore che gestisce una vendita flash può inserire un blocco ruota della fortuna in un invio promozionale con il link premio che punta direttamente a una landing page con codice sconto o a un carrello precompilato. Vedi Coinvolgimento e fidelizzazione per il pattern più ampio dell'uso di una gamification leggera per aumentare il click-through su un'email promozionale altrimenti ordinaria. Un invio "grazie per essere membro" di un programma fedeltà può usarlo come un momento "riscatta la tua ricompensa" a un tap invece di un pulsante semplice, dato che l'animazione di rotazione si legge come un evento più che come un link statico. Poiché non c'è vera randomizzazione, funziona bene anche ovunque tu voglia il divertimento percepito di un meccanismo gamificato senza in realtà variare cosa ricevono destinatari diversi — per esempio un unico codice sconto a livello di sito che vuoi che tutti riscattino.
Come appare il fallback statico
<div id="em-spin-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">
Spin to win!
</p>
<a href="https://acme.example.com/spin-reward"
style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
color:#ffffff;border-radius:6px;text-decoration:none;
font-size:14px;font-weight:600">
Try your luck
</a>
<!-- kinetic wheel + reveal markup omitted — hidden from Outlook,
CSS-hidden everywhere else once this fallback link is visible -->
</div>
Il pulsante sempre presente è un semplice <a href> diretto al link premio configurato (oppure l'URL della vista live se non ne è stato impostato uno) — nessun passaggio di conferma /act, dato che non viene registrato nulla.