Wallet-Karten brandern: Logo, Farben, Stempel-Icon — deine Marke in Apple & Google Wallet

Eine digitale Stempelkarte mit dem reloop-Standard-Look funktioniert technisch — aber sie ist eine Marketing-Verschwendung. Jedes Mal, wenn ein Gast die Karte in Apple Wallet oder Google Wallet öffnet, könnte er deine Marke sehen: dein Logo, deine Brand-Farben, dein Hintergrund-Bild. Diese Anleitung zeigt dir, wie du in 10 Minuten eine Wallet-Karte komplett an dein Unternehmen anpasst — und welche Apple/Google-Specs du dabei kennen musst, damit dein Logo nicht von Wallet-internen Masken angeschnitten wird.

Was Apple Wallet und Google Wallet jeweils anders machen

Wichtig zu verstehen, bevor du irgendwas hochlädst: Apple und Google rendern dein Logo komplett unterschiedlich.

Apple Wallet

• Dein Logo erscheint oben links über dem Brand-Color-Hintergrund
• Format: rechteckiges Banner (max 160 × 50 pt, das ist 480 × 150 px @ 3× Retina)
• Aspect Ratio: ca. 3.2 : 1 (querformat)
• Apple zeigt das Logo as-is ohne Maske — wenn du ein quadratisches Logo gibst, sieht es klein und mickrig aus

Google Wallet

• Dein Logo erscheint oben links in einem Kreis
• Format: quadratisch (mindestens 660 × 660 px)
• Google maskiert es automatisch zum Kreis, mit 15 % Safe Area um den Rand
• Wenn du ein Querformat-Banner-Logo gibst, wird es entweder gequetscht oder oben/unten abgeschnitten

Das Dilemma: ein einziges Logo kann nicht gleichzeitig Apple-Banner UND Google-Kreis sein.

Die Lösung in reloop: Du lädst dein Original hoch (möglichst quadratisch oder leicht rechteckig, mindestens 660 × 660 px). Der Server normalisiert es auf 1024 × 1024 und generiert beim Save automatisch drei Plattform-Varianten:

• logo-apple.png — 480 × 150 PNG, fits-inside auf transparentem Canvas (für PassKit)
• logo-google.png — 660 × 660 PNG quadratisch mit 15 % Safe Area (für Google Wallet API)
• logo-thumb.webp — 64 × 64 WebP für UI-Display im Dashboard

Du musst dich also nicht zwischen den Welten entscheiden. Lade ein gutes Quadrat hoch, der Rest passiert automatisch.

Schritt-für-Schritt: Karte an deine Marke anpassen

1. Programm öffnen + Branding-Tab

Im Dashboard: Programme → wähle das Programm → Tab Branding (oder im Editor links auf den "Branding"-Reiter).

2. Logo hochladen

Drag-and-drop in den Logo-Slot, oder Klick + File-Picker. Während des Uploads passieren drei Dinge parallel:

1. Client-side resize auf max 1024 × 1024 (spart Storage-Bytes + Upload-Bandbreite)
2. EXIF-Daten werden gestrippt (kein versehentliches Geo-Tag-Leak)
3. Server generiert die 3 Plattform-Varianten und speichert sie als separate Storage-Files

Im Live-Wallet-Simulator rechts siehst du sofort wie das Logo in Apple Wallet aussieht (Banner top-left) und wie in Google Wallet (Kreis top-left). Falls dein Logo zu breit ist und im Google-Kreis abgeschnitten wirkt: Logo nochmal als quadratisches Layout exportieren und neu hochladen.

Logo-Tipps:

• Transparenter Hintergrund ist immer besser. Brand-Color hinter dem Logo soll durchscheinen.
• Mindest-Margin von 10 % zum Logo-Rand. Sowohl Apple als auch Google haben weichere oder härtere Maskenränder; ohne Margin werden die Außenkanten angeschnitten.
• SVG geht auch und wird bei uns server-seitig zu PNG rasterisiert (mit 3× Density).
• Dunkle Logos auf hellen Brand-Farben und umgekehrt — sicher­stellen dass der Kontrast passt. Schwarzes Logo auf dunkel-rotem Brand-Background ist nicht lesbar.

3. Brand-Farbe + Akzent-Farbe wählen

Zwei Color-Picker:

• Brand-Farbe (brandColor): Hintergrund deiner Wallet-Karte. In Apple Wallet ist das die ganze obere Hälfte. In Google Wallet ist das die ganze Karte. Default: #55182c (Stempelkarte-Wein).
• Akzent-Farbe (accentColor): die Farbe der gefüllten Stempel-Kreise, des Goal-Marker-Sterns, und (auf manchen Wallet-Versionen) der Belohnungs-Ribbon-Animation. Default: #f8b627 (Stempelkarte-Gold).

Best Practice: Brand-Farbe = deine Hauptmarke (Logo-Background), Akzent-Farbe = ein kontrastierender Komplementär. Wenn deine Marke z.B. dunkel-blau ist, nimm Gold oder warmes Orange als Akzent — nicht "gleicher Blau-Ton, etwas heller".

4. Stempel-Icon konfigurieren (optional)

Default ist ein einfacher Stern. Du hast drei Alternativen:

