JavaScript API: bileşeni sayfanızdan yönetme

Bileşen tek bir genel nesne sunar: window.ReactiveChat. Tüm komutları işlev biçiminde çağırırsınız:

ReactiveChat('command', argument1, argument2);

Temel komutların adları yaygın sohbet bileşenleriyle uyumludur (boot, shutdown, open, identify, update, track …); böylece geçiş az iş gerektirir.

Yükleme öncesi kuyruk

Yükleyici önce ReactiveChat nesnesini oluşturur. Çekirdek yüklenene kadar bu sürüm her çağrıyı ReactiveChat.q içine kaydeder; ardından çekirdek listeyi sırayla işler. Hiçbir çağrı kaybolmaz.

Kodunuz yükleyici etiketinden önce çalışabilecekse başına şu satırı koyun:

window.ReactiveChat = window.ReactiveChat || function () {
  (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments);
};

Bunun iki sonucu vardır:

• Yüklemeden önce tüm dönüş değerleri undefined olur. Bu nedenle dönüş değeri olan komutları (getSession, isOpen, tour …) ready olayından sonra kullanın (bkz. Olaylar).
• Bir komut yüklemeyi tetikler. boot, update, track ve identify dışındaki her komut çekirdeği hemen yükler (tetikleyici: command). Bu nedenle identify komutunu erken çağırmak ek yük oluşturmaz.

Komutlar hiçbir zaman istisna fırlatmaz: komuttaki bir hata undefined sonucunu verir; bilinmeyen komutlar yok sayılır (data-rc-debug="true" ile konsolda görünür).

ReactiveChat('on', 'ready', function () {
  var s = ReactiveChat('getSession');
  console.log('Visitor', s && s.visitorId);
});

Başlatma ve kapatma

• boot (cfg?: object) – ilk çağrı, betik etiketi öznitelikleriyle aynı alanları kullanarak yapılandırmayı belirler (camelCase, örneğin { siteKey, locale, theme, position, brand }) ve başlatır. Sonraki her çağrı yalnızca locale, theme, dnd, autoOpen, strings ve position değerlerini alır. Kuyrukta boot yoksa çekirdek bunu kendisi çağırır.
• shutdown () – bileşeni bu sayfadan kaldırır (pencere, bağlantı, gözlemciler) ve ReactiveChat nesnesini basit bir kuyruğa sıfırlar. Sayfayı yeniden yüklemeden tekrar başlatmak öngörülmemiştir.

ReactiveChat('boot', { locale: 'en', theme: 'dark' });

Pencere

• open (opts?) – pencereyi açar. opts bir öğe (pencere yanında görünür) veya bir nesnedir:
• anchor (öğe, isteğe bağlı) – bu öğenin yanında açar; yoksa normal konum kullanılır.
• message (dize, isteğe bağlı) – giriş alanına metin yazar, göndermez (en fazla 200 karakter).
• tab (msg | home | help, isteğe bağlı) – sekmeyi seçer. anchor öğesinin kendisinde data-rc-message veya data-rc-tab varsa bunlar uygulanır; çağrıda açıkça belirtilen değerler önceliklidir. Yüklemeden önce istek hatırlanır.
• close () – pencereyi kapatır.
• toggle () – açık/kapalı durumunu değiştirir.
• isOpen () → boolean.

document.querySelector('#hilfe').addEventListener('click', function (ev) {
  ReactiveChat('open', { anchor: ev.currentTarget, message: 'Question about my order', tab: 'msg' });
});

Mesajlar ve sohbetler

• sendMessage (text: string) – ziyaretçi adına, kendisi yazmış gibi mesaj gönderir (aynı sınırlar geçerlidir, bkz. Sınırlar). Bunu yalnızca ziyaretçinin bir eyleminden sonra kullanın; asla kendiliğinden göndermeyin.
• newConversation () – yeni bir sohbet başlatır.
• leaveMessage () – kimse müsait değilken mesaj bırakma formunu açar.
• startConversation (text: string, suche?: string) – yeni bir sohbet başlatır ve hazır olur olmaz text gönderir. Smart Answer tarafından, arama sorusuna sohbette devam etmek için kullanılır.
• continueConversation (id: string, text: string) – mevcut bir sohbete text ile devam eder (id, [0-9A-Za-z_-]{1,64} ile eşleşmelidir; aksi hâlde yeni bir sohbet başlatılır). Smart Answer’dan aktarmada da kullanılır.

Ziyaretçiler ve bağlam

