mailinapp
Documentation menu

Rubbelkarten-Block

Eine Rubbelkarte zum Freilegen eines Preises, aufgebaut auf derselben :checked-CSS-Technik wie die Blöcke Akkordeon und Glücksrad. Eine versteckte Checkbox, ein antippbares Label im Stil einer Rubbeloberfläche und eine CSS-Regel tauschen aus, was sichtbar ist, sobald sie angehakt wird — ganz ohne JavaScript.

Wie es funktioniert

Überall dort, wo kinetisches CSS beachtet wird, rendert der Block eine Rubbeloberfläche — ein <label> mit diagonal grau gestreiftem Hintergrund und der Aufforderung „Hier rubbeln“ — über dem Preis liegend. Ein Tippen darauf hakt die verknüpfte versteckte Checkbox an, was eine CSS-Regel auslöst, die die Rubbeloberfläche verbirgt und den darunterliegenden Preis direkt im Postfach offenlegt. Es gibt keine Ziehgeste oder Teil-Rubbel-Animation. Es ist ein einziges Antippen-zum-Freilegen: dieselbe Interaktion, die sowohl das Rad des Glücksrad-Blocks als auch das Auf-/Zuklappen des Akkordeons nutzen.

Der Fallback ist es, was diesen Block besonders erwähnenswert macht: Statt eines separaten, immer sichtbaren Steuerelements, wie es Glücksrad und Quiz haben, verlässt sich die Rubbelkarte auf einen „sicheren Standardzustand“ direkt im Styling selbst. Der eigene Inline-Stil der Rubbeloberfläche ist display:none; sie wird überhaupt erst sichtbar, sobald eine <style>-Regel (beschränkt auf kinetikfähige Clients) sie explizit auf display:block erzwingt. In Outlook und jedem anderen Client, der dieses Stylesheet nicht beachtet, erscheint die Oberfläche schlicht nie, und das Preiselement (das keinen solchen Verbergungsstil trägt) ist standardmäßig sichtbar. Es gibt also nirgendwo eine „ungerubbelte“ Sackgasse: Ein Client zeigt entweder die Rubbelgeste (und der Preis erscheint nach dem Antippen), oder er überspringt die Geste vollständig und zeigt den Preis direkt. Niemand bleibt jemals vor einer nicht rubbelbaren Karte hängen.

Wie das Glücksrad sendet auch die Rubbelkarte beim Rubbeln der Oberfläche nichts an MailInApp zurück — es gibt kein Freilegungsereignis, keine Stimme, keine erfasste Einreichung. Sie erscheint nicht im Antworten-Dashboard, im CSV-Export oder in der Klick-Heatmap. Ist ein optionaler Preislink konfiguriert, folgt ein Tippen auf den freigelegten Preis einfach diesem Link wie jedem anderen <a href>. Er wird nicht über die Klick-Tracking-Weiterleitung von MailInApp geleitet, wie es beim Link eines button-/image-/social-Blocks der Fall ist, sodass ein Preisklick einer Rubbelkarte auch nicht in der Klick-Heatmap auftaucht.

Konfigurierbare Felder:

  • Titel — die Überschrift über der Karte, plus eigene Farbe und Schriftgröße.
  • Preistext — was unter der Rubbeloberfläche freigelegt wird (Standard „🎉 20 % Rabatt auf deine nächste Bestellung!“).
  • Preislink (optional) — falls gesetzt, wird der freigelegte Preis als echter buttonartiger Link zu dieser URL gerendert; bleibt er leer, wird stattdessen fetter Klartext gerendert, da es nichts zu verlinken gibt.
  • Hintergrundfarbe, Innenabstand, Rahmen, Rahmenradius der Karte.
  • Preistextfarbe und Preishintergrundfarbe — haben bewusst keinen eingebauten Standardwert, wie es die meisten Farbüberschreibungen sonst haben, weil der Block zwei visuell unterschiedliche Preisvarianten rendert (einen weißen Button auf Farbe, wenn ein Link gesetzt ist, dunklen Text ohne Hintergrund, wenn nicht) und ein einzelner fest codierter Standardwert eine der beiden Varianten unsichtbar machen würde. Jede Variante greift nur dann auf ihren eigenen sinnvollen Standardwert zurück, wenn du das Feld leer lässt.

Beispiele

Subject

Scratch off to reveal your discount

Eine Bindungs-E-Mail kann die Rubbelkarte als leichtgewichtigere Alternative zum Glücksrad für die Enthüllung eines garantierten Rabatts nutzen — siehe Engagement & Loyalität für mehr zu dieser Art leichtgewichtiger Gamification. Eine Geburtstags- oder Jubiläums-Sendung kann einen personalisierten Gutscheincode als Preistext freilegen (kombiniere ihn mit einem Merge-Tag, um den Code pro Empfänger zu personalisieren, da der Preistext selbst nur konfigurierbarer Text ist). Eine abschließende Kampagnen-E-Mail „Wir haben einen Gewinner ausgelost“ kann damit offenlegen, ob ein bestimmter Empfänger bei einem Gewinnspiel gewonnen hat, wobei der Preislink auf eine Einlöseseite verweist.

So sieht der statische Fallback aus

<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>

Das Preis-<div> trägt keinen eigenen Verbergungsstil, ist also bedingungslos sichtbar, sofern es nicht durch ein kinetisches Stylesheet aktiv verborgen wird — die Freilegungsgeste ist rein additiv auf einem bereits sichtbaren Preis.

Siehe auch