Bloque de rasca y gana
Una tarjeta de premio para raspar y revelar, construida sobre la misma técnica CSS :checked que los bloques de acordeón y gira y gana. Una casilla oculta, una etiqueta tocable con estilo de superficie de raspado, y una regla CSS intercambian lo que es visible en el momento en que se marca — sin JavaScript en ningún lugar.
Cómo funciona
Donde se respeta el CSS cinético, el bloque renderiza una superficie de raspado — una <label> con estilo de fondo a rayas diagonales grises y una indicación de "Raspa aquí" — colocada sobre el premio. Tocarla marca la casilla oculta vinculada, lo que activa una regla CSS que oculta la superficie de raspado y revela el premio debajo, directamente en la bandeja de entrada. No hay gesto de arrastre ni animación de raspado parcial. Es un único toque para revelar: la misma interacción que usan tanto la rueda de gira y gana como la expansión/contracción del acordeón.
La alternativa es lo que hace que valga la pena destacar este bloque en particular: en lugar de un control separado siempre visible como tienen gira y gana y cuestionario, rasca y gana se basa en un "valor seguro por defecto" en el propio estilo. El estilo en línea propio de la superficie de raspado es display:none; solo se vuelve visible una vez que una regla <style> (limitada a clientes con capacidad cinética) la fuerza explícitamente a display:block. En Outlook y cualquier otro cliente que no respete esa hoja de estilos, la superficie simplemente nunca aparece, y el elemento del premio (que no lleva ese estilo de ocultamiento) es visible por defecto. Así que no hay ningún callejón sin salida "sin raspar" en ningún lugar: un cliente muestra el gesto de raspado (y el premio aparece al tocarlo), o se salta el gesto por completo y muestra el premio directamente. Nadie se queda nunca mirando una tarjeta que no se puede raspar.
Igual que gira y gana, rasca y gana no envía nada de vuelta a MailInApp cuando se raspa la superficie — no se registra ningún evento de revelación, voto ni envío. No aparece en el panel de respuestas, la exportación CSV ni el mapa de calor de clics. Si el bloque tiene configurado un enlace de premio opcional, tocar el premio revelado simplemente sigue ese enlace como cualquier otro <a href>. No se enruta a través de la redirección de seguimiento de clics de MailInApp de la forma en que sí lo hace el enlace de un bloque button/image/social, así que el clic en el premio de un rasca y gana tampoco aparecerá en el mapa de calor de clics.
Campos configurables:
- Título — el encabezado sobre la tarjeta, más su propio color y tamaño de fuente.
- Texto del premio — lo que se revela debajo de la superficie de raspado (por defecto "🎉 ¡20% de descuento en tu próximo pedido!").
- Enlace del premio (opcional) — si se define, el premio revelado se renderiza como un enlace real con estilo de botón hacia esa URL; si se deja en blanco, se renderiza como texto en negrita simple en su lugar, ya que no hay nada a lo que enlazar.
- Color de fondo, relleno, borde, radio de borde de la tarjeta.
- Color del texto del premio y color de fondo del premio — deliberadamente no tienen un valor por defecto incorporado como sí tienen la mayoría de las anulaciones de color, porque el bloque renderiza dos variantes de premio visualmente distintas (un botón blanco sobre color cuando se define un enlace, texto oscuro sin fondo cuando no) y un valor por defecto fijo haría invisible a una de las dos variantes. Cada variante recurre a su propio valor por defecto razonable solo cuando dejas el campo vacío.
Ejemplos
Subject
Scratch off to reveal your discount
Un correo de retención puede usar rasca y gana como una alternativa más ligera a gira y gana para revelar un único descuento garantizado — mira Interacción y fidelización para más sobre este tipo de gamificación ligera. Un envío de cumpleaños o aniversario puede revelar un código de cupón personalizado como texto del premio (combínalo con una etiqueta de combinación para personalizar el código por destinatario, ya que el texto del premio en sí es solo contenido configurable). Un correo de conclusión de campaña de "elegimos un ganador" puede usarlo para revelar si un destinatario específico ganó un sorteo, con el enlace del premio apuntando a una página de reclamo.
Cómo se ve la alternativa estática
<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>
El <div> del premio no lleva ningún estilo de ocultamiento propio, así que es visible incondicionalmente a menos que una hoja de estilos de nivel cinético lo oculte activamente — el gesto de revelación es puramente aditivo sobre un premio ya visible.