sitenizi yavaşlatmadan canlı sohbet nasıl eklenir

27 Eylül 2026 · yazan: kuba · 7 dk okuma

Canlı sohbet, bir ziyaretçi gerçekten konuşmak isteyene kadar sayfanıza neredeyse hiçbir şeye mal olmamalı. Bu rehber, bir sohbet widget’ının ilk tıklamadan önce neler yüklediğini, birini seçmeden önce neyi kontrol etmeniz gerektiğini, Spookat’ı birkaç dakikada nasıl kuracağınızı ve sayfanızın hızlı kaldığını DevTools’ta nasıl kanıtlayacağınızı gösteriyor.

Ziyaretçilerin çoğu sohbeti hiç açmaz. Okur, kaydırır, belki satın alır ve çıkar. Widget’ın sayfa yüklenirken getirdiği her şeyin bedelini yine de her biri öder, ucuz bir telefondan zayıf sinyalle girenler de dahil.

Bu maliyetin dört parçası vardır:

Baytlar. JavaScript, CSS, fontlar, görseller ve çoğu zaman kendi belgesi olan bir iframe. JavaScript pahalı olanıdır: tarayıcı onu indirir, ayrıştırır ve ana iş parçacığında çalıştırır; kaydırmayı ve dokunmaları da aynı iş parçacığı yönetir.
İstekler. Her istek bir gidiş dönüştür, yeni alan adlarına giden istekler ise ek olarak bir DNS sorgusu ve bir TLS el sıkışması öder. Yüklenirken kendi sunucusunu arayan bir widget, bunların hepsini her sayfa görüntülemesine ekler.
Depolama. Herhangi bir etkileşimden önce yazılan çerezler, localStorage ve IndexedDB. AB’de bu, widget yüklenmeden önce bile onay almanız gerekip gerekmediğini belirleyebilir.
Ana iş parçacığı süresi. Açılışta çalışan kod sizin kendi kodunuzla yarışır. Lighthouse bunu Total Blocking Time olarak raporlar ve puanınıza yansır.

Karşılaştırma sayfalarımızdaki dört widget, kimse tıklamadan önce gzip ile sıkıştırılmış halde 220 ile 509 kb arasında yükleme yapıyordu. Bunu 2026-09-26’da her widget’ı boş bir test sayfasında yükleyip aktarılan baytları toplayarak ölçtük; rakamlar ve kaynaklar /vs sayfasında. Karşılaştırma için, bu yazının tamamının metni 20 kb’tan küçük.

Bir düğme göstermek için bunların hiçbiri gerekmez. Bir düğme, birkaç yüz baytlık HTML ve CSS’tir. Geri kalan her şey (sohbet paneli, sunucuya bağlantı, geçmiş) ancak biri tıkladıktan sonra gerekir.

Herhangi bir sohbet widget’ını bir tarayıcı ve on dakikayla değerlendirebilirsiniz. Ziyaretçilerinizi ne kadar etkilediğine göre sıralanmış olarak bakmanız gerekenler şunlar.

tıklamadan önceki ağırlık

Sağlayıcının demo sayfasını ya da kendi test sitenizi açın, DevTools’u açın ve önbellek kapalıyken yeniden yükleyin. Network sekmesini sağlayıcının alan adlarına göre filtreleyin ve aktarılan boyutu toplayın. Tıklamadan önce birkaç kilobaytı aşan her şey, ziyaretçilerinizin çoğunun hiç açmayacağı bir panel için indirdiği koddur.

tıklamadan önceki istekler ve kime gittikleri

İstekleri sayın ve alan adlarını not edin. Sayfa yüklenirken API’siyle konuşan bir widget, her ziyaretçi hakkında bir şey gönderir; en azından var olduğunu ve hangi sayfada olduğunu. Bazıları üçüncü taraflardan analitik ya da hata takibi de yükler.

tıklamadan önceki çerezler ve depolama

Widget’a dokunmadan, temiz bir yüklemeden sonra Application sekmesine bakın. Widget’ın alan adlarının koyduğu çerezler ya da yazdığı depolama anahtarları, bir onay banner’ının kapsaması gerekebilecek olanlardır. Avukatınız değiliz ve kurallar ülkeden ülkeye değişir, bu yüzden sitenize neyin uygulandığını kendi avukatınıza sorun. Açıklaması en kolay durum, ziyaretçi sohbet başlatana kadar hiçbir şey saklamayan bir widget’tır.

ekibiniz nereden yanıt veriyor

Bir sohbet, yanıtı kadar iyidir. Yanıt vermek bir panel daha açmak demekse, birinin o sekmeyi bütün gün açık tutması gerekir. Sohbetler ekibinizin zaten konuştuğu yere düşüyorsa (Slack, Discord), bir yanıt bir thread içindeki tek bir mesajdır.

ekip büyüdükçe maliyeti ne olur

Koltuk başına fiyatlandırma, yanıt verebilecek her kişi için ücret alır. Çözüm başına fiyatlandırma her yanıt için ücret alır. Site başına fiyatlandırma ise kim yanıtlarsa yanıtlasın ve ne sıklıkta olursa olsun siteniz için ücret alır.

