Web Uygulaması

Web Uygulaması, üyelerin gördüğü PWA'dır — üyelerin bir bağlantıdan, bir QR koddan ya da uygulama olarak yükledikten sonra açtıkları sayfa. Üyeler burada bakiyelerini ve hediyelerini görür, ödeme için okutur, menülere veya şubelere göz atar, kupon kodu girer ve Wallet Pass'lerini indirir.

Kısaca

Web Uygulaması tasarımının tamamı self servistir. Kullanıcı Arayüzleri → Web Uygulaması altında App Editor'ü bulursunuz: Brand colors, her ekran ve bileşenleri, popup'lar, yükleme davranışı ve gelişmiş style override'lar. Değişiklikler bir Draft'a kaydedilir; dolayısıyla siz Publish'e basana kadar üyelerinizin gördüğü hiçbir şey değişmez — üstelik önce Preview ile bakabilir, sonra History'den geri alabilirsiniz. Günlük işlerde en sık yapılan düzenleme yine ana ekrandaki Carousel'dir: banner görsellerini değiştirmek ve bir üye onlara dokunduğunda ne olacağını belirlemek.

App Editor

Hub'da Kullanıcı Arayüzleri → Web Uygulaması'nı açın. Soldaki panel editörün haritasıdır; sağdaki tuval, seçtiğiniz öğenin ayarlarını gösterir.

Editör altı alana ayrılmıştır:

• Theme & Brand — genel görünüm: Brand colors, Corner radius, Logo ve Favicon, Font ve Navigation bar.
• PWA — bir üye uygulamayı ana ekranına yüklediğinde uygulamanın kendini nasıl tanıttığı.
• App Settings — uygulama mağazalarındaki native mobil uygulama için görseller ve renkler. Farklı bir iş, farklı bir kitle; bu yüzden kendi sayfası var: Mobil uygulama.
• Popups — girişten sonra, uygulamanın herhangi bir yerinde gösterilen ve bir ekrana bağlı olmayan mesajlar.
• Screens — uygulamanın her ekranı için bir kayıt: ana ekran ve yerleşik sayfalar.
• Advanced — normal panellerin kapsamadığı uç durumlar için ham style override'lar.

Bu sayfanın geri kalanı bu alanları tek tek anlatır. Her kutuyu listelemez — renk ve boyut alanlarının çoğu tam olarak etiketinde yazanı yapar — ama değiştirmeden önce anlamakta fayda olanları kapsar.

Draft → Preview → Publish

Düzenlediğiniz hiçbir şey doğrudan yayına girmez. Her Save bir Draft'a yazar; üst çubuk yayınlanmamış değişiklik olup olmadığını size söyler. Buradan:

• Preview — kesinleştirmeden önce Draft'ı üyelerinizin göreceği şekliyle tam olarak görün.
• Publish — Draft'ı tüm üyeler için yayına alın.
• Discard draft — yayınlanmamış değişiklikleri atın ve yayındaki sürüme dönün.
• History — yayınlanan her sürüm saklanır ve istediğiniz sürüme geri dönebilirsiniz.

Bir ayarın uygulamanın yorumlayamayacağı bir değeri olduğunda (örneğin sayı beklenen yerde metin) üst çubuk ayrıca doğrulama uyarıları gösterir. Yayınlamadan önce uyarıları giderin — Draft sürekli kontrol edilir, bu yüzden rozet siz düzenledikçe güncellenir.

Editörün her yerinde geçerli kurallar

• Her kaydetme düğmesi — Save draft, Save settings, Save list, Save — aynı Draft'a yazar. Siz Publish'e basana kadar üyelere hiçbir şey ulaşmaz.
• Boş 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 verisi ekleyebilirsiniz (ad, bakiye…); böylece tek bir metin her üye için kendini kişiselleştirir.
• İkon alanları tabler:plus gibi bir Iconify adı ister. Font Awesome sınıfları uygulama tarafından yok sayılır.

Theme & Brand

Genel görünüm. Burada bir şeyi değiştirin, tüm ekranlar onu izler.

