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

Canonical: https://reloop.cards/tr/blog/digitale-stempelkarte-erstellen
Published: 2026-04-27
Updated: 2026-08-02
Author: reloop Team (candybytes GmbH)

---
export const metadata = {
  title:
    'Dijital Sadakat Kartı Oluşturma: Marka Kimliği, Apple ve Google Wallet, AI Üreteci ve 70+ Özelleştirme',
  description:
    '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.',
  publishedAt: '2026-04-27',
  updatedAt: '2026-08-02',
  category: 'How-To',
  tags: [
    'Program oluşturma',
    'Apple Wallet',
    'Google Wallet',
    'Marka kimliği',
    'AI üreteci',
    'Sadakat kartı',
  ],
  readingMinutes: 12,
};

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](/blog/merchant-dashboard-funktionen) 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:

1. **Ana sayfa URL’sinden AI üreteci** — en hızlı yol, ~10 saniye
2. **Manuel oluşturma** — tam kontrol, boş form
3. **Bir örnekten kopyalama** — [demo örneklerimizden](/beispiele) birini şablon olarak kullanın

### 1. Seçenek: AI üreteci

<Callout tone="tip" title="AI üreteci ne zaman iyi çalışır">
Web siteniz net bir logoya, üst bilgi/hero bölümlerinde marka renklerine ve tanınabilir bir işletme adına sahip olduğunda. Özellikle yerleşik bir web varlığı olan kafeler, fırınlar, kuaförler ve restoranlar için çok iyi çalışır. Çok minimalist veya grafik ağırlıklı sitelerde renkleri doğrudan CSS’ten çıkarırız — bu durumda sonuçlar değişebilir.
</Callout>

„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](/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) |

<Callout tone="info" title="`at_max` ile `before_max` karşılaştırması">
**`at_max`** (varsayılan): Müşteri ödül ekranını yalnızca son damgayı kazandığında görür. Klasik model.<br />
**`before_max`**: Kart, ödülü daha N–1 damgada gösterir. Son damga kullanım anında gerçekleştiğinde kullanışlıdır (örneğin „5. kez damgalanırsınız VE ücretsiz kahve alırsınız” — ödülün 4. damgada gösterilmesi şunu bildirir: sonraki sefer tam zamanı).
</Callout>

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

<StampMockup
  merchant="Cafe Milchschaum"
  program="Kahve Sadakat Kartı"
  reward="5. kahve ücretsiz"
  brandColor="#5B3826"
  accentColor="#E8C180"
  stamps={2}
  required={5}
  emoji="☕"
  caption="Marka rengi espresso (#5B3826), vurgu karamel (#E8C180), damga emojisi ☕"
/>

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

<Callout tone="tip" title="Logo ipuçları">
- **Saydam arka planlı PNG** en iyi sonucu verir — logonuzun etrafında beyaz kutular olmaz<br />
- **Kare veya 3:1 yatay** — her iki biçim de 160×50pt boyutuna ölçeklenir<br />
- **En az 2× çözünürlük** (örneğin 320×100 px) böylece retina ekranlarda net kalır<br />
- **Marka rengine karşı kontrastı kontrol edin** — açık renkli logolar koyu marka renklerine ihtiyaç duyar, tersi de geçerlidir
</Callout>

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

<StampMockup
  merchant="Cafe Milchschaum"
  program="Kahve Sadakat Kartı"
  reward="5. kahve ücretsiz"
  brandColor="#5B3826"
  accentColor="#E8C180"
  stamps={5}
  required={5}
  state="reward"
  caption="Ödül durumu: ışın huzmesi, üst başlık metni, büyük ödül tam merkezde."
/>

## Ö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 `sharp` aracı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:

1. Editörden program verileri → AppleWalletInput
2. Firebase Storage’dan logo alma (8 sn zaman aşımı, 15 dk TTL önbellek)
3. Tüm retina boyutlarına Sharp yeniden boyutlandırması
4. `renderAppleStripSet()`, renklerinizle, damgalarınızla, hedef simgesiyle ve ışın huzmesiyle (ödül durumundaysa) strip görsellerini oluşturur
5. Pass.json tüm alanlarla doldurulur
6. PassKit üreteci ZIP’i imzalar
7. `.pkpass` teslim 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 (`ACTIVE` veya son kullanma tarihine ulaşıldığında `EXPIRED`)
- 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](/blog/loyalty-reporting-push-newsletter#wallet-push-broadcasts).

## Canlı önizleme: ne yazarsanız onu görürsünüz

Editörde yazarken sağ tarafta **WalletSimulator** çalışır — demo pasolar için [/beispiele](/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.

<DashboardMock variant="program-editor" caption="Canlı önizlemeli editör. Soldaki her değişiklik sağdaki önizlemede 300 ms’den kısa sürede oluşturulur." />

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

<Callout tone="info" title="QR yazdırma önerisi">
- **Minimum boyut:** masa üstü ayaklıklar için 4×4 cm, kapı etiketleri için 8×8 cm<br />
- **Yüksek kontrast:** beyaz arka planda koyu QR, **asla** renkli arka planda beyaz QR değil<br />
- **Sessiz alan:** her tarafta kenar boşluğu olarak en az 4× QR modül boyutu<br />
- **Deneme testi:** yazdırmadan önce iki farklı telefonla (iOS ve Android) tarayın
</Callout>

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

1. **AI üreteci** → URL’yi yazın, taslağı inceleyin
2. **Program temellerini** ayarlayın (ad, ödül, damga hedefi)
3. **Marka kimliğini** tamamlayın (logo, renkler, damga emojisi)
4. **Canlı önizlemeyi** kontrol edin — tüm damga durumları arasında gezinin
5. **Dolandırıcılık önleme** seçin (standart genellikle yeterlidir)
6. **Yayımla** → QR’ı yazdır → ilk kartı ver

<Callout tone="success" title="Sonraki adımlar">
- [Mevcut müşterileri push ve bülten ile nasıl geri kazanırsınız →](/blog/loyalty-reporting-push-newsletter)<br />
- [Tüm panel işlevlerinin eksiksiz genel görünümü →](/blog/merchant-dashboard-funktionen)<br />
- [6 sektörden örnekler →](/beispiele)<br />
- [Ücretsiz başlayın →](/signup)
</Callout>