App Editor

Hub'da Kullanıcı Arayüzleri → Web Uygulaması bölümünü açın. Sol panel haritadır; sağdaki tuval ise seçtiğiniz öğenin ayarlarını gösterir.

Bu sayfa, editörün her alanını tek tek anlatır. Her kutuyu listelemez — renk ve boyut alanlarının çoğu tam olarak etiketinde yazan işi yapar — ancak değiştirmeden önce anlamaya değer olanları kapsar.

Hızlı özet

• Altı alan: Theme & Brand · PWA · App Settings · Popups · Screens · Advanced.
• Her kaydetme düğmesi — Save draft, Save settings, Save list, Save — aynı taslağa yazar. Siz Publish'e basana kadar hiçbir şey üyelere ulaşmaz.
• Boş bırakılan bir renk alanı genellikle "devral" anlamına gelir — uygulama temaya geri döner.
• Insert token gördüğünüz her yerde metnin içine üye verilerini (ad, bakiye…) yerleştirebilirsiniz; böylece tek bir metin her üye için kendini kişiselleştirir.
• Simge alanları tabler:plus gibi bir Iconify adı bekler. Font Awesome sınıfları uygulama tarafından yok sayılır.

Theme & Brand

Genel görünüm. Burada bir şeyi değiştirdiğinizde tüm ekranlar bunu izler.

• Brand colors — birincil, ikincil ve metin renkleri. Editörün geri kalanı bu renklere geri döner, bu yüzden önce bunları ayarlayın.
• Layout → Corner radius — uygulama genelinde kartlara ve düğmelere uygulanan tek bir sayı. Tek tek paneller bunu geçersiz kılabilir.
• Brand assets
  • Favicon — tarayıcı sekmesi simgesi. Yayınlandıktan sonra aynı zamanda bu işletmenin Hub'daki avatarı olur; dolayısıyla beklemediğiniz yerlerde de karşınıza çıkar.
  • Logo — Screens → Login Page kendi logosuna sahip olmadığında giriş logosu için yedek olarak kullanılır; ayrıca abonelikten çıkma ve veri silme sayfalarında gösterilen logodur. Buradan ayarlamanız üçünü birden kapsar.
• Buttons — uygulamanın standart düğmeleri için arka plan ve metin rengi, yükseklik ve iç boşluk.
• Iframe dialog — bir üye PDF veya harici bir sayfa yükleyen bir öğeye dokunduğunda açılan tam ekran iletişim kutusu. Header icon color alanını boş bırakırsanız başlık rengini izler.
• Font — önce sağlayıcıyı seçin, ardından yazı tipi ailesinin adını sağlayıcının yazdığı şekilde tam olarak girin.

• Navigation bar — uygulamanın altında yer alan çubuk.
  • Nav bar type ve Show labels, çubuğun biçimini ve simgelerin altında öğe adlarının görünüp görünmeyeceğini değiştirir.
  • Visibility — birbirinden bağımsız üç anahtar: nav bar'ın kendisi, center button (bazı düzenlerde kullanılan kabartmalı yuvarlak düğme) ve en üstteki app bar. Nav bar'ı kapatırsanız, ana ekranın üyelere diğer ekranlara ulaşmak için başka bir yol sunduğundan emin olun.
  • Navigation items — sıralamayı değiştirmek için sürükleyin, etiketi ve yönlendirdiği yeri düzenlemek için kalem simgesini, kaldırmak için çöp kutusu simgesini kullanın. Bu liste, üyelerin fiilen dokunduğu şeydir; bu yüzden yalnızca kullandıkları ekranlarla sınırlı tutun.

PWA

Bir üye Web Uygulaması'nı telefonunun ana ekranına kurduktan sonra uygulamanın nasıl davrandığı.

Kurulumu duyurmadan önce bunu ayarlayın

Buradaki değişiklikler halihazırda kurulmuş uygulamaları yenilemez. Ana ekrandaki bir simge, üye onu kaldırıp yeniden kurana kadar eski adını ve görselini korur.