1. Eigenes Stempel-Icon hochladen (Upload, Pfad analog zum Logo). PNG/JPG/SVG, max 10 MB. Wird auf 256×256 normalisiert.
2. Emoji als Stempel — ein einzelnes Emoji eingeben (z.B. ☕ für Café, 🥐 für Bäckerei, ✂️ für Friseur). Renderer nutzt Pango + Noto Color Emoji.
3. Default-Stern lassen, wenn du kein Konzept hast.

Tipp: Custom-Icons mit hohem Kontrast funktionieren besser. Ein zarter Strich­zeichnung-Stempel verschwindet auf dem kleinen Karten-Display; ein massives Solid-Shape liest sich gut.

5. Stempel-Display-Modus wählen

Zwei Optionen:

• circle-number (Default): Stempel-Kreis mit Icon im Inneren, leerer Kreis als nicht-eingelöst. Klassisch.
• image-only: Volles Icon als gefüllter Stempel, Graustufen-Variante als leer. Modern, brand-affin, nur sinnvoll wenn dein Icon visuell stark ist.

Live-Simulator zeigt beide Modi sofort.

6. Hintergrund-Bild (optional)

Du kannst ein Hintergrund­bild für den Strip-Bereich (wo die Stempel sitzen) hochladen — z.B. ein subtiles Pattern oder ein verschwommenes Foto deines Cafés. Format: JPG / PNG / WebP, lange Kante max 1280 px.

Overlay-Modus + Overlay-Stärke (0-80 %) regelt, wie stark dein Brand-Color über dem Bild liegt:

• none: Bild komplett sichtbar (gut für sehr subtile Patterns)
• darken: Bild abgedunkelt durch Brand-Color (gut für helle Fotos)
• lighten: Bild aufgehellt (gut für dunkle Fotos)
• brand-tint (Default): Bild bekommt eine Brand-Color-Tönung

7. Reward-State anpassen

Was passiert visuell, wenn die Karte voll ist und der Gast seine Belohnung holen kann?

• Eigenes Reward-Hintergrund­bild (z.B. ein Konfetti-Foto oder ein Foto deines Belohnungs-Produkts wie "gratis Cappuccino")
• Reward-Background-Color (statt Bild eine Solid-Color, schlägt das Default-Brand-Gradient)
• Custom Eyebrow-Text — statt Default "BELOHNUNG VERFÜGBAR" → eigener Slogan wie "DEIN KAFFEE WARTET"
• Custom Reward-Headline — statt programm­spezifischer Belohnung → eigener Marketing-Text
• Sunburst + Konfetti-Animation an/aus
• Eyebrow-Color, Headline-Größe, Position — pro Achse separat einstellbar

Das macht den Unterschied zwischen "die Karte ist voll" und "die Karte feiert mit dem Gast".

8. Wasserzeichen abschalten (nur Premium)

Im Default zeigt deine Karte ein kleines „reloop"-Wasserzeichen unten rechts. Mit dem Wasserzeichen-Toggle (hideWatermark) blendest du es aus — White-Label-Karte ohne unsere Marke. Nur im Premium-Tarif verfügbar.

Vorschau und Live-Test

Im Editor:

• Live-Simulator zeigt Apple und Google Frame nebeneinander (oder via Toggle)
• Stempel-Scrubber von 0 bis Max → siehst, wie die Karte sich beim Stempeln entwickelt
• Reward-State-Toggle → siehst, wie die Karte bei voll aussieht

Auf einem echten Smartphone:

1. Programm speichern
2. Eine Test-Karte erstellen (im Karten-Tab → "Neue Karte")
3. QR-Code scannen mit deinem iPhone (oder Android)
4. "Zu Wallet hinzufügen" tippen
5. Karte in der Wallet-App öffnen → das ist exakt was deine Gäste sehen

Falls etwas anders aussieht als im Simulator: Bug an support@reloop.cards — wir prüfen sofort, weil unser Versprechen ist "Pixel-identisch zwischen Vorschau und Pass".

Häufige Branding-Fehler

• Logo zu klein hochgeladen (200 × 200 px). Server muss hochskalieren → unscharfes Logo. Mindestens 660 × 660 px.
• Quadrat-Logo gewählt, aber Apple-Banner sieht winzig aus. Kein Bug — Apple-Banner ist 3.2:1, ein Quadrat füllt es vertikal aus, lässt aber 75 % horizontale Fläche leer. Wenn du Apple priorisierst, mach ein wider Logo.
• Brand-Color gleich Akzent-Color. Stempel sind dann nicht sichtbar. Akzent muss kontrastieren.
• Hintergrund-Bild zu busy. Stempel werden überlagert, Karte wirkt überladen. Pattern oder Bild + 50 % Overlay.

Wann du KEIN Custom Branding brauchst

Wenn du:

• Den Service grade ausprobierst (Default ist ohnehin schick)
• Zeit­druck bei Launch hast und Branding nachholen willst
• Keine etablierte Brand-Identity hast (dann tut Default-Branding niemandem weh)

Branding ist iterativ verbesser­bar — in 5 Minuten kannst du Logo + 2 Farben einbinden, und es sieht sofort 80 % so gut aus wie ein voll-konfiguriertes Programm.