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

Canonical: https://stempelkarte.app/blog/digitale-stempelkarte-erstellen
Published: 2026-04-27
Updated: 2026-04-27
Author: Stempelkarte.app Team (candybytes GmbH)

---
export const metadata = {
  title:
    'Digitale Stempelkarte erstellen: Branding, Apple- & Google-Wallet, AI-Generator und 70+ Anpassungen',
  description:
    '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.',
  publishedAt: '2026-04-27',
  updatedAt: '2026-04-27',
  category: 'How-To',
  tags: [
    'Programm erstellen',
    'Apple Wallet',
    'Google Wallet',
    'Branding',
    'AI-Generator',
    'Stempelkarte',
  ],
  readingMinutes: 12,
};

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+ Konfigurations­optionen — vom Branding über Stempel-Mechanik bis zu Anti-Fraud-Features. Bevor du startest: Den vollständigen Dashboard-Überblick findest du im [Pillar-Artikel](/blog/merchant-dashboard-funktionen).

## Drei Wege zur ersten Stempelkarte

Du hast drei Optionen, dein erstes Programm zu erstellen — alle führen am Ende zum selben Editor:

1. **AI-Generator aus Homepage-URL** — schnellster Weg, ~10 Sekunden
2. **Manuell anlegen** — volle Kontrolle, leeres Formular
3. **Aus einem Beispiel kopieren** — nimm eines unserer [Live-Beispiele](/beispiele) als Vorlage

### Option 1: AI-Generator

