lovable, bolt ya da v0 ile yapılmış bir siteye canlı sohbet ekleyin

28 Ekim 2026 · yazan: kuba · 5 dk okuma

Siteyi anlatarak yaptınız, sohbeti de aynı şekilde ekleyin. Bu rehber size Lovable, Bolt ya da v0 için bir prompt veriyor, snippet’in ürettikleri kodda nereye gitmesi gerektiğini ve yayımlanmış sitede tıklamadan önce hiçbir şeyin yüklenmediğini nasıl kontrol edeceğinizi gösteriyor.

bu araçlar ne üretir

Sohbet kutusundan bakınca üç araç birbirine benzer, ama farklı türde projeler yazarlar ve tek bir script etiketinin nereye gideceğini bu belirler:

Lovable bir Vite ve React uygulaması üretir. Projenin kökünde bir index.html vardır; her rota bu sayfanın içine render edilir.
Bolt ne istediyseniz onu üretir. Projelerin çoğu index.html içeren Vite uygulamalarıdır; bazıları Next.js, Astro ya da saf HTML’dir (sonuncusunu saf HTML rehberi anlatıyor).
v0, app router ile Next.js üretir. Ortak sayfa app/layout.tsx dosyasıdır.

Sohbetin her sayfada tek bir etikete ihtiyacı vardır. Tek sayfalık bir uygulamada bu index.html demektir. Next.js’te kök layout. Başka hiçbir yer değil.

başlamadan önce: alan adı

Spookat bir siteyi alan adına bağlar. Sohbet yalnızca o alan adından ve alt alan adlarından bağlanır; kimsenin snippet’inizi kendi sitesine kopyalayamamasının nedenlerinden biri de budur.

Bu araçlarda bu önemlidir, çünkü projeniz birkaç adreste yaşar:

aracın içindeki önizleme, aracın kendi alan adında
aracın size verdiği yayımlanmış adres, genellikle aracın bir alt alan adı
bağladıysanız, kendi özel alan adınız

Siteyi ziyaretçilerin kullanacağı adresle kaydedin. Bu bir özel alan adıysa onu kullanın; www ve diğer alt alan adları dahildir. Aracın alt alan adında yayımlıyorsanız, aracın ana alan adını değil, o alt alan adının tamamını kaydedin. Aracın önizlemesinde başlatıcı görünür ama sohbet bağlanmaz. Yayımlanmış sitede test edin.

prompt

Önce site anahtarınıza ihtiyacınız var. Spookat panelinde siteyi doğru alan adıyla ekleyin; kurulum sayfası snippet’i gösterir. Ardından YOUR_SITE_KEY yerine kendi anahtarınızı koyarak şunu aracın sohbetine yapıştırın:

Add this live chat script to every page of the site. It must be exactly one tag, loaded once, right before the closing </body> tag of the shared HTML (index.html in a Vite app, the root layout in Next.js). Keep the async attribute. Do not wrap it in a React component, do not add it to individual pages, do not preload anything.

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

Prompt bilerek bu kadar net. Bu araçlar yardımcı olmayı sever ve “bir sohbet widget’ı ekle” yeni bir React bileşenine, kendilerine ait yüzen bir düğmeye ya da beş sayfaya yapıştırılmış etikete dönüşebilir. Spookat’ın ihtiyacı olan tek şey, tek yerde tek bir etikettir: başlatıcı kendi düğmesini kendisi çizer.

aynı prompt içinde görünüm

Widget’ın görünümü Spookat panelinde ayarlanır ve başlatıcının içinde gelir, yani aracın bundan haberi olması gerekmez. Kodda tutmayı tercih ederseniz prompt’a ikinci bir satır ekleyin:

Above that script, add: <script>window.Spookat = { style: "clean", accent: "#2F6FEB", side: "right" };</script>

8 stil var. accent hex olarak marka renginizdir; üzerindeki yazı rengi kontrasta göre seçilir. Tüm anahtarlar dokümanlarda listeleniyor.

nereye gitmeli

Kod görünümünü açın ve kontrol edin. Bir Vite uygulamasında (Lovable, çoğu Bolt projesi) index.html şöyle bitmelidir:

    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
  </body>
</html>

Next.js’te (v0, bazı Bolt projeleri) app/layout.tsx, etiketi <body> içinde, {children} sonrasında alır:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
      </body>
    </html>
  );
}

Araç bunun yerine next/script kullandıysa, strategy="afterInteractive" ya da "lazyOnload" ile o da olur. Görmek istemedikleriniz:

Home.tsx ya da app/page.tsx gibi bir sayfa bileşeninin içindeki etiket: sohbet yalnızca o sayfada olur
script öğesini oluşturan bir useEffect: çalışır ama aynı etiket için daha fazla kod demektir
aracın kendisinin çizdiği bir sohbet düğmesi ya da paneli: silin, Spookat kendininkini getirir

Bir şeyler ters gittiyse tek cümleyle söyleyin: “Remove the chat code you added and put only the script tag in index.html.” Talimat somut olduğunda bu araçlar böyle şeyleri iyi düzeltir.

yayımlayın, sonra kontrol edin

Siteyi yayımlayın ve yayımlanmış adresi gizli bir pencerede açın. DevTools’u açın:

Network, “Disable cache” kutusunu işaretleyin, yeniden yükleyin ve filtreye spookat yazın. Tek bir istek görmelisiniz: cdn.spookat.com adresinden başlatıcı, yaklaşık 2 kb. 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 yok.
Application, çerezler ve local storage: Spookat’tan hiçbir şey yok.
Başlatıcıya tıklayın. Panel CDN’den yüklenir. Bir test mesajı yazın. Slack ya da Discord bağlıysa orada görünür; yanıtlayın ve widget’a geldiğini izleyin.

