How-To
Dijital Sadakat Kartı Oluşturma: Marka Kimliği, Apple ve Google Wallet, AI Üreteci ve 70+ Özelleştirme
Adım adım: reloop’ta ilk programınızı nasıl oluşturursunuz — marka renklerinden damga simgelerine, Wallet pasosuna kadar. Üç yol, 70+ seçenek, canlı önizleme.
Bir dijital sadakat kartı oluşturduğunuzda, aslında arka planda aynı anda iki Wallet pasosu inşa edersiniz: bir Apple Wallet .pkpass ve bir Google Wallet loyalty nesnesi. Her ikisi de reloop panelindeki tek bir yapılandırmadan üretilir. Bu makale, bir program oluşturmanın üç yolunu da adım adım anlatır ve 70+ yapılandırma seçeneğinin her birini açıklar — marka kimliğinden damga mekaniğine, dolandırıcılık önleme özelliklerine kadar. Başlamadan önce: Panelin tam genel görünümünü temel makalede bulabilirsiniz.
İlk sadakat kartınıza giden üç yol
İlk programınızı oluşturmak için üç seçeneğiniz var — hepsi de sonunda aynı editöre çıkar:
- Ana sayfa URL’sinden AI üreteci — en hızlı yol, ~10 saniye
- Manuel oluşturma — tam kontrol, boş form
- Bir örnekten kopyalama — demo örneklerimizden birini şablon olarak kullanın
1. Seçenek: AI üreteci
„AI ile oluştur”a tıklar, web sitenizin URL’sini girersiniz ve sistem ana sayfanızı tarar. 10–15 saniye içinde şunları içeren bir taslak elde edersiniz:
- İşletme adı (
<title>etiketinden veya ana başlıktan) - Birincil renk (Tailwind token’larından, CSS değişkenlerinden veya baskın logo renginden)
- Vurgu rengi (tamamlayıcı veya ikinci en baskın arayüz rengi)
- Logo (
<link rel="apple-touch-icon">etiketinden veya hero bölümünden çıkarılır) - Sektör algılama („kafe”, „restoran”, „kuaför” vb.) program adı için bir öneri olarak
- Sektörünüze dayalı önerilen ödül metni
Taslak, sessionStorage içinde 10 dakika boyunca önbelleğe alınır. Tüm alanları önceden doldurulmuş normal program editörüne düşersiniz — ve kaydetmeden önce her şeyi ayarlayabilirsiniz. Çıkarma kaynaklı sorunlarda (örneğin eksik bir logo), editör uyarılar gösterir.
2. Seçenek: Manuel oluşturma
Net bir marka kimliğiniz varsa veya işletmeniz herkese açık olarak listelenmemişse (dahili sadakat, erken kayıt programları), „Manuel oluştur” ile başlarsınız. Boş bir editöre düşer ve alanları kendiniz doldurursunuz. Süre: Standart bir program için ~3–5 dakika.
3. Seçenek: Örnekten kopyalama
reloop.cards/beispiele adresinde altı etkileşimli demo paso bulursunuz (kafe, restoran, kuaför, fırın, köpek kuaförü, yemek kamyonu). Her biri doğrudan hesabınıza şablon olarak klonlanabilir — mekaniği ve marka stilini devralır ve yalnızca işletmenize uyarlarsınız. Sıfırdan tasarlamaktan kurtulun.
Program temelleri
Hangi yolu seçerseniz seçin — bu dört alan her programın temelidir:
| Alan | Açıklama | Örnek |
|---|---|---|
| Program adı | Wallet kartında ve panelde görünen başlık | „Kahve Sadakat Kartı” |
| Alt başlık | İsteğe bağlı alt başlık, pasoda italik gösterilir | „5.’si ücretsiz” |
| Ödül metni | Kart dolduğunda müşterinin ne alacağı | „1 kahve ikramımız” |
| Ana sayfa URL’si | Pasonun arkasındaki tıklanabilir bağlantı, isteğe bağlı | https://cafe-milchschaum.at |
Damga mekaniği
| Alan | Aralık / Varsayılan | Anlamı |
|---|---|---|
| Damga hedefi | 2–100 (varsayılan: 5) | Ödüle kadar kaç damga |
| Günlük maks. damga | 1–10 (varsayılan: 1) | Kart başına dolandırıcılık önleme günlük limiti |
| Gün cinsinden geçerlilik süresi | 0–730 (0 = asla) | Damgalar X gün hareketsizlikten sonra sona erer |
| Bonus gösterim zamanlaması | at_max | before_max | Ödül durumu N’de mi yoksa zaten N–1’de mi |
| Bonus gösterim ekstra göster | Boolean | Sayaçta „+1 damga” son eki (X/Y+1) |
Marka kimliği: renkler, logo, arka plan
Marka kimliği, jenerik bir „sadakat kartı” ile ilk bakışta işletmeniz gibi görünen bir kart arasındaki farkı yaratır.
| Alan | Biçim | Etkisi |
|---|---|---|
| Marka rengi | Hex #RRGGBB | Kart arka planı; metin kontrastı otomatik seçilir |
| Vurgu rengi | Hex #RRGGBB | Damga vurguları, ödül üst başlığı, pasodaki CTA düğmeleri |
| Logo | URL (Firebase Storage, maks. 2 MB) | Paso üst bilgisinde görünür, retina için otomatik ölçeklenir (1×, 2×, 3×) |
| Strip arka planı | URL, isteğe bağlı | Damgaların arkasındaki arka plan görseli (örneğin kafe için latte fotoğrafı) |
| Strip yer paylaşımı modu | none / darken / lighten / brand-tint | Arka plan görselinin marka rengiyle nasıl harmanlandığı |
| Strip yer paylaşımı opaklığı | %0–80 (varsayılan: %35) | Yer paylaşımının yoğunluğu |
Damga gösterimi: sayılı-daire veya yalnızca-görsel
İki temel gösterim modunuz var:
circle-number (varsayılan)
Klasik numaralı daireler. Damgasız: dış çizgi. Damgalı: vurgu rengiyle doldurulmuş, sayı marka renginde. 5–10 damga için iyi çalışır.
image-only
Yalnızca damga simgeleri (emoji veya özel URL), sayı yok. Damgasız: gri tonlama. Damgalı: tam renk. Modern, butik markalar için çok şık.
| Ek seçenekler | Anlamı |
|---|---|
| Damga simgesi URL’si | Özel görsel (PNG, saydam), örneğin logo sembolünüz |
| Damga emojisi | Özenle seçilmiş bir paletten (☕, 🥐, ✂️, 🐶 vb.) veya herhangi bir emoji |
| Damga simgesi ölçeği | %50–200 (varsayılan: %100) — daha büyük = daha baskın |
| Yalnızca-görsel: hedef halkasını göster | image-only modunda: boş yuvaların etrafındaki ilerleme halkasını aç/kapat |
Hedef simgesi: „son damga” için sembol
Varsayılan olarak, ödülden hemen önceki yuva bir yıldız gösterir. Bu simgeyi değiştirebilirsiniz:
| Alan | Etkisi |
|---|---|
| Özel hedef simgesi kullan | Aç/kapat: yıldız yerine kendi simgeniz |
| Hedef simgesi URL’si | Görsel URL’si (örneğin taç olarak logonuz) |
| Hedef simgesi emojisi | Alternatif olarak bir emoji (örneğin 🏆) |
| Hedef simgesi vurgu tonu | Simgeyi vurgu renginizde tonlar |
Ödül ekranı: kazanç anı
Kart dolduğunda paso ödül durumuna geçer. Burada, ilerleme durumu için olduğu kadar özelleştirme seçeneğiniz vardır:
| Alan | Anlamı |
|---|---|
| Ödül arka planı URL’si | Ödül durumu için özel hero görseli (örneğin imza içeceğinizin fotoğrafı) |
| Ödül arka plan rengi | Görsel olmadığında yedek olarak düz renk |
| Ödül yer paylaşımı modu | Yukarıdaki strip ile aynı |
| Ödül yer paylaşımı opaklığı | %0–80 |
| Ödül üst başlık metni | Ödülün üzerindeki küçük başlık öğesi (örneğin „🎉 Tebrikler”) |
| Ödül metin rengi | Büyük ödül satırı için Hex renk |
| Ödül ışın huzmesi | Ödülün arkasında ışıldayan animasyon — kutlama havası |
| Ödül üst başlığını gizle | Aç/kapat: üst başlığı çıkar (minimalist tasarım için) |
| Ödül metnini gizle | Aç/kapat: metin olmadan yalnızca görsel (görsel zaten her şeyi anlatıyorsa) |
Apple Wallet entegrasyonu: .pkpass biçimi
Wallet pasoları için Apple, tescilli PassKit biçimini ister — kesin olarak tanımlanmış bir yapıya sahip imzalı bir ZIP dosyası. reloop bunu sunucu tarafında üretir:
- Yapılandırılmış tüm alanları içeren Pass.json (program, ödül, sayaç, coğrafi çitler, güncellemeler için web hizmeti URL’si)
- Strip görseli (1×, 2×, 3×) — marka kimliğinizden
sharparacılığıyla oluşturulur - Logo (1×, 2×, 3×) — otomatik ölçeklenir
- Simge (1×, 2×, 3×) — bildirim merkezi için
- Pass Type sertifikanızla imza (reloop tarafından yönetilir)
Paso üretecini tetiklediğinizde şu işlem hattı çalışır:
- Editörden program verileri → AppleWalletInput
- Firebase Storage’dan logo alma (8 sn zaman aşımı, 15 dk TTL önbellek)
- Tüm retina boyutlarına Sharp yeniden boyutlandırması
renderAppleStripSet(), renklerinizle, damgalarınızla, hedef simgesiyle ve ışın huzmesiyle (ödül durumundaysa) strip görsellerini oluşturur- Pass.json tüm alanlarla doldurulur
- PassKit üreteci ZIP’i imzalar
.pkpassteslim edilir
Müşteri „Wallet’a ekle”ye dokunur — uygulama kurulumu olmadan. iOS, application/vnd.apple.pkpass MIME türünü otomatik olarak tanır.
APNs üzerinden push güncellemeleri
Yeni bir damga geldiği anda reloop, Apple’ın sunucularına bir APNs push’u gönderir. Apple pasoyu cihazda uyandırır, paso yeni verileri arka planda sessizce yükler. Müşteri, kartı bir sonraki açışında yeni damga sayısını görür — uygulama güncellemesi olmadan, yeniden kurulum olmadan.
Google Wallet entegrasyonu: LoyaltyClass + LoyaltyObject
Google, API merkezli bir model kullanır. Program başına bir LoyaltyClass (statik marka kimliği), kart başına bir LoyaltyObject (dinamik damga sayısı) oluştururuz. Her damgada arka uç bir PATCH isteği yapar — Google, kartı kullanıcının tüm cihazlarında otomatik olarak eşitler.
LoyaltyClass neler içerir
- IssuerName + ProgramName (Almanca ve İngilizce)
- HexBackgroundColor (marka renginiz)
- ProgramLogo (Firebase Storage URL’si)
- HeroImage (strip önizlemeniz)
- TextModulesData („Nasıl çalışır” açıklaması)
- ValueAddedModuleData (isteğe bağlı promosyon bloğu, aşağıya bakın)
- ScreenShotEligibility (paylaşımı devre dışı bırakma açıkken
INELIGIBLE) - MultipleDevicesAndHoldersAllowedStatus (paylaşımı devre dışı bırakma açıkken
ONE_USER_ALL_DEVICES)
LoyaltyObject neler içerir
- Damga sayacı (örneğin „3/5”)
- Mevcut durum (
ACTIVEveya son kullanma tarihine ulaşıldığındaEXPIRED) - Barkod (statik QR veya programa bağlı olarak dönen TOTP)
- HeroImage (önbellek kırıcıyla: her damga sayısıyla değişir, böylece Google yeni durumu anında görür)
- LinksModuleData (ana sayfa, kartı çevrimiçi görüntüle, destek e-postası, gizlilik, künye)
- ValidTimeInterval (son kullanma tarihi)
- MerchantLocations (Enlem/Boylam ile ≤10 coğrafi çit)
Wallet yayını üzerinden push bildirimleri
Apple’ın aksine Google, doğrudan kilit ekranına push bildirimleri gönderebilir. Panelde bir başlık ve gövde yazar, hedef programları seçersiniz — ve bildirim tüm Google Wallet kullanıcılarına doğrudan kilit ekranında bir banner olarak görünür. Bununla ilgili daha fazla bilgi raporlama bağlantısında.
Canlı önizleme: ne yazarsanız onu görürsünüz
Editörde yazarken sağ tarafta WalletSimulator çalışır — demo pasolar için /beispiele sayfasında kullandığımız bileşenin aynısı. Apple ve Google arasında geçiş yapar, tüm damga durumları arasında gezinir (0/5, 1/5, …, 5/5 + ödül) ve renklerin, simgelerin ve metinlerin her adımda nasıl davrandığını anında görürsünüz.
Programı düzenle
Strip görseli oluşturma, /api/wallet-preview/strip.png adresinde sunucu tarafında çalışır ve 200 ms önbelleğe alınır — hızlı sürükleme girdileri (örneğin renk seçici) tek bir istekte birleştirilir, böylece akıcı kalır.
E-posta yakalama ve sadakat kademeleri
Gelişmiş programlar için özellikle güçlü iki özellik:
E-posta yakalama modları
| Mod | Davranış |
|---|---|
off | E-posta yakalama yok. Kart %100 anonimdir. |
optional | Wallet’a kaydetmeden sonra bir e-posta alanı sunulur. Teşvik olarak bonus damgalar mümkün. |
required | Kart yalnızca e-posta ile kaydedilebilir. Bülteniniz için maksimum erişim. |
E-posta yakalama ödül damgaları = müşterinin e-postasını girdiğinde aldığı bonus damga sayısı. Tipik değerler: 1–2 damga. Dönüşüm sürücüsü olarak çok etkili.
Sadakat kademeleri (Bronz / Gümüş / Altın)
Premium tarifesinde çok kademeli programlar oluşturabilirsiniz: Bir kartın kademeleri vardır ve müşteri her bir damga sırasını tamamladığında bir sonraki kademeye geçer. tierConfig, kademe başına ödül metni, eşik değeri ve görünen adı tanımlayan bir JSON bloğudur.
Örnek (kurgusal bir kafe): Bronz (5 kahve → ücretsiz kahve), Gümüş (15 kahve → +1 ücretsiz kruvasan), Altın (30 kahve → adınıza özel bardak). Mevcut müşteri bağlılığı için çok güçlü.
Dolandırıcılık önleme: dönen QR kodu, NFC dokunmatik damga, kart paylaşımını engelleme
Kötüye kullanımı önleyen üç güvenlik özelliği:
Dönen QR kodu (TOTP)
Karttaki QR kodu her 30 saniyede bir döner. Eski bir kodla yapılan her damga girişimi başarısız olur. Ekran görüntülerini ve fotoğraf paylaşımını önler. Business tarifesinden itibaren mevcuttur. TOTP, kimlik doğrulayıcı uygulamalarda kullanılanla aynı standarttır — çok güvenli.
NFC dokunmatik damga
QR kodu yerine müşteri telefonunu tezgâhınızdaki bir NFC etiketine tutar. Damga anında kaydedilir, sizin veya müşterinin herhangi bir uygulama açması gerekmez. Tek ön koşul, tarafımızca hazırlanmış bir NFC etiketidir. Tüm tarifelere dahildir.
Kart paylaşımını engelleme
Google Wallet için: screenShotEligibility: INELIGIBLE ve multipleDevicesAndHoldersAllowedStatus: ONE_USER_ALL_DEVICES. Bu, kartların iletilemeyeceği ve ekran görüntülerinin paso gösterimini engelleyeceği anlamına gelir. Kart paylaşımına karşı maksimum koruma. Tüm tarifelere dahildir.
Standart dolandırıcılık önleme (tüm tarifelerde etkin)
- HMAC-SHA256 imzalı QR token’ları (60 sn TTL)
- Program başına günlük maksimum damga limiti
- Her damga için personel kimliği, zaman ve IP içeren denetim günlüğü
- Anonim damga tetikleme yok — yalnızca oturum açmış personel damgalayabilir
Yayımlama, QR kodu, duraklatma/sonlandırma
Memnun kaldığınızda Yayımla’ya tıklarsınız. Program active durumuna geçer, QR kodu oluşturulur (QR olarak /s/[slug]/scan URL’si) ve şunları yapabilirsiniz:
- PNG olarak indir (yazıcılar için standart biçim)
- SVG olarak indir (kayıpsız ölçeklenebilir, poster tasarımı için mükemmel)
- Doğrudan yazdır tarayıcının yazdırma iletişim kutusu üzerinden
- E-posta ile paylaş (oturum açmadan doğrudan bağlantı)
Programı duraklatma veya sonlandırma
- Duraklat → mevcut kartlar sağlam kalır, yeni damgalar engellenir. Geri alınabilir.
- Sonlandır → program salt okunur olur. Kartlar mevcut bakiyelerini hâlâ kullanabilir ancak yeni damga toplayamaz. Geri alınamaz.
- Sil → ilişkili tüm kartlar ve damga geçmişleri dâhil tam bir kalıcı silme. İki faktörlü onay iletişim kutusu.
Test kartları oluşturma
Yayına almadan önce, müşterinin tüm iş akışını kendiniz baştan sona denemelisiniz. Program editöründe **„Test kartı oluştur”**a tıklayın — kendiniz damgalayabileceğiniz, kullanabileceğiniz ve silebileceğiniz, gerçek müşteri kimliği olmayan, tam işlevsel bir kart alırsınız. Test kartları kart kotanıza sayılmaz ve raporlamada ayrı olarak gösterilir.
Özet: 5 dakikada ilk programınız
Sırayla ilerlerseniz:
- AI üreteci → URL’yi yazın, taslağı inceleyin
- Program temellerini ayarlayın (ad, ödül, damga hedefi)
- Marka kimliğini tamamlayın (logo, renkler, damga emojisi)
- Canlı önizlemeyi kontrol edin — tüm damga durumları arasında gezinin
- Dolandırıcılık önleme seçin (standart genellikle yeterlidir)
- Yayımla → QR’ı yazdır → ilk kartı ver