saf html bir siteye canlı sohbet ekleyin

30 Eylül 2026 · yazan: kuba · 5 dk okuma

Saf HTML bir sitenin canlı sohbet için tam olarak bir satıra ihtiyacı vardır: </body> etiketinden önce bir script etiketi. Bu rehber, o satırın elle yazılmış sayfalarda ve statik site üreticisiyle yapılmış sitelerde nereye gittiğini, yanına ekleyebileceğiniz tüm seçenekleri ve tıklamadan önce hiçbir şeyin yüklenmediğini tarayıcıda nasıl kontrol edeceğinizi gösteriyor.

satır

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

Site anahtarınız paneldeki kurulum sayfasında, snippet’in içine zaten yerleştirilmiş halde ve bir kopyalama düğmesiyle birlikte duruyor. site_live_ ile başlar ve herkese açıktır: zaten sayfanızın kaynak kodunda yer alır ve yalnızca kaydettiğiniz alan adında çalışır.

Yüklediği dosya başlatıcıdır: bir düğme, stilleri ve panelde yayımladığınız görünüm. Gzip ile 4 kb’tan küçüktür (bunu aşarsa build başarısız olur). API’mize 0 istek yapar ve hiç çerez koymaz. Sohbet paneli ve sunucumuzla bağlantı, ancak bir ziyaretçi tıkladığında yüklenir.

Bu konuda yeni misiniz? Ana rehber, bir sohbet widget’ının bir sayfaya neye mal olduğunu ve nelere bakmanız gerektiğini anlatıyor.

nereye gider

Kapanış </body> etiketinin hemen öncesine:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My site</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <p>Everything else on your page.</p>

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

Neden orası ve neden async:

Body’nin sonunda etiket, üstündeki hiçbir şeyi bekletmez. Tarayıcı etikete geldiğinde içeriğinizi zaten görmüştür.
async, tarayıcıya dosyayı arka planda getirmesini ve gelince sayfayı durdurmadan çalıştırmasını söyler. Kaldırmayın.

her sayfada, bir kez

Sohbet, bir ziyaretçinin soru sorabileceği her sayfada olmalı; bu genellikle hepsi demektir. Oraya nasıl koyacağınız, sitenin nasıl yapıldığına bağlıdır.

Elle yazılmış sayfalar. Etiketi her .html dosyasına yapıştırın. Hepsini bulmak için klasörde </body> arayın. Sonradan bir sayfa eklediğinizde, mevcut bir sayfayı başlangıç noktası olarak kopyalayın; etiket de onunla gelir.

Ortak bir footer. Sayfalarınız ortak bir footer dosyası içeriyorsa (sunucu tarafı include, PHP include, şablon partial’ı), etiketi oraya bir kez koyun.

Statik site üreticileri. Etiketi temel layout’a, her sayfanın miras aldığı şablona koyun:

üretici	dosya
Jekyll	`_layouts/default.html` ya da `_includes/footer.html`
Hugo	`layouts/_default/baseof.html` ya da bir footer partial’ı
Eleventy	`_includes/` içindeki temel layout’unuz
Astro	temel layout bileşeni
Pandoc, özel betikler	verdiğiniz HTML şablonu

Etiketin iki kez yer aldığı bir sayfa için endişelenmeyin: başlatıcı sayfada zaten olup olmadığını kontrol eder ve ikinci kopya hiçbir şey yapmaz. Yine de boşa giden bir istektir, bu yüzden bir tane bırakın.

kod içinde ayarlama

Panelde seçtiğiniz görünüm başlatıcının içinde gelir, yani yukarıdaki tek satır kurulumun tamamıdır. Ayarları HTML’inizde tutmayı tercih ederseniz, etiketin üstündeki bir script içinde window.Spookat tanımlayın:

<script>
  window.Spookat = {
    style: "clean",
    font: "system",
    accent: "#2F6FEB",
    side: "right",
    greeting: "hi. questions about an order? ask here.",
    lang: "en"
  };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

Sayfa ile panel çelişirse sayfa kazanır. Her anahtarın yaptığı:

anahtar	ne alır	ne yapar
`style`	8 stilden biri	görünüm. `brutal`, `clean`, `glass`, `soft`, `terminal`, `paper`, `retro`, `swiss`
`font`	`"system"` ya da barındırılan 17 fonttan biri	widget’ın fontu. `system` hiçbir şey indirmez; barındırılan fontlar tıklamadan sonra CDN’imizden yüklenir, asla Google’dan değil
`accent`	`"#RRGGBB"`	marka renginiz. Üzerindeki yazı rengi kontrasta göre seçilir
`side`	`"right"` ya da `"left"`	başlatıcının durduğu yer
`greeting`	metin, en fazla 200 karakter	ziyaretçinin gördüğü ilk mesaj. Boş bırakılırsa stilin kendi mesajı
`label`	metin, en fazla 40 karakter	yuvarlak düğmeyi bu metni taşıyan bir hapa dönüştürür
`lang`	`"en"` ya da `"pl"` gibi bir dil kodu	widget’ın dili. Varsayılan: ziyaretçinin tarayıcı dili, sonra İngilizce
`user`	`{ id, sig }`, cool guy ve üstünde	kimin giriş yaptığı, sunucunuzda imzalanmış

İmzalama dahil tam başvuru dokümanlarda.

çok dilli bir site

Sitenizde her dil için bir klasör varsa (/en/, /pl/), widget’ın tarayıcıya değil sayfaya uyması için lang değerini klasör bazında ayarlayın. Widget 12 dil konuşur. Ekibiniz her sohbette ziyaretçinin dilini görür.

bir şey söyleyen başlatıcı