telefon

Başlatıcıyı 375 px genişliğindeki bir ekranda kontrol edin. Kendi düğmelerinizi kapatmamalı ve bir başparmağın isabet ettirebilmesi için en az 44 px olmalı. Paneli açın ve yazın: klavye, giriş alanını gizlememeli.

adım adım: spookat ile canlı sohbet

Spookat yukarıdaki kontrollerin etrafında kuruldu. Snippet, CDN’imizden küçük bir başlatıcı yükler; sitenizin görünümü zaten içindedir. Tıklamadan önce API’mize 0 istek yapar ve hiç çerez koymaz. Ekibiniz bir Slack thread’inde ya da bir Discord forum gönderisinde yanıt verir. broke af ile site başına aylık $4.99 tutar, ekip arkadaşı sınırı yoktur ve deneme süresi kart gerektirmeden 14 gündür.

1. snippet’inizi alın

Panele giriş yapın ve sitenizi ekleyin. Kurulum sayfası, site anahtarınız zaten içine yerleştirilmiş snippet’inizi ve bir kopyalama düğmesini gösterir. Adrese alan adınızı yazarak doğrudan açabilirsiniz:

https://app.spookat.com/install?domain=your-domain.com

2. kapanış body etiketinden önce yapıştırın

Tek bir etiket, sayfanın herhangi bir yerine, en iyisi </body> etiketinin hemen öncesine:

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

async, tarayıcının dosyayı getirirken sayfanızı işlemeye devam etmesi ve dosya gelince onu çalıştırması demektir. Dosya başlatıcıdır: bir düğme, stilleri ve panelde yayımladığınız görünüm. Gzip ile 4 kb’ı geçerse build’i başarısız olur. 2026-09-27’de ölçüldüğünde 2,0 kb idi.

Siteniz tek sayfalık bir uygulamaysa, etiketi yeniden işlenen bir bileşene değil, kök HTML şablonuna koyun. Başlatıcı zaten var olup olmadığını kontrol eder, yani ikinci bir kopya hiçbir şey yapmaz, ama tek yerde tek bir etiketi anlamak daha kolaydır.

3. bir görünüm seçin

8 stil ve kendi sunucularımızda barındırılan 12 font var, artı ziyaretçinin sistem fontu. Bunları panelde seçip yayımlayın; başlatıcı yeni görünümü bir dakika içinde alır. Ya da sayfada, snippet’in üstünde ayarlayın; orada panelin önüne geçer:

<script>
  window.Spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

font: "system" hiç font indirmez. Diğer her font CDN’imizden, yalnızca tıklamadan sonra gelir, asla Google’dan değil. accent bir hex renk alır ve üzerindeki yazı rengi kontrasta göre seçilir. Anahtarların tam listesi dokümanlarda.

4. slack ya da discord’u bağlayın

Panelde bir kanal bağlayın. Bağlantıyı doğrudan Slack ya da Discord içinde onaylarsınız, ardından kanalı bir listeden seçersiniz. Çalışma alanının yöneticisi değil misiniz? Panel, yönetici olan kişi için 7 gün geçerli, tek kullanımlık bir bağlantı verir ve o kişinin Spookat hesabına ihtiyacı yoktur.

Bundan sonra her konuşma Slack’te bir thread ya da Discord’da bir forum gönderisi olur.

5. thread içinden yanıt verin

Thread içinde yanıt verin, ziyaretçi bunu widget’ta görür. // ile başlayan bir mesaj dahili kalır; böylece ziyaretçi okumadan bir ekip arkadaşınıza soru sorabilirsiniz. Ziyaretçiler Slack’teki adınızı ya da Discord takma adınızı görür; /spookat me bunu site bazında gösterir ya da değiştirir.

Ziyaretçi siz yanıt vermeden ayrıldıysa ve bir e-posta bıraktıysa, cool guy ve üstü planlar yanıtı ona widget’ın dilinde e-postayla gönderir. broke af planında yanıt, bir sonraki ziyaretine kadar widget’ta bekler.

ya da: her şeyi agent’ınız yapsın

Claude Code, Cursor ya da başka bir kodlama agent’ıyla geliştiriyorsanız, şunu yapıştırın ve kılavuzu okumasına izin verin:

Add Spookat chat to my site. Read https://spookat.com/llms.txt first, then match the chat style to my site.

Agent kök şablonunuzu bulur, snippet’i ekler ve sitenize uyan bir stil seçer. Slack ya da Discord’u bağlamak ve ödeme yapmak sizde kalır: ikisini de bir insan onaylar.

devtools’ta doğrulayın

Bunların hiçbiri için hiçbir sağlayıcının sözüne güvenmeyin, bizimki dahil. Kendi sayfanızı Chrome’da şöyle kontrol edebilirsiniz. Firefox ve Safari’de aynı paneller biraz farklı isimlerle bulunur.

network sekmesi, tıklamadan önce

Eski depolama ya da önbellek karışmasın diye sayfanızı gizli bir pencerede açın.
DevTools’u açın, Network’e gidin, “Disable cache” kutusunu işaretleyin ve yeniden yükleyin.
Filtre kutusuna spookat yazın.