• identify ({ userId, email, name, userHash, exp }) – oturum açmış bir kullanıcıyı bildirir. Diğer alanlar atılır. Sunucunuzda hesaplanmış geçerli bir userHash yoksa kullanıcı doğrulanmamış sayılır: ad ve e-posta panelde görünür, ancak bunların hiçbiri müşteri verilerine veya başka kişilerin sohbet geçmişlerine erişim sağlamaz. İmzayla ilgili tüm bilgiler Ziyaretçileri tanımlama sayfasındadır.
• update (attrs: object) – öznitelikleri MousePlayer bağlantısına iletir (yalnızca MousePlayer kullanıyorsanız önemlidir).
• track (name: string, meta?: object) – bir aşamayı bildirir. meta içindeki bağlam listesinde yer alan alanlar (url, path, title, page_type, product_id, variant_id, category, price, currency, cart_value, cart_items, in_stock ve diğerleri), sayfa bağlamı olarak asistana ve temsilcilere iletilir. Diğer alanlar atılır. Bkz. Ziyaretçileri tanımlama ve bağlam iletme.
• getSession () → { sessionId, visitorId, tabId } veya null.
• getEndpoint () → { siteKey, wsUrl, apiBase, locale, visitorId } – bileşenin bağlantıyı nereden aldığı; aynı adrese ihtiyaç duyan kendi betikleriniz içindir.
• portal (basis?: string) → boolean – müşteri portalını yeni bir sekmede açar ve doğrulanmış kimliği iletir. Doğrulanmış kullanıcı yoksa false döndürür. İsteğe bağlı basis değeri, size ait bir https:// kaynak adresidir.

ReactiveChat('track', 'produkt_angesehen', {
  page_type: 'product', product_id: 'SKU-4711', price: 49.9, currency: 'EUR', in_stock: true
});

Dil, tema

• setLocale (locale: 'de' | 'en' | 'pl') – dili değiştirir; seçim tarayıcıda hatırlanır.
• setTheme ('light' | 'dark' | 'auto').

Kısa mesaj balonu, tanıtım kartı, turlar

• showTeaser ({ text, quickReplies?, replyRoles?, avatar?, ttlMs?, ruleId? }) → boolean – sohbet düğmesinin yanında küçük bir balon gösterir. quickReplies en fazla 3, ttlMs 0–120000 (varsayılan 15000). Pencere açıksa, sohbet düğmesi gizliyse, “Rahatsız etmeyin” etkinse, bir sohbet sürüyorsa veya sıklık sınırlaması uygulanıyorsa gösterilmez (false).
• show (text | object) → boolean – kısa biçim: ReactiveChat('show', 'Questions about shipping?').
• hideTeaser / hide () – balonu gizler.
• promo (false | true | object) – bu sayfadaki tanıtım kartını gizler, tekrar gösterir veya kendi alanlarınızla geçersiz kılar (titel, text, bild, knopf, ziel, link_text, link_ziel, farbe, orte, zielgruppe).
• tour (id: string) → boolean – hesabınızda oluşturulmuş bir ürün turunu başlatır; bilinmeyen kimlik için false döndürür. Turlar Özelleştirme altında ayarlanır.
• tourStop () – devam eden turu sonlandırır.

A/B testleri

• abVariant () → { test, variant, qa } veya null – bu ziyaretçinin gördüğü varyant.
• abGoal () – devam eden testin hedefine ulaşıldığını bildirir (örneğin teşekkür sayfasında).

ReactiveChat('on', 'ready', function () { ReactiveChat('abGoal'); });

Çalışma sırasında tasarım

• setBrand (marke: object) – yeniden derlemeden renkleri ve şekli geçersiz kılar; null bir değeri tekrar kaldırır.
• brandCheck () → ölçülen karşıtlıkların listesi: { paar, ist, soll }.
• brandTokens () → çözümlenmiş tasarım değerleri.
• setStart (startseite: object) – ana ekranı çalışma sırasında ayarlar (önizlemeler için).

Bu nesnelerin alanları Özelleştirme altında açıklanır.

Olaylar

• on (name, callback) / off (name, callback) – olaylara abone olur ve abonelikten çıkar. Liste ve veri yükleri: Olaylar.

Doğrudan nesne üzerinde

Yüklendikten sonra bazı komutlar yöntem olarak da kullanılabilir: ReactiveChat.getSession(), ReactiveChat.isOpen(), ReactiveChat.getEndpoint(), ReactiveChat.startConversation(), ReactiveChat.continueConversation(). Ayrıca ReactiveChat.version vardır (çekirdeğin sürümü). Bu yöntemler yüklemeden önce mevcut değildir; güvenli yol işlev biçimidir.

Olmayan komutlar

Boşuna aramayın: destroy, reset, setUser, send, setConsent, trackPage veya navigate komutları yoktur. Onayı onay platformunuzla veya data-rc-consent üzerinden yönetirsiniz (Gizlilik entegrasyonu); bileşen sayfa değişikliklerini kendisi algılar (SPA); oturum kapatmak için Ziyaretçileri tanımlama sayfasına bakın.

Sonraki: Olaylar