Hızlı başlangıç: beş dakikada çalışan sohbet

1. Site anahtarını alın ve alan adınızı girin

Hesabınızda Proje → Kurulum altında site anahtarını içeren yerleştirme kodunuzu bulabilirsiniz. İzin verilen kaynaklar altında sohbetin çalışacağı tüm alan adlarını girin (alt alan adları dahildir: your-company.com, www.your-company.com ve shop.your-company.com adreslerini kapsar). Sohbet sunucusu yalnızca bu alan adlarından bağlantı kabul eder.

2. Tek satır

Hesabınızdaki kodu </body> öncesine veya <head> içine koyun:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-locale="en"
        async></script>

Hesabınızdaki kod, sohbet düğmesinin hemen doğru renkte görünmesi için marka renginizi içeren data-rc-brand özniteliğini de taşır. Bu nedenle değiştirmeden kopyalamanız en iyisidir. Tüm öznitelikler: Script etiketi başvurusu.

3. Content Security Policy’yi genişletin

Web siteniz CSP belirliyorsa şunları ekleyin:

script-src  https://cdn.reactive.chat;
connect-src wss://ws.reactive.chat https://ws.reactive.chat;
img-src     data: https:;

Her iki connect-src girdisinin neden gerekli olduğu: Güvenlik ve CSP.

4. Kontrol edin

Sayfanızı geliştirici araçlarıyla açın:

• Öğeler: <body> sonunda <reactive-chat> bulunur.
• Ağ: loader.js, ardından (en geç sohbet düğmesinin üzerine gelindiğinde) core.<hash>.js ve wss://ws.reactive.chat/rc_wss/ adresine 101 durum kodlu WebSocket bağlantısı.
• Konsol: yüklendikten sonra ReactiveChat('getSession'), { sessionId, visitorId, tabId } döndürür.

Bir test mesajı yazın; hesabınızın temsilci panelinde görünür. Bağlantı kurulamıyorsa Sorun giderme sayfasına bakın.

Farklı seçenekler

Etiket yöneticisi üzerinden: yükleyici özniteliklerini kendi <script> öğesinden okur. Bu nedenle öznitelikleriyle birlikte gerçek bir <script src> ekleyen etiket oluşturun veya yapılandırmayı önceden ayarlayın:

<script>
  window.ReactiveChatSettings = { siteKey: 'SITE_KEY', locale: 'en' };
</script>
<script src="https://cdn.reactive.chat/loader.js" async></script>

Katı CSP altında satır içi betiğin bir nonce değerine ihtiyacı vardır; bunu etiket yöneticiniz ayarlamalıdır.

loader.js dosyasını kendiniz sunuyorsanız: dosyayı kendi dizininizden yüklerseniz sohbet adresini açıkça belirtin. Aksi halde widget sohbet sunucusunu sizin alan adınızda arar ve hiçbir hata mesajı görünmeden hiçbir mesaj ulaşmaz:

<script src="/js/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-ws-url="wss://ws.reactive.chat/rc_wss/"
        data-rc-cdn-base="https://cdn.reactive.chat/"
        async></script>

data-rc-cdn-base ile yükleyici, eşleşen çekirdeği bizden almaya devam eder. Not: loader.js kopyası güncellenmez; çekirdek değiştiğinde onu kendiniz yenilemelisiniz. cdn.reactive.chat üzerinden veya özel alan adı üzerinden yerleştirme önerilen yol olmaya devam eder.

İki parçalı uzantısı olan alan adlarında (.co.uk, .com.au …), dosyayı kendiniz sunarken data-rc-ws-url özniteliğini her zaman açıkça ayarlayın.

Tek sayfalı uygulamalar: uygulama kabuğuna bir kez yerleştirin; SPA ve sayfa değişiklikleri sayfasına bakın.

Mobil uygulamalar: Mobil uygulamalar.

Sonraki adımlar

• Oturum açmış kullanıcıları tanıyın: sunucunuzdan bir imzayla ReactiveChat('identify', …) – Ziyaretçileri tanımlama.
• Kendi düğmeleriniz ve bağlantılarınız: <a href="#rc-open">Help</a> – Sohbeti kendi bağlantınızdan açma.
• Olaylara tepki verin: ReactiveChat('on', 'message', …) – Olaylar.
• Arka uç sisteminizi bağlayın: Webhook’lar, Sunucu API’si, Müşteri verileri.
• Görünüm ve davranış: Özelleştirme.