Tek bir istek görmelisiniz: cdn.spookat.com adresinden gelen başlatıcı, yaklaşık 2 kb aktarılmış. api.spookat.com adresine hiçbir şey gitmez. Daha fazlasını görüyorsanız, onu sayfadaki başka bir şey yüklemiştir (örneğin bir etiket yöneticisindeki ikinci bir snippet).

application sekmesi, tıklamadan önce

Application’ı, ardından alan adınız için Cookies ve Local storage bölümlerini açın. Spookat sayfa yüklenirken buraya hiçbir şey yazmaz. Hiçbir zaman hiç çerez koymaz. Kullandığı tek depolama anahtarı, spookat: ve ardından site anahtarınız, ancak ziyaretçi ilk mesajını gönderdikten sonra yazılır: sohbetini o cihazda tutar.

tıklamadan sonra

Network kaydını temizleyin ve başlatıcıya tıklayın. Şimdi panel CDN’den yüklenir: betiği (2026-09-27’de gzip ile 16,6 kb) ve stilinizin stil sayfası (yaklaşık 2 kb). Bir font seçtiyseniz o da gelir. Ardından panel API’mize bir bağlantı açar ve ziyaretçi yazabilir.

Bütün numara bu: pahalı kısım tıklamanın arkasına geçer ve onu yalnızca sohbet etmek isteyen ziyaretçiler indirir.

lighthouse

Lighthouse’u mobil modda, sayfada snippet olmadan ve snippet ile, her biri için birkaç kez çalıştırın ve medyanları karşılaştırın. Aynı sayfada tek tek çalıştırmalar birkaç puan oynar, yani tek bir çalıştırma hiçbir yönde bir şey kanıtlamaz. 2 kb’lık bir başlatıcı ve tıklamadan önce hiç iş olmadığında, fark bu gürültünün içinde kalmalıdır.

Küçük bir başlatıcı, ancak etrafındaki sayfa izin verirse küçük kalır. En sık gördüğümüz hatalar bunlar ve her biri yukarıdaki emeği sessizce boşa çıkarır.

Sohbeti kendiliğinden açmak. On saniye sonra kendiliğinden açılan bir panel, satın almak üzere olanlar dahil her ziyaretçi için sohbetin tamamını yükler. Telefonda sayfayı da kapatır. Konuşmayı siz başlatmak istiyorsanız bir karşılama mesajı yazın; sohbet açıldığında görünür.

Paneli “daha hızlı olsun diye” önceden yüklemek. Panel betiği için bir <link rel="preload"> ya da prefetch, indirmesini herkes için yeniden tıklamanın önüne taşır. Tıklamadan sonra bu, ziyaretçiye yakın bir CDN’e giden iki kısa istektir. Bırakın tıklamayı beklesinler.

Onu bir etiket yöneticisine koymak. Etiket yöneticisi, başka betikleri yükleyen bir betiktir. Yalnızca sohbet snippet’ini tutmak için varsa, sohbetin kendisinden daha pahalıya gelir. Etiketi doğrudan şablonunuza koyun.

İki snippet. Bir tema bir tane ekler, bir eklenti bir tane daha, biri de üçüncüsünü footer’a yapıştırır. Başlatıcı kendi kopyalarını yok sayar, ama diğer widget’lar çoğu zaman saymaz ve sonunda aynı köşe için yarışan iki sohbetiniz olur. Şablonlarınızda cdn.spookat.com (ya da eski sağlayıcınızın alan adını) arayın ve bir tanesini bırakın.

verilere ne olur

Bir ziyaretçi mesaj gönderdiğinde, mesaj önce kaydedilir, sonra Slack thread’inize ya da Discord gönderinize iletilir. Hiçbir zaman IP adresi saklamayız. Ziyaretçinin ülkesi mesaj anında çevrimdışı bir veritabanından bulunur ve adres saklanmaz. Sohbet geçmişi broke af planında 30 gün, cool guy planında 90 gün ve vc money planında 365 gün tutulur, sonra silinir. Alt işleyiciler dahil ayrıntılar gizlilik sayfasında.

tekrar kullanabileceğiniz bir kontrol listesi

Yalnızca bizimki için değil, her sohbet widget’ı için:

Snippet async ya da defer ile yüklenir ve işlemeyi engellemez.
Tıklamadan önce: birkaç kilobayt, tek istek, sağlayıcının API’sine hiç istek yok.
Ziyaretçi sohbet başlatmadan önce hiç çerez ve hiç depolama yok.
Başlatıcı, 375 px’lik bir ekranda kendi düğmelerinizi kapatmıyor.
Panel ve fontları yalnızca tıklamadan sonra yükleniyor.
Ekibiniz zaten çalıştığı yerden yanıt veriyor, bakılacak bir sekme daha yok.
Fiyatlandırma, bir ekip arkadaşı eklediğiniz için sizi cezalandırmıyor.
Önbellek kapalıyken, gizli bir pencerede kendiniz ölçtünüz.

Kendi sitenizde deneyin: deneme süresi 14 gün ve kart gerektirmiyor.