• Brand colors — birincil, ikincil ve metin. Editörün geri kalanı bu renklere geri döner, bu yüzden önce bunları ayarlayın.
• Layout → Corner radius — tek bir sayı; uygulamanın tamamındaki kartlara ve düğmelere uygulanır. Tek tek paneller bunu geçersiz kılabilir.
• Brand assets
  • Favicon — tarayıcı sekmesi ikonu. Yayınlandıktan sonra aynı zamanda bu işletmenin Hub'daki avatarı olur, dolayısıyla beklemediğiniz yerlerde karşınıza çıkar.
  • Logo — Screens → Login Page'in kendi logosu yoksa giriş logosu için yedek olarak kullanılır; ayrıca abonelikten çıkma ve veri silme sayfalarında gösterilen logodur. Burada 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 ya da harici bir sayfa yükleyen bir öğeye dokunduğunda açılan tam ekran diyalog. Header icon color'ı boş bırakırsanız başlık rengini izler.
• Font — sağlayıcıyı seçin, ardından yazı tipi ailesinin adını sağlayıcının yazdığı şekliyle birebir yazın.

• Navigation bar — uygulamanın altında uzanan çubuk.
  • Nav bar type ve Show labels, çubuğun biçimini ve öğe adlarının ikonların altında görünüp görünmeyeceğini değiştirir.
  • Visibility — üç bağımsız anahtar: nav bar'ın kendisi, center button (bazı düzenlerin kullandığı yükseltilmiş yuvarlak düğme) ve en üstteki app bar. Nav bar'ı kapatırsanız, ana ekranın üyelere diğer ekranlara ulaşmaları için başka bir yol sunduğundan emin olun.
  • Navigation items — sıralamak için sürükleyin, etiketi ve yönlendirdiği yeri düzenlemek için kalem, kaldırmak için çöp kutusu simgesini kullanın. Üyelerin gerçekten dokunduğu liste budur, bu yüzden onu üyelerin kullandığı ekranlarla sınırlı tutun.

PWA

Bir üye Web Uygulaması'nı telefonunun ana ekranına yükledikten sonra uygulamanın nasıl davrandığı. Bu, yüklenmiş web sitesidir; mağazalardaki native uygulama değildir — onun için bkz. Mobil uygulama.

Yüklemeyi duyurmadan önce bunu ayarlayın

Buradaki değişiklikler halihazırda yüklenmiş uygulamaları yenilemez. Bir ana ekran ikonu, üye onu kaldırıp yeniden yükleyene kadar eski adını ve görselini korur.

• App name — yükleme sırasında gösterilen tam ad.
• Short name — ana ekran ikonunun altındaki etiket. Telefonlar uzun etiketleri kısaltır, bu yüzden kısa tutun.
• Description — bazı tarayıcılar bunu yükleme isteminde gösterir.
• Manifest icons — telefon ana ekran ikonunu çizerken aralarından seçim yaptığı ikon seti. Save list bu bloğu kendi başına kaydeder.

Popups

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

• Popup type — popup'ın ne işe yaradığı. Örneğin installReminder, “bu uygulamayı ana ekranınıza ekleyin” hatırlatmasıdır.
• Style ve Content type — nasıl sunulduğu ve içinde ne olduğ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 sıklık sınırı. -1, yalnızca bir kez demektir; pozitif herhangi bir sayı o kadar gösterim anlamına gelir.
• Title ve Body — metin; üye verisi için Insert token ile birlikte.
• Close button ve "Don't show again" text — boş bırakırsanız popup varsayılanlarını kullanır.
• Image veya Lottie URL — sabit bir görsel ya da bir animasyon. Error title ve Error Lottie URL, popup'ın eyleminin başarısız olduğu durumu kapsar.

Save list popup listesinin tamamını tek seferde kaydeder.

Screens

Ekranlar iki türdedir.

HomeScreen bir tuvaldir

Ana ekran; ekleyebileceğiniz, yeniden sıralayabileceğiniz, çoğaltabileceğiniz ve silebileceğiniz bileşenlerden oluşan bir yığındır. Her biri kendi ayar panelinde 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 veya görselini ve native durum ve alt çubuklarını belirler.

Bir bileşendeki </> ikonu, 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ı geçerlidir — yapıştırdığınız şey doğrulanmaz.

Carousel — banner alanınız

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