• App name — kurulum sırasında gösterilen tam ad.
• Short name — ana ekrandaki simgenin altındaki etiket. Telefonlar uzun etiketleri kısaltır, bu yüzden kısa tutun.
• Description — bazı tarayıcılar tarafından kurulum isteminde gösterilir.
• Manifest icons — telefonun ana ekran simgesini çizerken aralarından seçim yaptığı simge seti. Save list, bu bloğu tek başına kaydeder.

App Settings

Yalnızca yerel uygulamalar için

Bu alan, uygulama mağazalarındaki bir yerel (native) mobil uygulama için derleme yapılandırmasıdır. Programınız yalnızca Web Uygulaması olarak çalışıyorsa bu bölümü atlayabilirsiniz.

Yapılandırma her sürüm için ayrı tutulur. Bir sürüm taslaktan Ready to submit durumuna geçer ve onaylandığında kilitlenir; hâlâ değiştirilmesi gereken bir şey varsa Back to draft kilidi açar. New version bir sonrakini başlatır, History ise önceki sürümleri gösterir.

Bir sürümü hazır olarak işaretlemek tek başına uygulamayı mağazalara koymaz — yalnızca uygulamayı derleyip gönderecek olan kişiye onaylanmış bir yapılandırma teslim eder.

• Store identity — uygulama adı, paket ve bundle tanımlayıcıları, şirket adı, mağaza hesabı kimlikleri. Salt okunurdur: her uygulama için bir kez ayarlanır ve tüm sürümler tarafından paylaşılır. Değişmesi gerekiyorsa destek ekibiyle iletişime geçin.
• App settings sekmesi
  • Splash & appearance — açılış ekranı: durum çubuğu stili, açılış ekranı arka planı (koyu mod için ayrı bir arka planla birlikte), uyarlanabilir simge arka planı ve yükleme ilerleme çubuğunun renkleri.
  • App images — her yuva, o görselin olması gereken tam piksel boyutunu gösterir. Bir dosya yüklemek kayıtlı URL'yi sizin yerinize değiştirir, bu yüzden URL alanına dokunmanız gerekmez.
• Store settings sekmesi — gönderimle birlikte giden mağaza listeleme metni ve görselleri.

Popups

Girişten sonra, üyenin bulunduğu ekranın üzerinde gösterilen mesajlar — belirli bir ekrana bağlı değildir.

• Popup type — açılır pencerenin ne için olduğu. Örneğin installReminder, "bu uygulamayı ana ekranınıza ekleyin" hatırlatmasıdır.
• Style ve Content type — nasıl sunulduğu ve içine ne konduğu.
• Delay (ms) — girişten ne kadar sonra görüneceği. 2000 iki saniyedir; önce ekranın yüklenmesine zaman tanıyın.
• Show how many times — üye başına gösterim sınırı. -1, ömür boyu yalnızca bir kez demektir; pozitif her sayı o kadar gösterim anlamına gelir.
• Title ve Body — metinler; üye verileri için Insert token kullanılabilir.
• Close button ve "Don't show again" text — bunları boş bırakırsanız açılır pencere kendi varsayılanlarını kullanır.
• Image veya Lottie URL — sabit bir görsel ya da bir animasyon. Error title ve Error Lottie URL, açılır pencerenin eyleminin başarısız olduğu durumu kapsar.

Save list, açılır pencere listesinin tamamını tek seferde kaydeder.

Screens

Ekranlar iki türdedir.

HomeScreen bir tuvaldir

Ana ekran, ekleyip sıralayabileceğiniz, çoğaltabileceğiniz ve silebileceğiniz bileşenlerden oluşan bir yığındır. Her biri kendi ayarlar paneline açılır: bir tarafta içerik (görsel, metin, bağlantı), diğer tarafta görünüm. Uygulamanızın görsel kişiliğinin büyük kısmı burada yaşar.

Yığının üstünde, ekranın kendi Settings bloğu arka plan rengini ya da görselini ve yerel durum ile alt çubuklarını ayarlar.

Bir bileşenin üzerindeki </> simgesi, o bileşenin ham yapılandırmasını açar. Bir bileşeni bir yerden başka bir yere kopyalamak için kullanışlıdır, ancak Advanced bölümündeki uyarının aynısı burada da geçerlidir — yapıştırdığınız içerik için hiçbir doğrulama yapılmaz.

