Ö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 eklentisi | custom 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ız | SDK 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ça | Okuma sırası |
|---|---|
| HTML | surface.content.html, sonra content.customCode.html |
| CSS | surface.customCss, sonra content.css, sonra content.customCode.css |
| JS | surface.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