• Görsel — slayt ekleyin, kaldırın veya yeniden sıralayın; her slayt tek bir görseldir.
• Eylem — bir üye dokunduğunda ne olacağı: hiçbir şey (dekoratif), bir popup açmak, bir URL açmak (uygulama içinde veya yeni bir sekmede), “bu uygulamayı yükle” istemini tetiklemek, Wallet Pass'i indirmek, yol tarifi açmak veya bir e-posta başlatmak.
• Kimin göreceği — isteğe bağlı olarak bir slaydı belirli etiketlere sahip üyelerle sınırlayın. Slaydı herkese göstermek için boş bırakın. Aynı Carousel içinde yalnızca VIP'lere ya da belirli bir segmente özel banner'ları böyle yayınlarsınız.

Carousel'in tamamını etkileyen ayarlar slayt listesinin üstündedir: 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 tek slaytlı bir Carousel'i dokunulabilir bir banner düğmesi olarak 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 metinleridir — ekran başlıkları, düğme etiketleri, boş durum ve hata mesajları — ve görünümleridir: arka plan, kart stili, ikonlar. Bu sayede her akış doğru çalışmaya devam ederken siz yine de her dilde kendi ses tonunuzu yakalayabilirsiniz.

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

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

Bu özellik işletme için etkin değilse GenerateCode soluk (gri) görünür.

Giriş 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 ekran bazlı bir geçersiz kılmadır: görseli boş bırakırsanız Theme & Brand'de 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üğmesinin, başlığın ve alt bilgi ayırıcısının stilidir.

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

Registration Page — sayfa başlığı, gönder düğmesi, No-connection 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 placeholder'ı 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: kenarlığı açan şeyin bir Border color belirlemek olduğunu unutmayın; boş bırakılan bir Icon corner radius ise genel Corner radius'a geri döner. Gift card texts, geçerlilik satırını, damga kartı etiketini, hediye etiketini ve kapat düğmesini kapsar.

Profile — ekran başlığı, çıkış satırının metni ve bilgi kartının, çıkış düğmesinin ve menü kapsayıcısının stili. Çıkış Icon'u bir Iconify adı, bir Font Awesome ikonu, yüklenmiş bir görsel veya bir Lottie animasyonu olabilir. Divider color yalnızca Gap between rows 0 olduğunda görünür.

Menu buttons, bir üyenin Profile altında gördüğü satırlardır — kişisel bilgiler, bildirim tercihleri, etkinlik, kupon kodları, yasal bildirimleriniz, iletişim formu, veri silme talebi. Sıralamak için sürükleyin, etiketi ve hedefi düzenlemek için kalem, 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 Iconify adları alır. Filter categories, listenin üzerindeki etiket düğmeleridir ve liste düzenlenebilir — üyelerin hangi kategorilere göre filtreleyebileceğini siz belirlersiniz.

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

UpdateMemberDetails — ekran başlığı, kaydet düğmesi, No-connection mesajı. Üyelerin kendi bilgilerini tamamlamak veya düzeltmek için kullandığı form budur.

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

EnterCode — üyelerin kupon kodu yazdığı ekran. Ekran başlığı, kod kartının başlığı ve açıklaması, giriş alanı placeholder'ı, zorunlu alan mesajı ve gönder etiketi, ayrıca üç uyarı: Success, Invalid-code ve Already-used. Code dots, rakamlar için görsel yer tutuculardır — bunun yerine düz bir giriş alanı istiyorsanız Show dots işaretini kaldırın.

Catalogs — uygulamanızdaki gezilebilir listeler: restoranlar, iş ortakları, bir duyuru panosu, bir menü.

Katalog ID'sini yeniden adlandırmayın

Düğmeler bir kataloga bu ID üzerinden bağlanır (/catalog?catalog=<id>). Bir ID'yi yeniden adlandırmak, eski ID'ye işaret eden tüm düğmeleri bozar.

Advanced

Güvenlik ağı yok

Bunlar doğrulaması olmayan ham ayarlardır. Hatalı bir değer, uygulamanın stilini tüm üyeler için bozabilir. Diğer her şey gibi bunlar da Draft'a gider, dolayısıyla Discard draft bir denemeyi geri alır — ancak yalnızca siz onu yayınlayana kadar.

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 — o öğeye eklenen 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 yaptığından emin değilseniz, burada 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; bunlar büyük bir yeniden tasarımı bileşen bileşen kurmak yerine tek tıklık bir başlangıç noktasına dönüştürecek.