Carousel — banner alanınız

Carousel en çok düzenlenen bileşendir ve dönen bir banner alanı gibi çalışır. Her slayt için şunları kontrol edersiniz:

• Görsel — slayt ekleyin, kaldırın veya sıralayın; her slayt tek bir görseldir.
• Eylem — bir üye dokunduğunda ne olacağı: hiçbir şey (dekoratif), bir açılır pencere açmak, bir URL açmak (uygulama içinde veya yeni bir sekmede), "bu uygulamayı kur" istemini tetiklemek, Wallet Pass'i indirmek, yol tarifi açmak veya bir e-posta başlatmak.
• Kimin göreceği — bir slaytı isteğe bağlı olarak belirli etiketlere sahip üyelerle sınırlayabilirsiniz. Boş bırakırsanız slayt herkese gösterilir. Aynı carousel içinde VIP'ye özel veya segmente özel banner'ları bu şekilde yayınlarsınız.

Carousel'in tamamına ait ayarlar slayt listesinin üstünde yer alır: arka plan rengi, saniye cinsinden hızıyla birlikte Auto play, Transition speed, sonsuz döngü için Infinite ve konum göstergesi için Pagination dots.

Bir ana ekran birden fazla carousel barındırabilir ve birçok işletme, dokunulabilir bir banner düğmesi olarak tek slaytlı carousel kullanır.

Diğer ekranlar yerleşiktir

Login, Verification, Registration, Gifts, Profile, Activities ve diğerleri sabit bir düzene sahiptir. Düzenlediğiniz şey bunların metinleridir — ekran başlıkları, düğme etiketleri, boş durum ve hata mesajları — ve görünümleridir: arka plan, kart stili, simgeler. Bu sayede her akış doğru çalışmaya devam ederken siz yine de her dilde kendi üslubunuzu yakalayabilirsiniz.

Çoğunun paylaştığı iki şey vardır:

• Ekranı uygulamadan tamamen çıkaran bir Disable screen düğmesi. Temel oturum açma ekranlarında bu düğme bulunmaz.
• Native bars — durum ve alt çubuk stili; yalnızca programınızın yerel bir mobil uygulaması varsa geçerlidir.

GenerateCode, bu özellik işletme için etkinleştirilmediğinde soluk (devre dışı) görünür.

Oturum açma akışı — Login, Verification, Registration, VerificationPlus

Login Page — sayfa başlığı, gönder düğmesi etiketi ve iki hata mesajı (No-connection, Too-many-attempts). Logo bloğu ekrana özel bir geçersiz kılmadır: görseli boş bırakırsanız Theme & Brand altında ayarlanan işletme logosuna geri döner. Logo width, 70% gibi bir CSS genişliği alır ve Full width açıkken yok sayılır. Geri kalanı gönder düğmesi, başlık ve alt bilgi ayırıcısı için stil ayarlarıdır.

Verification Page — sayfa başlığı, gövde metni, yeniden gönderme istemi ile düğmesi ve yeniden gönderme satırının altındaki alt not. Zengin metin alanlarında yalnızca <b>, <br> ve <i> korunur; diğer her şey kaldırılır.

Registration Page — sayfa başlığı, gönder düğmesi, bağlantı yok mesajı.

VerificationPlus — üç adımlı e-posta doğrulaması: Step 1 — email, Step 2 — code, Step 3 — success; her birinin kendi başlığı ve açıklaması vardır, ayrıca e-posta formunun yer tutucusu ve gönder etiketi bulunur.

Üye ekranları — Gifts, Profile, Activities

Gifts — ekran başlığı ve No gifts message boş durumu. Gift card style, üyelerin gördüğü kartı biçimlendirir: bir Border color ayarlamanın kenarlığı açan şey olduğunu ve boş bırakılan bir Icon corner radius alanının genel köşe yarıçapına geri döndüğünü unutmayın. Gift card texts, geçerlilik tarihi satırını, Punch card label alanını, hediye etiketini ve kapatma düğmesini kapsar.

