Özel Widget

WebView içinde HTML, CSS ve JS; marka teması

custom türündeki bir widget, panelde yazdığınız kendi HTML, CSS ve JavaScript'idir. Native karşılığı olamaz: rastgele CSS'in React Native'de karşılığı, rastgele JavaScript'in çalışacağı yer yoktur. Bu yüzden uygulamada bir WebView içinde, izole çalışır. Panel tarafı: Custom Widget.

Kim çalıştırır

Ne yapar
Akinon App Maker eklentisicustom yüzeyini kendiliğinden izole bir WebView'de çizer, window.selwise köprüsünü ekler, yüksekliği ölçer (Akinon App Maker Eklentisi).
Kendi React Native uygulamanızSDK WebView çizmez. getSurfaces() size yüzeyi verir; HTML, CSS ve JS'i kendi WebView bileşeninizde çalıştırmak ve köprüyü yazmak sizin işinizdir.

Panel Custom CSS ve Custom JS alanlarının uygulamada yalnızca custom türünde çalıştığını söyler; customCss ve customJs yerel türlerde (duyuru çubuğu, popup, vb.) uygulanmaz çünkü orada ne bir stil sayfası ne eval vardır.

Yüzeyden kodu okuma

Panelin Custom CSS ve Custom JS alanları, içerik bloğundan ayrı alanlardır ve çoğu zaman kodun düştüğü yer burasıdır. Okuma sırası (eklentinin ve web widget'ının sırasıyla aynı):

ParçaOkuma sırası
HTMLsurface.content.html, sonra content.customCode.html
CSSsurface.customCss, sonra content.css, sonra content.customCode.css
JSsurface.customJs, sonra content.javascript, sonra content.customCode.js
Çalışma zamanıcontent.jsTiming: immediate (varsayılan), domReady, customEvent (adı content.jsEventName)

HTML yoksa çizilecek bir şey yoktur. Panel eski sürümlerde kodu farklı anahtarlarla yazmıştır; eski bir widget'ın uygulamada boş kalmaması için sıranın hepsine bakın.

WebView köprüsü

Eklenti widget'ın içine window.selwise nesnesini koyar:

window.selwise.track('kupon_kullanildi', { code: 'APP20' });   // ad en çok 64 karakter
window.selwise.addToCart('4711', 1);                          // ürün kodu, adet
window.selwise.navigate('/baskets/basket/');
window.selwise.close();
ÇağrıNative tarafta ne olur
track(name, metadata)custom_event olarak kaydedilir; adınız metadata.eventName içinde saklanır. Sunucu yalnızca kanonik olay adlarını tanır; adınızı doğrudan göndermek raporda görünmezdi.
addToCart(code, quantity)Uygulamanın kendi sepet aksiyonunu tetikler. WebView'in mağaza oturumu yoktur; oradan atılan istek ziyaretçinin görmediği bir sepete düşerdi. Sepet ikonundaki sayı da bu yüzden güncellenir.
navigate(url)Tıklama kaydedilir ve uygulamanın kendi ekranına gidilir. Widget içindeki a bağlantıları da aynı yolu izler; WebView içinde gezinmez.
close()Yüzey kapatılır ve hatırlanır (dismissSurface).

Mesajlar güvensiz girdidir: tanınmayan ya da 20.000 karakteri aşan mesaj atılır. Yükseklik ölçümünü widget kendisi bildirir (üst sınır 4000 piksel); sizin ölçmeniz gerekmez. Gövde şeffaftır ve kenar boşluğu yoktur, böylece yüzen bir düğme beyaz bir blok olarak gelmez.

Kendi WebView'inizi yazıyorsanız aynı güvenlik ayarlarını kullanın: kaynak olarak yalnızca satır içi HTML, originWhitelist: ['about:*'], dosya erişimi ve üçüncü taraf çerezleri kapalı.

Gösterim, tıklama ve kapatma sayıları diğer yüzeylerle aynıdır: Kampanya ve Widget.

Marka teması

Widget stil varsayılanları var(--selwise-brand, #1a1a1a) biçimindedir; hiçbir rengi elle değiştirmemiş bir merchant da bu referansları gönderir. React Native'de ne basamaklanma ne var() vardır; kendi bileşenlerinizi boyuyorsanız çözülmüş tokenları alın:

const tokens = selwise.getTheme();
// { '--selwise-brand': '#d3145a', '--selwise-brand-text': '#ffffff', ... }

Tema tanımlı değilse var() içindeki yedek değer kullanılır; web ile aynı. Eklenti bunu sizin yerinize çözer. Panel tarafı: Marka Teması.

getSearchStatus() aramanın kanalda açık olup olmadığını ve test modunda olup olmadığını söyler: { enabled: boolean; testMode: boolean }. Arama modülü satın alınmamışsa enabled her zaman false'tur.

Sırada ne var

Son güncelleme: 10 Ekim 2026