Başlatıcı hiç görünmüyorsa, etiket yayımlanan build’e girmemiştir. Kod görünümünü tekrar kontrol edin. Başlatıcı görünüyor ama sohbet bağlanamıyorsa, paneldeki alan adı bulunduğunuz adresle eşleşmiyordur.

Ana rehber bu kontrollerin her birini daha ayrıntılı açıklıyor.

yanıtları bağlayın

Sohbet size zaten bulunduğunuz yerde ulaşmalı. Panelde Slack ya da Discord’u bağlayın, bir kanal seçin; her ziyaretçi kendi thread’ini alır. Ayrıntılar Slack rehberinde ve Discord rehberinde.

neden araca bir sohbet yaptırmayalım

İsteyebilirsiniz. Araç birkaç dakikada size metin kutusu olan hoş bir panel yapar. Sonra sorular başlar: mesajlar nereye gidiyor, kime bildirim gidiyor, yanıt sekmeyi kapatmış bir ziyaretçiye nasıl ulaşıyor, spam’e ne oluyor, bunu kim ayakta tutuyor. Bu bir sunucu, bir veritabanı, bir Slack entegrasyonu ve bir e-posta hattı demek ve hiçbiri yapmakta olduğunuz ürün değil.

Spookat tek bir etikettir, starter ile site başına aylık $4.99 tutar ve deneme süresi kartsız 14 gündür.

claude code ya da cursor kullanıyorsanız

Projeyi bir depoya aktarın ve bir kodlama agent’ının bunu Spookat MCP sunucusuyla yapmasına izin verin. Widget’ı sitenizin renklerine uydurabilir ve siz anahtar kopyalamadan her şeyi ayarlayabilir. Claude Code rehberi bunu adım adım anlatıyor.

görünümü üretilmiş bir siteye uydurun

Bu araçlar genellikle tanınabilir bir stil üretir: temiz bir sans-serif, yumuşak gölgeler, yuvarlatılmış kartlar, tek bir vurgu rengi. Widget oraya aitmiş gibi görünmeli, başka bir siteden gelmiş çıkartma gibi değil.

Stil. Tipik üretilmiş görünüm için clean ya da soft ile başlayın. Siteniz daha koyu ve teknikse terminal deneyin. Ona cesur ve düz bir görünüm verdiyseniz brutal ya da swiss. Panelde değiştirip yayımlamadan önce her birini canlı önizlemede görebilirsiniz.
Vurgu. Düğmelerinizle aynı hex değerini kullanın. Araç bunu genellikle Tailwind yapılandırmasında ya da bir CSS değişkeninde tutar; ona “what is the primary color’s hex?” diye sorun.
Font. system hiçbir şey indirmez ve çoğu üretilmiş siteye yeterince benzer. Siteniz belirli bir font kullanıyorsa ve biz onu barındırıyorsak onu seçin; yalnızca tıklamadan sonra yüklenir.
Taraf. Araç sağ alta kendine ait yüzen bir düğme koyduysa (yukarı dön oku, çerez ayarları simgesi), başlatıcıyı sola alın.

ziyaretçileriniz ne görür

Köşede, sizin renklerinizde küçük bir düğme. Tıklayana kadar başka hiçbir şey olmaz. Sonra panel karşılama mesajınız ve yanıtı bir insanın vereceğini söyleyen bir satırla açılır. Yazarlar ve mesaj Slack ya da Discord thread’inize ya da gelen kutumuza ve telefon uygulamamıza düşer. Siz yanıtlamadan ayrılırlarsa bir e-posta bırakabilirler; pro ile yanıt onları orada bulur. Siz bir dil belirlemedikçe widget, 12 dilden biri olan tarayıcılarının dilini konuşur.

araç yeniden ürettikten sonra

Bu araçlar dosyaları yeniden yazar. Layout’ta büyük bir değişiklik (“bunu bir panele çevir”, “karanlık moda geç”) etiketi index.html ya da kök layout’tan sessizce silebilir. Büyük bir yeniden üretimden sonra yayımlanmış siteyi açın ve başlatıcının hâlâ orada olduğunu kontrol edin. Kaybolduysa aynı prompt onu geri koyar.

birden fazla proje

Bu araçlarla ikinci ve üçüncü siteye başlamak ucuzdur. Spookat’ta her biri kendi anahtarı, alan adı, görünümü ve kanalı olan ayrı bir sitedir, bu yüzden bir sohbet asla yanlış projenin thread’ine düşmez. Bir hesaptaki ilk site tam fiyat öder; aynı hesapta Spookat üzerinden ödediğiniz diğer her site, her planda %30 indirimlidir. Hepsini aynı kişiler yanıtlıyorsa birkaç site tek bir Slack ya da Discord kanalını paylaşabilir, ancak kart yalnızca sayfa yolunu gösterir, sohbetin hangi siteden geldiğini göstermez. Siteleri ayırt etmeniz gerekiyorsa her birine kendi kanalını verin.

kontrol listesi

Site, ziyaretçilerin kullandığı adresle kayıtlı.
index.html ya da kök layout içinde async ile tek bir etiket.
Aracın kendisinin yaptığı bir sohbet düğmesi ya da bileşeni yok.
Önizlemede değil, yayımlanmış sitede test 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.
Slack ya da Discord bağlı.

Anlatın, yayımlayın, kontrol edin. Sonra ilk soruyu bir thread’den yanıtlayın.