Bloc Carte à gratter
Une carte à gratter pour révéler un lot, construite sur la même technique CSS :checked que les blocs accordéon et roue de la fortune. Une case à cocher cachée, un libellé touchable stylé comme une surface à gratter, et une règle CSS qui échange ce qui est visible dès qu'elle est cochée — aucun JavaScript nulle part.
Comment ça fonctionne
Partout où le CSS cinétique est respecté, le bloc rend une surface à gratter — un <label> stylé avec un fond rayé gris en diagonale et une invite « Grattez ici » — superposée au lot. La toucher coche la case à cocher cachée liée, ce qui déclenche une règle CSS qui masque la surface à gratter et révèle le lot en dessous, directement dans la boîte de réception. Il n'y a ni geste de glissement ni animation de grattage partiel. C'est une révélation en un seul tap : la même interaction qu'utilisent la roue du bloc roue de la fortune et le pli/dépli de l'accordéon.
L'alternative est ce qui rend ce bloc particulièrement intéressant à souligner : au lieu d'un contrôle séparé toujours visible comme en ont la roue de la fortune et le quiz, la carte à gratter repose sur une « valeur par défaut sûre » dans le style lui-même. Le style en ligne propre de la surface à gratter est display:none ; elle ne devient visible que lorsqu'une règle <style> (limitée aux clients à capacité cinétique) la force explicitement en display:block. Dans Outlook et tout autre client qui ne respecte pas cette feuille de style, la surface n'apparaît tout simplement jamais, et l'élément du lot (qui ne porte aucun style de masquage de ce genre) est visible par défaut. Il n'y a donc jamais d'impasse « non gratté » nulle part : un client montre soit le geste de grattage (et le lot apparaît une fois touché), soit ignore entièrement le geste et montre le lot d'emblée. Personne ne reste jamais bloqué à fixer une carte qu'il ne peut pas gratter.
Comme la roue de la fortune, la carte à gratter ne renvoie rien à MailInApp quand la surface est grattée — il n'y a aucun événement de révélation, vote, ou soumission enregistré. Elle n'apparaît pas dans le tableau de bord des réponses, l'export CSV, ou la carte de chaleur des clics. Si le bloc a un lien de lot optionnel configuré, toucher le lot révélé suit simplement ce lien comme n'importe quel autre <a href>. Il n'est pas routé via la redirection de suivi des clics de MailInApp comme l'est le lien d'un bloc button/image/social, donc le clic sur le lot d'une carte à gratter n'apparaîtra pas non plus dans la carte de chaleur des clics.
Champs configurables :
- Titre — l'intitulé au-dessus de la carte, plus sa propre couleur et sa propre taille de police.
- Texte du lot — ce qui est révélé sous la surface à gratter (par défaut « 🎉 20% off your next order! »).
- Lien du lot (optionnel) — si défini, le lot révélé se rend comme un vrai lien stylé en bouton vers cette URL ; s'il est laissé vide, il se rend à la place comme du texte en gras simple, puisqu'il n'y a rien vers quoi créer de lien.
- Couleur de fond, marge intérieure, bordure, rayon de bordure sur la carte.
- Couleur du texte du lot et couleur de fond du lot — n'ont délibérément aucune valeur par défaut intégrée comme la plupart des surcharges de couleur, car le bloc rend deux variantes de lot visuellement différentes (un bouton blanc-sur-couleur quand un lien est défini, un texte foncé sans fond quand ce n'est pas le cas) et une seule valeur par défaut codée en dur rendrait l'une des deux variantes invisible. Chaque variante revient à sa propre valeur par défaut sensée seulement quand vous laissez le champ vide.
Exemples
Subject
Scratch off to reveal your discount
Un email de rétention peut utiliser la carte à gratter comme une alternative plus légère à la roue de la fortune pour révéler une seule réduction garantie — voir Engagement et fidélisation pour en savoir plus sur ce type de gamification légère. Un envoi d'anniversaire (personnel ou d'ancienneté) peut révéler un code de coupon personnalisé comme texte du lot (combinez-le avec une balise de fusion pour personnaliser le code par destinataire, puisque le texte du lot lui-même n'est qu'un texte configurable). Un email de conclusion de campagne « nous avons choisi un gagnant » peut l'utiliser pour révéler si un destinataire spécifique a gagné un tirage au sort, avec le lien du lot pointant vers une page de réclamation.
À quoi ressemble l'alternative statique
<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>
Le <div> du lot ne porte aucun style de masquage propre, donc il est visible sans condition à moins qu'une feuille de style de niveau cinétique ne le cache activement — le geste de révélation est purement additif par-dessus un lot déjà visible.