Bloco Raspadinha
Um cartão de prêmio para raspar e revelar, construído sobre a mesma técnica de CSS :checked dos blocos de acordeão e roleta premiada. Uma caixa de seleção escondida, um rótulo tocável estilizado como superfície de raspagem, e uma regra CSS que troca o que fica visível no momento em que ela é marcada — sem nenhum JavaScript.
Como funciona
Onde quer que o CSS cinético seja respeitado, o bloco renderiza uma superfície de raspagem — um <label> estilizado com um fundo listrado diagonal cinza e um aviso "Raspe aqui" — sobreposta ao prêmio. Tocar nela marca a caixa de seleção escondida vinculada, que dispara uma regra CSS que esconde a superfície de raspagem e revela o prêmio por baixo, direto na caixa de entrada. Não há gesto de arrastar nem animação de raspagem parcial. É um único toque para revelar: a mesma interação que a roda da roleta premiada e o expandir/recolher do acordeão usam.
O fallback é o que torna esse bloco digno de destaque específico: em vez de um controle separado sempre visível, como a roleta premiada e o quiz têm, a raspadinha depende de um "padrão seguro" no próprio estilo. O estilo em linha da superfície de raspagem é display:none; ela só se torna visível quando uma regra <style> (restrita a clientes com capacidade cinética) força explicitamente display:block. No Outlook e em qualquer outro cliente que não respeita essa folha de estilo, a superfície simplesmente nunca aparece, e o elemento de prêmio (que não carrega esse estilo de ocultação) fica visível por padrão. Então não existe nenhum beco sem saída de "não raspado": um cliente ou mostra o gesto de raspar (e o prêmio aparece assim que tocado), ou pula o gesto por completo e mostra o prêmio diretamente. Ninguém fica preso olhando para um cartão que não pode ser raspado.
Assim como a roleta premiada, a raspadinha não envia nada de volta ao MailInApp quando a superfície é raspada — não há evento de revelação, voto ou envio registrado. Ela não aparece no painel de respostas, na exportação de CSV ou no mapa de calor de cliques. Se o bloco tiver um link de prêmio opcional configurado, tocar no prêmio revelado apenas segue esse link como qualquer outro <a href>. Ele não passa pelo redirecionamento de rastreamento de cliques do MailInApp, da forma como o link de um bloco button/image/social passa, então o clique no prêmio de uma raspadinha também não aparece no mapa de calor de cliques.
Campos configuráveis:
- Título — o texto de destaque acima do cartão, além de cor e tamanho de fonte próprios.
- Texto do prêmio — o que é revelado sob a superfície de raspagem (padrão "🎉 20% off your next order!").
- Link do prêmio (opcional) — se definido, o prêmio revelado é renderizado como um link real estilizado como botão para essa URL; se deixado em branco, é renderizado como texto simples em negrito, já que não há nada para linkar.
- Cor de fundo, preenchimento interno, borda, raio da borda no cartão.
- Cor do texto do prêmio e cor de fundo do prêmio — deliberadamente sem um padrão embutido, como a maioria das substituições de cor têm, porque o bloco renderiza duas variantes de prêmio visualmente diferentes (um botão branco sobre cor quando um link é definido, texto escuro sem fundo quando não é) e um único padrão fixo tornaria uma das duas variantes invisível. Cada variante recorre ao seu próprio padrão sensato apenas quando você deixa o campo vazio.
Exemplos
Subject
Scratch off to reveal your discount
Um e-mail de retenção pode usar a raspadinha como uma alternativa mais leve à roleta premiada para revelar um único desconto garantido — veja Engajamento e fidelização para mais sobre esse tipo de gamificação leve. Um envio de aniversário pode revelar um código de cupom personalizado como o texto do prêmio (combine com uma tag de personalização para personalizar o código por destinatário, já que o texto do prêmio é apenas um texto configurável). Um e-mail de conclusão de campanha "escolhemos um vencedor" pode usá-la para revelar se um destinatário específico ganhou um sorteio, com o link do prêmio apontando para uma página de resgate.
Como é o fallback estático
<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>
O <div> do prêmio não carrega nenhum estilo de ocultação próprio, então ele fica visível incondicionalmente, a menos que uma folha de estilo de nível cinético o esconda ativamente — o gesto de revelação é puramente aditivo sobre um prêmio já visível.