Basit bir sitede ziyaretçilerin sorduğu genellikle net bir soru vardır: “…’ya gönderim yapıyor musunuz”, “rezervasyon yapabilir miyim…”. "questions? ask a human" gibi bir label, simgeyi bunu söyleyen küçük bir hapa dönüştürür. Kısa tutun; telefonlarda da köşede durur.

ziyaretçi ne görür

Köşede, sizin renklerinizde bir düğme. Tıklayınca, karşılama mesajınız ve yanıtı bir insanın vereceğini söyleyen bir satırla panel açılır. Ziyaretçi yazar; mesaj Slack ya da Discord thread’inize ya da gelen kutumuza ve telefon uygulamamıza düşer; yanıtınız widget’a geri gelir. Siz yanıtlamadan ayrılır ve bir e-posta bırakırsa, cool guy ve üstü planlar yanıtı ona e-postayla gönderir. Sohbet, geçmiş süresi dolana kadar (broke af planında 30 gün) sayfa değişimlerinde ve sonraki ziyaretlerde cihazında kalır.

doğrulayın

Eski önbellek ya da depolama karışmasın diye sitenizi gizli bir pencerede açın. Sonra DevTools’u açın (F12 ya da sağ tık ve İncele).

Network. “Disable cache” kutusunu işaretleyin, yeniden yükleyin ve filtreye spookat yazın. Tek istek: cdn.spookat.com adresinden başlatıcı, yaklaşık 2 kb aktarılmış. Kodunuz window.Spookat içinde yayımladığınızdan farklı bir stil ayarlıyorsa iki istek, ikisi de cdn.spookat.com adresinden. api.spookat.com adresine hiçbir şey gitmez.
Application (Firefox’ta Depolama). Çerezler: Spookat’tan hiçbir şey yok. Local storage: henüz hiçbir şey yok. İlk mesajı gönderdikten sonra bir anahtar belirir; sohbetinizi o cihazda tutar.
Başlatıcıya tıklayın. Şimdi panel betiği ve stilinizin stil sayfası CDN’den yüklenir, ardından sohbet bağlanır. Bir test mesajı gönderin ve Slack ya da Discord’a ulaştığını görün.

Başlatıcı görünmüyorsa:

Network sekmesinde hiçbir şey yok. Etiket bu sayfada değil, bir HTML yorumunun içinde ya da build adımınız onu kaldırmış. Sayfa kaynağını açın ve spookat arayın.
İstek başarısız oluyor. Uzunluğu yanlış bir anahtar CDN’den 404 alır. URL’deki anahtarı paneldekiyle karşılaştırın.
Başlatıcı varsayılan görünümle çıkıyor ve hiç bağlanmıyor. Anahtardaki tek bir yanlış karakter yine de bir başlatıcı yükler. Anahtarı paneldekiyle karşılaştırın.
Başlatıcı görünüyor ama sohbet bağlanmıyor. Kayıtlı olandan farklı bir alan adındasınız: yerel bir dosya, localhost ya da bir test sunucusu. Sohbet yalnızca alan adınızda ve alt alan adlarında bağlanır.
Bir Content Security Policy engelliyor. Konsol ilgili direktifi söyler. Betikler, stiller ve fontlar için https://cdn.spookat.com, bağlantı için wss://api.spookat.com adresine, görseller için de data: kaynağına izin verin; logolar ve ekip üyelerinin fotoğrafları data: görselleridir. Başlatıcı ayrıca kendi shadow root’una küçük bir <style> bloğu ekler, bu yüzden style-src onun için satır içi stillere izin vermelidir. window.Spookat değerini satır içi bir script’te ayarlıyorsanız, o script’e politikanızın nonce ya da hash değerini verin.

neleri eklememelisiniz

Saf HTML siteler, önlerinde hiçbir şey olmadığı için hızlıdır. Öyle kalsın:

Yalnızca sohbet için etiket yöneticisi yok. Betik yükleyen bir betiktir ve başlatıcıdan daha ağırdır.
Panel için preload ya da prefetch yok. Panelin indirmesini her ziyaretçi için tıklamanın önüne taşır.
defer ile async arasında hokkabazlık yok. Bu etiket için tek başına async doğrudur.
Sohbeti birkaç saniye sonra açan bir sarmalayıcı yok. Paneli herkes için tamamen yükler ve telefonlarda sayfanızı kapatır. Biri sohbeti gerçekten açtığında bir karşılama mesajı aynı işi görür.

barındırma fark etmez

GitHub Pages, Netlify, Cloudflare Pages, paylaşımlı hostingte bir FTP klasörü, dolapta duran bir sunucu: etiket saf HTML’dir, yani dosyalarınız nereden sunuluyorsa orada çalışır. Build adımı yok, paket yok, sunucu kodu yok.

yanıtları bağlayın

Son adım: panelde Slack ya da Discord’u bağlayın ve bir kanal seçin ya da bu adımı atlayıp gelen kutumuzda ve telefon uygulamamızda yanıtlayın. Her ziyaretçi kendi thread’ini alır, kanaldaki herkes yanıt verebilir ve koltuk yoktur. broke af ile site başına aylık $4.99 tutar.

kontrol listesi

</body> öncesinde, async ile tek bir etiket, her sayfada (ya da ortak layout’ta bir kez).
Ayarları kodda tutuyorsanız, üstünde isteğe bağlı window.Spookat.
Gizli bir pencerede kontrol edildi: tıklamadan önce tek istek (kodunuz yayımlamadığınız bir stil ayarlıyorsa iki, ikisi de cdn.spookat.com adresinden), hiç çerez yok.
Widget’tan gönderilen bir test mesajı Slack ya da Discord’a ulaştı.

Deneme süresi 14 gün ve kart gerektirmiyor. Satırı yapıştırın, statik siteniz soruları yanıtlayabilsin.