<Callout tone="tip" title="Wann der AI-Generator gut funktioniert">
Wenn deine Webseite ein klares Logo, Brand-Farben in den Header-/Hero-Sektionen und einen erkennbaren Geschäfts­namen hat. Funktioniert besonders gut für Cafés, Bäckereien, Friseure und Restaurants mit etablierter Webpräsenz. Bei sehr minimalistischen oder grafiklastigen Seiten extrahieren wir die Farben direkt aus dem CSS — Ergebnisse können dann variieren.
</Callout>

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äfts­namen (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 extraktions­bedingten 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](/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` | Belohnungs­zustand bei N oder schon bei N–1 |
| **Bonus-Display Show Extra** | Boolean | „+1 Stempel"-Suffix im Counter (X/Y+1) |

<Callout tone="info" title="`at_max` vs. `before_max`">
**`at_max`** (Default): Der Kunde sieht den Reward-Screen erst, wenn er den letzten Stempel hat. Klassisches Modell.<br />
**`before_max`**: Schon bei N–1 Stempeln zeigt die Karte den Reward an. Nützlich, wenn der letzte Stempel beim Einlösen passiert (z. B. „Das 5. Mal wirst du eingestempelt UND bekommst gratis Kaffee" — Reward-Anzeige bereits beim 4. Stempel signalisiert: nächstes Mal ist's so weit).
</Callout>

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

<StampMockup
  merchant="Cafe Milchschaum"
  program="Kaffee-Treuekarte"
  reward="Der 5. Kaffee gratis"
  brandColor="#5B3826"
  accentColor="#E8C180"
  stamps={2}
  required={5}
  emoji="☕"
  caption="Brand-Farbe Espresso (#5B3826), Akzent Karamell (#E8C180), Stempel-Emoji ☕"
/>

| 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 | Hintergrund­bild hinter den Stempeln (z. B. Latte-Foto für Café) |
| **Strip-Overlay-Modus** | `none` / `darken` / `lighten` / `brand-tint` | Wie das Hintergrund­bild mit Brand-Farbe gemischt wird |
| **Strip-Overlay-Opacity** | 0–80 % (Default: 35 %) | Stärke des Overlays |

<Callout tone="tip" title="Logo-Tipps">
- **PNG mit transparentem Hintergrund** funktioniert am besten — keine weißen Boxen rund um dein Logo<br />
- **Quadratisch oder 3:1 horizontal** — beide Formate werden auf 160×50pt skaliert<br />
- **2× Auflösung mindestens** (z. B. 320×100 px), damit Retina-Displays scharf bleiben<br />
- **Kontrast zur Brand-Farbe prüfen** — helle Logos brauchen dunkle Brand-Farben und umgekehrt
</Callout>

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

<StampMockup
  merchant="Cafe Milchschaum"
  program="Kaffee-Treuekarte"
  reward="Der 5. Kaffee gratis"
  brandColor="#5B3826"
  accentColor="#E8C180"
  stamps={5}
  required={5}
  state="reward"
  caption="Reward-Zustand: Sunburst, Eyebrow-Text, große Belohnung im Mittelpunkt."
/>

## Reward-Screen: der Belohnungs-Moment

Wenn die Karte voll ist, switcht der Pass in den **Reward-State**. Hier hast du genauso viele Anpassungs­optionen 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 Belohnungs­zeile |
| **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 `sharp` aus 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:

1. Programm-Daten aus dem Editor → AppleWalletInput
2. Logo-Fetch aus Firebase Storage (8s Timeout, 15min TTL Cache)
3. Sharp-Resizing auf alle Retina-Stufen
4. `renderAppleStripSet()` rendert Strip-Bilder mit deinen Farben, Stempeln, Goal-Icon, Sunburst (falls Reward-State)
5. Pass.json wird mit allen Feldern befüllt
6. PassKit-Generator signiert die ZIP
7. `.pkpass` wird 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 (`INELIGIBLE` wenn Disable-Sharing aktiv)
- MultipleDevicesAndHoldersAllowedStatus (`ONE_USER_ALL_DEVICES` wenn Disable-Sharing aktiv)

### Was das LoyaltyObject enthält

- Stempel-Counter (z. B. „3/5")
- Aktueller Status (`ACTIVE` oder `EXPIRED` wenn 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 (Ablauf­datum)
- 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 Ziel­programme — und die Notification erscheint bei allen Google-Wallet-Usern als Banner direkt im Sperrbildschirm. Mehr dazu im [Reporting-Spoke](/blog/loyalty-reporting-push-newsletter#wallet-push-broadcasts).

## 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](/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.

<DashboardMock variant="program-editor" caption="Editor mit Live-Vorschau. Jede Änderung links wird in der Vorschau rechts in <300 ms gerendert." />

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 Konversions­treiber.

### 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 Belohnungs­text, Schwellenwert und Anzeige­namen 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 Sicherheits­features, 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)

<Callout tone="info" title="QR-Druck-Empfehlung">
- **Mindestgröße:** 4×4 cm für Tisch­aufsteller, 8×8 cm für Türaufkleber<br />
- **Hoher Kontrast:** dunkler QR auf weißem Hintergrund, **niemals** weißer QR auf farbigem Hintergrund<br />
- **Quiet Zone:** mindestens 4× QR-Modulgröße als Rand rundherum<br />
- **Trial-Test:** scanne mit zwei verschiedenen Smartphones (iOS und Android), bevor du druckst
</Callout>

### 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ätigungs­dialog.

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

1. **AI-Generator** → URL eintippen, Draft prüfen
2. **Programm-Grundlagen** anpassen (Name, Reward, Stempel-Ziel)
3. **Branding** finalisieren (Logo, Farben, Stempel-Emoji)
4. **Live-Vorschau** prüfen — durch alle Stempel-Zustände scrubben
5. **Anti-Fraud** wählen (Standard reicht meistens)
6. **Veröffentlichen** → QR drucken → erste Karte ausgeben

<Callout tone="success" title="Nächste Schritte">
- [Wie du Bestandskunden über Push und Newsletter reaktivierst →](/blog/loyalty-reporting-push-newsletter)<br />
- [Komplettübersicht aller Dashboard-Funktionen →](/blog/merchant-dashboard-funktionen)<br />
- [Live-Beispiele aus 6 Branchen →](/beispiele)<br />
- [Kostenlos starten →](/signup)
</Callout>