Profile — ekran başlığı, çıkış satırının metni ve bilgi kartı, çıkış düğmesi ile menü kapsayıcısının stilleri. Çıkış için kullanılan Icon bir Iconify adı, bir Font Awesome simgesi, yüklenmiş bir görsel veya bir Lottie animasyonu olabilir. Divider color yalnızca Gap between rows değeri 0 olduğunda görünür.

Menu buttons, bir üyenin Profile altında gördüğü satırlardır — kişisel bilgiler, bildirim tercihleri, hareketler, kupon kodları, yasal bildirimleriniz, iletişim formu, veri silme talebi. Sıralamayı değiştirmek için sürükleyin, etiketi ve hedefi düzenlemek için kalem simgesini, kaldırmak için çöp kutusu simgesini kullanın.

Activities — ekran başlığı, Show-more button etiketi ve üyelerin ilk alışverişlerinden önce gördüğü boş durum. Expand/collapse icons alanları Iconify adları alır. Filter categories, listenin üzerindeki etiket düğmeleridir ve liste düzenlenebilir — üyelerin filtreleyebileceği kategorileri siz belirlersiniz.

Yardımcı ekranlar — UpdateMemberDetails, CommPermissions, EnterCode, Catalogs

UpdateMemberDetails — ekran başlığı, kaydet düğmesi, bağlantı yok mesajı. Bu, üyelerin kendi bilgilerini tamamlamak veya düzeltmek için kullandığı formdur.

CommPermissions — aynı üç alan ve ayrıca gönder düğmesi için bir Button icon. Üyeler, sizden hangi kanallardan haber almayı kabul ettiklerini burada yönetir.

EnterCode — üyelerin kupon kodunu yazdığı yer. Ekran başlığı, kod kartının başlığı ve açıklaması, giriş yer tutucusu, zorunlu alan mesajı ve gönder etiketi ile birlikte üç uyarı: Success, Invalid-code ve Already-used. Code dots, rakamlar için görsel yer tutuculardır — bunun yerine düz bir giriş alanı isterseniz Show dots seçimini kaldırın.

Catalogs — uygulamanızdaki göz atılabilir listeler: restoranlar, iş ortakları, duyuru panosu, menü.

Bir katalog kimliğini değiştirmeyin

Düğmeler bir kataloğa kimlik üzerinden bağlanır (/catalog?catalog=<id>). Bir kimliği değiştirmek, eski kimliğe işaret eden tüm düğmeleri bozar.

Advanced

Güvenlik ağı yok

Bunlar, doğrulama yapılmayan ham ayarlardır. Hatalı bir değer, uygulamanın görünümünü tüm üyeler için bozabilir. Diğer her şey gibi bunlar da taslağa yazılır, bu yüzden Discard draft bir denemeyi geri alır — ancak yalnızca siz yayınlamadan önce.

Dört kutu, hepsi JSON:

• Component style overrides (businessStyles.components) — bileşen bazlı tema geçersiz kılmaları; örneğin uygulama içi tarayıcının başlık çubuğu veya nav bar'ın öğe stili.
• Page style overrides (businessStyles.pages) — sayfa bazlı geçersiz kılmalar; örneğin giriş kapsayıcısı ve formu.
• Nav bar custom CSS ve Login footer custom CSS — ilgili öğenin üzerine birleştirilen ham CSS stili anahtarları.

Herkesin takıldığı tek bir kural var: camelCase kullanın. marginTop çalışır; margin-top sessizce yok sayılır.

Bir anahtarın ne işe yaradığından emin değilseniz, buraya kaydetmeden önce destek ekibine sorun.

Nereden başlamalı

Editör bilinçli olarak derindir — ileri düzey bir kullanıcı neredeyse her şeyi şekillendirebilir. Günlük işler için nadiren Screens → HomeScreen ve üzerindeki carousel'lerden fazlasına ihtiyaç duyarsınız. Hazır Templates yolda; bu da daha büyük bir yeniden tasarımı bileşen bileşen kurmak yerine tek tıkla başlanan bir noktaya dönüştürecek.