How-To
Digitale Stempelkarte erstellen: Branding, Apple- & Google-Wallet, AI-Generator und 70+ Anpassungen
Schritt für Schritt: Wie du in Stempelkarte.app dein erstes Programm anlegst — von Brand-Farben über Stempel-Icons bis Wallet-Pass. Drei Wege, 70+ Optionen, Live-Vorschau.
Wenn du eine digitale Stempelkarte erstellst, baust du im Hintergrund zwei Wallet-Pässe gleichzeitig: ein Apple-Wallet .pkpass und einen Google-Wallet-Loyalty-Object. Beide werden aus einer einzigen Konfiguration im Stempelkarte-Dashboard generiert. Dieser Artikel führt dich durch alle drei Wege, ein Programm anzulegen, und erklärt jede der 70+ Konfigurationsoptionen — vom Branding über Stempel-Mechanik bis zu Anti-Fraud-Features. Bevor du startest: Den vollständigen Dashboard-Überblick findest du im Pillar-Artikel.
Drei Wege zur ersten Stempelkarte
Du hast drei Optionen, dein erstes Programm zu erstellen — alle führen am Ende zum selben Editor:
- AI-Generator aus Homepage-URL — schnellster Weg, ~10 Sekunden
- Manuell anlegen — volle Kontrolle, leeres Formular
- Aus einem Beispiel kopieren — nimm eines unserer Live-Beispiele als Vorlage
Option 1: AI-Generator
Du klickst „Mit AI erstellen", gibst die URL deiner Webseite ein, und das System scrapt deine Startseite. Innerhalb von 10–15 Sekunden bekommst du einen Draft mit:
- Geschäftsnamen (aus
<title>oder Hauptüberschrift) - Primärfarbe (aus Tailwind-Tokens, CSS-Variablen oder dominanter Logo-Farbe)
- Akzentfarbe (komplementär oder zweitstärkste UI-Farbe)
- Logo (extrahiert aus
<link rel="apple-touch-icon">oder Hero-Sektion) - Branche-Erkennung („Café", „Restaurant", „Friseur" …) als Vorschlag für Programm-Name
- Vorgeschlagener Reward-Text basierend auf Branche
Der Draft wird für 10 Minuten in deinem sessionStorage zwischengespeichert. Du landest im normalen Programm-Editor mit allen Feldern vorausgefüllt — und kannst alles anpassen, bevor du speicherst. Bei extraktionsbedingten Problemen (z. B. fehlendem Logo) zeigt der Editor Warnungen an.
Option 2: Manuell anlegen
Wenn du ein klares Branding hast oder dein Geschäft nicht öffentlich präsentiert ist (Insider-Loyalty, Early-Bird-Programme), startest du mit „Manuell anlegen". Du landest im leeren Editor und befüllst die Felder selbst. Dauer: ~3–5 Minuten für ein Standard-Programm.
Option 3: Aus Beispiel kopieren
Auf stempelkarte.app/beispiele findest du sechs interaktive Demo-Pässe (Café, Restaurant, Friseur, Bäckerei, Hundesalon, Foodtruck). Jedes lässt sich als Template direkt in dein Konto klonen — du übernimmst Mechanik und Brand-Style und passt sie nur an dein Geschäft an. Spar dir das Designen-von-Null.
Programm-Grundlagen
Egal welchen Weg du nimmst — diese vier Felder sind die Basis jedes Programms:
| Feld | Beschreibung | Beispiel |
|---|---|---|
| Programmname | Sichtbarer Titel auf der Wallet-Karte und im Dashboard | „Kaffee-Treuekarte" |
| Untertitel | Sub-Headline, optional, kursiv im Pass | „Der 5. ist gratis" |
| Belohnungstext | Was der Kunde bei vollem Stempel-Status bekommt | „1 Kaffee aufs Haus" |
| Homepage-URL | Click-Link auf der Pass-Rückseite, optional | https://cafe-milchschaum.at |
Stempel-Mechanik
| Feld | Bereich / Default | Bedeutung |
|---|---|---|
| Stempel-Ziel | 2–100 (Default: 5) | Wie viele Stempel bis zur Belohnung |
| Max. Stempel pro Tag | 1–10 (Default: 1) | Anti-Fraud-Tageslimit pro Karte |
| Ablauf in Tagen | 0–730 (0 = nie) | Stempel verfallen nach X Tagen Inaktivität |
| Bonus-Display-Timing | at_max | before_max | Belohnungszustand bei N oder schon bei N–1 |
| Bonus-Display Show Extra | Boolean | „+1 Stempel"-Suffix im Counter (X/Y+1) |
Branding: Farben, Logo, Hintergrund
Das Branding macht den Unterschied zwischen einer generischen „Treuekarte" und einer Karte, die auf den ersten Blick nach deinem Geschäft aussieht.
| Feld | Format | Wirkung |
|---|---|---|
| Brand-Farbe | Hex #RRGGBB | Hintergrund der Karte, Text-Kontrast wird automatisch gewählt |
| Akzentfarbe | Hex #RRGGBB | Stempel-Highlights, Reward-Eyebrow, CTA-Buttons im Pass |
| Logo | URL (Firebase Storage, max. 2 MB) | Erscheint im Pass-Header, automatisch retina-skaliert (1×, 2×, 3×) |
| Strip-Background | URL, optional | Hintergrundbild hinter den Stempeln (z. B. Latte-Foto für Café) |
| Strip-Overlay-Modus | none / darken / lighten / brand-tint | Wie das Hintergrundbild mit Brand-Farbe gemischt wird |
| Strip-Overlay-Opacity | 0–80 % (Default: 35 %) | Stärke des Overlays |
Stempel-Anzeige: Kreis-mit-Zahl oder Image-only
Du hast zwei grundsätzliche Anzeige-Modi:
circle-number (Default)
Klassische Kreise mit Nummerierung. Ungestempelt: Outline. Gestempelt: Akzentfarbe gefüllt mit Zahl in Brand-Farbe. Funktioniert gut für 5–10 Stempel.
image-only
Nur Stempel-Icons (Emoji oder Custom-URL), keine Zahlen. Ungestempelt: Graustufe. Gestempelt: voll farbig. Modern, sehr stilvoll für Boutique-Marken.
| Zusätzliche Optionen | Bedeutung |
|---|---|
| Stempel-Icon URL | Custom-Bild (PNG, transparent), z. B. dein Logo-Symbol |
| Stempel-Emoji | Aus kuratierter Palette (☕, 🥐, ✂️, 🐶 …) oder beliebiges Emoji |
| Stempel-Icon Skalierung | 50–200 % (Default: 100 %) — größer = dominanter |
| Image-only: Goal-Ring zeigen | Bei image-only: Fortschritts-Ring um leere Slots ein/aus |
Goal-Icon: das Symbol für „letzter Stempel"
Im Default zeigt der vorletzte Slot vor dem Reward einen Stern. Du kannst dieses Icon ersetzen:
| Feld | Wirkung |
|---|---|
| Use Custom Goal Icon | Toggle: eigenes Icon statt Stern |
| Goal-Icon URL | Bild-URL (z. B. dein Logo als Krone) |
| Goal-Icon Emoji | Alternativ Emoji (z. B. 🏆) |
| Goal-Icon Akzent-Tint | Färbt das Icon in deiner Akzentfarbe ein |
Reward-Screen: der Belohnungs-Moment
Wenn die Karte voll ist, switcht der Pass in den Reward-State. Hier hast du genauso viele Anpassungsoptionen wie für den Progress-State:
| Feld | Bedeutung |
|---|---|
| Reward-Background URL | Eigenes Hero-Bild im Reward-State (z. B. Foto deines Signature-Drinks) |
| Reward-Background-Color | Solid-Farbe als Fallback ohne Bild |
| Reward-Overlay-Modus | Wie oben für Strip |
| Reward-Overlay-Opacity | 0–80 % |
| Reward-Eyebrow-Text | Kleines Headline-Element über dem Reward (z. B. „🎉 Glückwunsch") |
| Reward-Text-Color | Hex-Farbe für die große Belohnungszeile |
| Reward-Sunburst | Strahlende Animation hinter dem Reward — celebratory |
| Hide Reward Eyebrow | Toggle: Eyebrow weglassen (für minimalistisches Design) |
| Hide Reward Text | Toggle: nur Bild ohne Text (wenn das Bild bereits alles aussagt) |
Apple-Wallet-Integration: das .pkpass-Format
Apple verlangt für Wallet-Pässe das proprietäre PassKit-Format — eine signierte ZIP-Datei mit fest definierter Struktur. Stempelkarte generiert diese serverseitig:
- Pass.json mit allen konfigurierten Feldern (Programm, Belohnung, Counter, Geofences, Web-Service-URL für Updates)
- Strip-Image (1×, 2×, 3×) — gerendert via
sharpaus deinem Branding - Logo (1×, 2×, 3×) — automatisch skaliert
- Icon (1×, 2×, 3×) — für Notification-Center
- Signatur mit deinem Pass-Type-Zertifikat (managed by Stempelkarte)
Wenn du den Pass-Generator triggerst, läuft folgender Pipeline-Workflow:
- Programm-Daten aus dem Editor → AppleWalletInput
- Logo-Fetch aus Firebase Storage (8s Timeout, 15min TTL Cache)
- Sharp-Resizing auf alle Retina-Stufen
renderAppleStripSet()rendert Strip-Bilder mit deinen Farben, Stempeln, Goal-Icon, Sunburst (falls Reward-State)- Pass.json wird mit allen Feldern befüllt
- PassKit-Generator signiert die ZIP
.pkpasswird ausgeliefert
Der Kunde tippt auf „Zu Wallet hinzufügen" — ohne App-Installation. iOS erkennt den MIME-Type application/vnd.apple.pkpass automatisch.
Push-Updates via APNs
Sobald ein neuer Stempel kommt, schickt Stempelkarte einen APNs-Push an Apples Server. Apple weckt den Pass auf dem Gerät auf, der lädt die neuen Daten still im Hintergrund. Der Kunde sieht die neue Stempel-Anzahl beim nächsten Öffnen der Karte — ohne App-Update, ohne Neuinstallation.
Google-Wallet-Integration: LoyaltyClass + LoyaltyObject
Google nutzt ein API-zentriertes Modell. Pro Programm legen wir eine LoyaltyClass an (statisches Branding), pro Karte ein LoyaltyObject (dynamische Stempel-Anzahl). Bei jedem Stempel macht das Backend einen PATCH-Request — Google synchronisiert die Karte automatisch auf alle Geräte des Users.
Was die LoyaltyClass enthält
- IssuerName + ProgramName (deutsch und englisch)
- HexBackgroundColor (deine Brand-Farbe)
- ProgramLogo (Firebase Storage URL)
- HeroImage (deine Strip-Vorschau)
- TextModulesData („So funktioniert's"-Erklärung)
- ValueAddedModuleData (optionaler Promo-Block, siehe unten)
- EnableSmartTap (NFC-Stempelung, falls aktiviert)
- ScreenShotEligibility (
INELIGIBLEwenn Disable-Sharing aktiv) - MultipleDevicesAndHoldersAllowedStatus (
ONE_USER_ALL_DEVICESwenn Disable-Sharing aktiv)
Was das LoyaltyObject enthält
- Stempel-Counter (z. B. „3/5")
- Aktueller Status (
ACTIVEoderEXPIREDwenn Ablaufdatum erreicht) - Barcode (statischer QR oder rotierender TOTP, je nach Programm)
- HeroImage (mit Cache-Buster: ändert sich je Stempel-Anzahl, damit Google den neuen Zustand sofort sieht)
- LinksModuleData (Homepage, Karte online ansehen, Support-Mail, Datenschutz, Impressum)
- ValidTimeInterval (Ablaufdatum)
- MerchantLocations (≤10 Geofences mit Lat/Lon)
Push-Notifications via Wallet-Broadcast
Im Gegensatz zu Apple kann Google direkte Push-Notifications auf den Lockscreen schicken. Im Dashboard schreibst du Header und Body, wählst die Zielprogramme — und die Notification erscheint bei allen Google-Wallet-Usern als Banner direkt im Sperrbildschirm. Mehr dazu im Reporting-Spoke.
Live-Vorschau: was du tippst, siehst du
Während du im Editor schreibst, läuft auf der rechten Seite der WalletSimulator — dieselbe Komponente, die wir auf /beispiele für Demo-Pässe zeigen. Du toggelst zwischen Apple und Google, scrubst durch alle Stempel-Zustände (0/5, 1/5, …, 5/5 + Reward) und siehst sofort, wie sich Farben, Icons und Texte auf jeder Stufe verhalten.
Programm bearbeiten
Das Strip-Image-Rendering läuft serverseitig in /api/wallet-preview/strip.png und ist 200 ms gecached — schnelle Drag-Eingaben (z. B. Color-Picker) werden zu einem Request gebündelt, damit es flüssig bleibt.
E-Mail-Capture & Loyalty-Tiers
Zwei besonders mächtige Features für fortgeschrittene Programme:
E-Mail-Capture-Modi
| Modus | Verhalten |
|---|---|
off | Keine E-Mail-Erfassung. Karte ist 100 % anonym. |
optional | Nach Save-to-Wallet wird ein E-Mail-Feld angeboten. Bonus-Stempel als Anreiz möglich. |
required | Karte kann nur mit E-Mail gespeichert werden. Maximale Reach für Newsletter. |
Email-Capture-Reward-Stempel = die Anzahl Bonus-Stempel, die der Kunde bekommt, wenn er seine E-Mail eingibt. Übliche Werte: 1–2 Stempel. Sehr wirksam als Konversionstreiber.
Loyalty-Tiers (Bronze / Silber / Gold)
Im Scale-Tarif kannst du mehrstufige Programme bauen: Eine Karte hat Stufen, der Kunde wandert mit jeder gefüllten Stempel-Reihe in den nächsten Tier. Die tierConfig ist ein JSON-Block, der pro Stufe Belohnungstext, Schwellenwert und Anzeigenamen definiert.
Beispiel: Café Milchschaum führt Bronze (5 Kaffees → gratis Kaffee), Silber (15 Kaffees → +1 Croissant gratis), Gold (30 Kaffees → eigene Tasse mit Namen). Sehr stark für Bestandskunden-Bindung.
Anti-Fraud: Rotating-Barcode, Smart-Tap, Disable-Sharing
Drei Sicherheitsfeatures, die Missbrauch verhindern:
Rotating-Barcode (TOTP)
Der QR-Code auf der Karte rotiert alle 30 Sekunden. Jeder Stempel-Versuch mit einem alten Code schlägt fehl. Verhindert Screenshots und Foto-Sharing. Verfügbar im Scale-Tarif. TOTP ist der gleiche Standard wie bei Authenticator-Apps — sehr sicher.
Smart-Tap (NFC)
Statt eines QR-Codes hält der Kunde sein Handy an einen NFC-Reader (z. B. an deiner Kasse). Stempel ist sofort vergeben, ohne dass du oder der Kunde das Smartphone entsperren müssen. Voraussetzung: Kunde hat Google Wallet mit Smart-Tap aktiviert. Verfügbar im Scale-Tarif.
Disable-Sharing
Bei Google Wallet: screenShotEligibility: INELIGIBLE und multipleDevicesAndHoldersAllowedStatus: ONE_USER_ALL_DEVICES. Bedeutet: Karten können nicht weitergeleitet werden, Screenshots blocken die Pass-Anzeige. Maximaler Schutz vor Karten-Sharing. Verfügbar im Scale-Tarif.
Standard-Anti-Fraud (in allen Tarifen aktiv)
- HMAC-SHA256-signierte QR-Token (60 s TTL)
- Pro-Programm Max-Stempel-pro-Tag-Limit
- Audit-Log mit Staff-ID, Zeit, IP für jeden Stempel
- Kein anonymer Stempel-Trigger — nur eingeloggtes Personal kann stempeln
Veröffentlichen, QR-Code, Pause/Beenden
Sobald du zufrieden bist, klickst du Veröffentlichen. Das Programm wechselt auf Status active, der QR-Code wird generiert (/s/[slug]/scan URL als QR), und du kannst ihn:
- Als PNG herunterladen (Standard-Format für Drucker)
- Als SVG herunterladen (verlustfrei skalierbar, perfekt für Posterdesign)
- Direkt drucken über den Browser-Print-Dialog
- Per E-Mail teilen (Direkt-Link ohne Login)
Programm pausieren oder beenden
- Pausieren → bestehende Karten bleiben intakt, neue Stempel werden blockiert. Reversibel.
- Beenden → Programm geht in Read-only. Karten können den aktuellen Stand noch einlösen, aber keine neuen Stempel sammeln. Irreversibel.
- Löschen → kompletter Hard-Delete inkl. aller zugehöriger Karten und Stempel-Historien. Zwei-Faktor-Bestätigungsdialog.
Test-Karten erstellen
Vor dem Go-live solltest du den kompletten Customer-Workflow selbst durchspielen. Klick im Programm-Editor auf „Test-Karte erstellen" — du bekommst eine vollwertige Karte ohne reale Customer-ID, die du selbst stempeln, einlösen und löschen kannst. Test-Karten zählen nicht zu deinem Karten-Kontingent und sind im Reporting separat ausgewiesen.
Zusammenfassung: dein erstes Programm in 5 Minuten
Wenn du der Reihe nach vorgehst:
- AI-Generator → URL eintippen, Draft prüfen
- Programm-Grundlagen anpassen (Name, Reward, Stempel-Ziel)
- Branding finalisieren (Logo, Farben, Stempel-Emoji)
- Live-Vorschau prüfen — durch alle Stempel-Zustände scrubben
- Anti-Fraud wählen (Standard reicht meistens)
- Veröffentlichen → QR drucken → erste Karte ausgeben