Web Sitenize 5 Dakikada Yapay Zeka Chatbot Nasıl Eklenir?

Web sitenizdeki sıradan bir Salı öğleden sonrasını düşünün. Bir ziyaretçi fiyatlandırma sayfanıza gelir, otuz saniye kaydırır, üye olmaya iten tek bir sorusu vardır ve onu sormanın anlık bir yolunu bulamaz. İletişim formu, soruyu yazabilmesi için adını, e-postasını, şirket büyüklüğünü ve "bizi nereden duydunuz?" cevabını ister. "Satışla Konuşun" düğmesi ise gelecek haftaya kadar uygun saati olmayan bir takvim açar.

Ziyaretçi siteyi terk eder.

Bu, bir chatbotun doldurması gereken boşluktur ve yıllarca bunu başaramadı. Web sitesi chatbotlarının ilk nesli, karar ağacının dışındaki hiçbir şeyi yönetemeyen kural tabanlı script'lerdi. İkinci nesil ise "size 24 saat içinde dönüş yapacağız" sözünü veren canlı sohbet widget'larıydı; bu da sohbet olmamasıyla aynı kapıya çıkıyor.

Şu anki nesil farklı. Büyük dil modellerinden güç alan ve gerçek dokümantasyonunuz üzerinde temellendirilen yapay zeka chatbotları gerçek bir konuşma yürütebilir, işiniz hakkında belirli soruları cevaplayabilir ve yalnızca gerçekten çözemedikleri bir şeye rastladıklarında bir insana yönlendirebilir. En güzel yanı, web sitenize chatbot eklemenin artık bir mühendislik ekibi veya altı haftalık bir uygulama projesi gerektirmemesi. Çoğu platform sizi bir saatten kısa sürede yayına alır.

Bu rehber bunu nasıl yapacağınızı tam olarak anlatır — WordPress, Shopify, Wix, Squarespace, Webflow, Framer ve düz HTML için platform özelinde gömme adımları dahil olmak üzere — artı bir chatbotun insanların kullandığı şey ile ana sayfanızın bir köşesinde sessizce toz toplayan şey arasındaki farkı yaratan lansman sonrası kontrol listesi.

Son 18 ayda üç eğilim bir araya gelerek yapay zeka chatbotlarını "olsa iyi olur" olmaktan çıkarıp varsayılan beklentiye dönüştürdü.

Yanıt süresi beklentileri çöktü. Son müşteri deneyimi araştırmaları (Salesforce State of the Connected Customer, Zendesk CX Trends), tüketicilerin büyük çoğunluğunun bir işletmeye ulaştıklarında hızlı yanıt beklediğini ve B2B alıcılarının anlamlı bir kısmının yavaş yanıt sürelerini rakibi seçmelerinin birincil nedeni olarak gösterdiğini sürekli olarak bildiriyor. 24 saatlik bir e-posta yanıtı artık kabul edilebilir hissettirmiyor. İki dakikalık canlı sohbet beklemesi uzun hissettiriyor. Anlık olmak yeni temel çizgi.

LLM kalitesi kullanılabilirlik eşiğini aştı. 2023 civarında çoğu chatbot gülünç derecede kötüydü. 2026'ya gelindiğinde, ürün soruları, SSS tarzı sorgular ve temel sorun giderme için iyi dağıtılmış bir RAG chatbotu ile yeni başlayan bir destek temsilcisi arasındaki fark küçük. Teknoloji artık gerçekten çalışıyor.

Kurulum maliyeti sıfıra yaklaştı. Kendi kendine barındırma ML uzmanlığı, GPU altyapısı ve haftalarca iş gerektiriyordu. Bugün çoğu ekip yönetilen bir platform (Chatloom, Intercom Fin, Tidio Lyro, Crisp) kullanıyor ve tek bir öğleden sonrada yayına çıkıyor.

Birleşik etki, chatbot sahibi olmamanın giderek daha göze batar hale gelmesidir. Ziyaretçiler, bir soru sormanın kolay yolu olmadığında bunu fark eder. Ekibiniz e-posta ile ulaşılabilir olsa bile, sohbet widget'ının yokluğu — gerçekten doğru olsun ya da olmasın — "biz hızlı yanıt veren türden bir şirket değiliz" sinyalini yollar.

Pazar kalabalık olsa da anlamlı karşılaştırma eksenleri hızla daralır. Değerlendirilecekleri burada özetliyoruz.

Yapay zeka mimarisi. Botu jenerik eğitim verisi yerine belirli belgelerinizde temellendiren RAG'i (Retrieval-Augmented Generation) arayın. "Verileriniz üzerinde eğitildi", "bilgi tabanı yükleme" veya "belge alımı" gibi ifadeler kullanan platformlar doğru biçimdedir. Saf kural tabanlı botlar ve saf canlı sohbet araçları farklı kategorilerdir ve size aynı sonuçları vermez. Daha derin bir açıklama için RAG Chatbot Nedir yazımıza bakın.

Kodsuz kurulum. Teknik olmayan bir pazarlamacı botu dağıtabilmeli ve sürdürebilmelidir. Dokümanlar Postman ve YAML konfig gerektiriyorsa, platform işletmeleri değil geliştiricileri hedefliyor demektir.

Özelleştirme derinliği. Widget, alt-sağ köşenize jenerik bir mavi daire yapıştırmak yerine markanızla tam olarak eşleşmelidir (renkler, yazı tipleri, logo, ton, başlatıcı stili). Birden fazla başlatıcı modu (kompakt panel, yan panel, tam ekran) ve mobile özel düzenler için bonus puanlar.

Dürüst fiyatlandırma. Hacim tabanlı fiyatlandırma (Y dolar için ayda X mesaj) koltuk başına veya çözüm başına modellere göre daha öngörülebilir. Yedi büyük platformun yan yana karşılaştırması için 2026 fiyatlandırma analizimize bakın.

Gerçek yapay zekayla ücretsiz katman. Taahhütte bulunmadan önce test edin. Yapay zekayı yalnızca ücretli eklentiler arkasına gizleyen ücretsiz katmanlar gerçekten ücretsiz değildir.

Analitik ve bilgi boşluğu raporları. Bir chatbot geri bildirim döngüleri yoluyla iyileşir. Platform; cevaplayamadığı soruları, düşük güvenli olanları ve başparmak aşağı puan alanları yüzeye çıkarmalıdır.

Chatloom tüm bu kriterleri karşılar ve ücretsiz katmanda tam RAG boru hattıyla 0$'dan başlar. Bu rehberin geri kalanı çalışılan örnek olarak Chatloom'u kullanır, ancak adımlar herhangi bir modern platforma genellenebilir.

Bir chatbot yalnızca erişebileceği içerik kadar iyidir. Bu adımı en önemli adım olarak ele alın.

Neyi yüklemeli? Destek ekibinizin halihazırda en sık gönderdiği belgelerle başlayın. Pareto kuralı burada sert bir şekilde geçerlidir: içeriğinizin %20'si soruların %80'ini cevaplar.

• SSS sayfaları — önceden cevapladığınız sorular
• Ürün dokümantasyonu — özellikler, fiyatlandırma katmanları, teknik özellikler, entegrasyonlar
• Yardım merkezi makaleleri — nasıl yapılır rehberleri, sorun giderme adımları
• Politika sayfaları — kargo, iade, gizlilik, koşullar
• Hakkında ve iletişim bilgileri — botun her konuşmada ihtiyaç duyacağı temel bilgiler
• Son blog yazıları — ürün güncellemeleri ve mevsimsel içerik için

Nasıl yüklenir? Çoğu platform birkaç yöntemi destekler:

1. Site haritanızı tarayın. Domain'inizi yapıştırın ve platformun sayfaları otomatik olarak keşfetmesine ve almasına izin verin. Bu, zaten herkese açık web'de yaşayan içerik için en hızlı yoldur.
2. PDF'ler ve dokümanlar yükleyin. Dahili kılavuzlar, broşürler veya herkese açık sitenizde olmayan her şey için.
3. Ham metin yapıştırın. Tek seferlik parçacıklar, SSS girişleri veya belirli ifadelere yapılan hızlı düzeltmeler için.
4. API entegrasyonu. Ürün katalogları veya sipariş verileri gibi dinamik içerikler için.

İlk geçişte neyi atlamalı? Olgusaldan çok özlü olan pazarlama metni ("dünyanın en iyi CRM'i"), yasal kalıp metinler ve güncel olmayan dokümantasyon. Bot, yüklediğiniz her şeyi alır ve alıntılar, bu yüzden seçici olun.

İşleme tipik olarak birkaç dakika sürer. Platform belgeleri parçalara böler, her parçayı bir vektöre gömer ve bir arama indeksinde saklar. Alım tamamlandıktan sonra, nasıl cevap verdiğini görmek için 10-15 test sorgusu çalıştırın. Yanıtlar isabetli değilse, bu daha fazla veya daha iyi içerik gerektiğinin sinyalidir.

Bilgi tabanı hazırlığı hakkında daha derin bir rehber için yapay zeka chatbotunu verilerinizle eğitme yazısına bakın.

Sonradan eklenmiş üçüncü taraf bir araç gibi görünen bir chatbot görmezden gelinir. Sitenizin doğal bir parçası gibi hissettiren ise kullanılır. Fark detaylardadır.

Görsel kimlik.

• Marka renkleri. Birincil ve vurgu renklerinizi ayarlayın. Başlatıcı düğmesi, başlık çubuğu ve mesaj balonları sitenizin geri kalanıyla eşleşmelidir.
• Logo ve avatar. Sohbet başlığı için logonuzu yükleyin. İsteğe bağlı olarak bot kişiliği için bir avatar belirleyin.
• Tipografi. Platform destekliyorsa sitenizin yazı tipi ailesiyle eşleştirin.
• Köşe yuvarlaklığı ve gölgeler. Detaylar önemli: yuvarlak köşeli bir sitede köşeli bir sohbet widget'ı yamalı görünür.

Kişilik ve ton.

• Karşılama mesajı. Beklentileri belirleyen samimi bir açılış: "Merhaba! Ben destek asistanıyım. Fiyatlandırma, özellikler veya hesabınızla ilgili her şeyi sorabilirsiniz."
• Bot adı. Bazı ekipler bota bir isim verir (Frida, Zelda, Atlas). Diğerleri tarafsız kalır ("Destek Botu"). İkisi de işe yarar; önemli olan marka sesi ile tutarlı olmaktır.
• Ton yapılandırması. Çoğu platform formalite (gündelikten profesyonele) ve ayrıntı (özden detaylıya) için bir kaydırıcı veya seçici sunar.
• Geri dönüş mesajı. Bot bilmediğinde ne der: "O bilgiyi bulamıyorum. Sizi ekibimize bağlamamı ister misiniz?"

Başlatıcı modu. Bu, giriş noktasının görsel stilidir. Chatloom dört modu destekler:

• Buton (varsayılan) — küçük yüzen aksiyon düğmesi, bir sohbet paneli açar.
• Kompakt panel — köşede her zaman görünen mini panel; SaaS panoları için popüler.
• Tam ekran — ortalanmış bir kaplama açar; yardım merkezi sayfaları için iyi çalışır.
• Yan panel — sağ kenardan içeri kayar, tam yükseklikte; dokümantasyon siteleri için yaygın.

Konum ve ofset. Alt-sağ standarttır. Orada bir çerez bannerınız varsa alt-sol'dan kaçının. Sitenizde yapışkan bir alt bilgi veya sohbet çakışan elementler varsa özel ofsetler ayarlayın.

Mobil davranış. Widget'ı sadece tarayıcı geliştirici araç emülatöründe değil, gerçek bir telefonda test edin. Sohbet penceresi mobilde tam ekran genişlemeli ve klavye ekleme alanına saygı göstermelidir.

Bu adıma 20-30 dakika ayırın. Görsel cila, tıklama oranlarında gerçek bir fark yaratır.

Asıl kurulum tek satır koddur. Embed script'ini platform panonuzdan kopyalayın ve web sitenizin kapanış </body> etiketinden önce yapıştırın. Tam prosedür yığınınıza bağlıdır.

WordPress. Üç seçenek:

1. Insert Headers and Footers, WPCode veya Header and Footer Code Manager gibi bir başlık/alt bilgi eklentisi kullanın. Snippet'i "Footer" alanına yapıştırın. Tema güncellemelerine dayanır.
2. Temanızı doğrudan düzenleyin: Görünüm > Tema Dosya Düzenleyicisi > footer.php, </body> öncesine yapıştırın. Daha temiz ama tema güncellemelerinde kaybolur.
3. Değişiklikleri güncelleme güvenli yapmak için bir alt tema kullanın.

Shopify. Çevrimiçi Mağaza > Temalar > Özelleştir > Kodu Düzenle bölümüne gidin, theme.liquid dosyasını açın, script'i </body> hemen önüne yapıştırın. Kaydedin. Widget tüm mağaza sayfalarında anında görünür.

Wix. Ayarlar > Gelişmiş > Özel Kod > Özel Kod Ekle. Konumu "Body — end" ve "Tüm sayfalar" olarak ayarlayın.

Squarespace. Ayarlar > Gelişmiş > Kod Enjeksiyonu > Footer. Yapıştırın, kaydedin. Not: Kod Enjeksiyonu bir Business planı veya üstünü gerektirir.

Webflow. Proje Ayarları > Özel Kod > Footer Kodu. Yapıştırın, kaydedin, yayınlayın.

Framer. Site Ayarları > Genel > Özel Kod > <body> etiketi sonu.

Düz HTML. index.html dosyanızı (veya sayfalarınızı render eden şablonu) açın, snippet'i kapanış </body> etiketinden hemen önce doğrudan yapıştırın, dağıtın.

Next.js / React / Vue / SPA. Script etiketini kök layout'unuza ekleyin (Next.js Pages Router için _document.tsx veya App Router için app/layout.tsx). JSX'ten script etiketlerini kaldıran çerçeveler için, mount sonrası script'i enjekte etmek üzere bir useEffect hook'u veya çerçeveye özel yardımcı kullanın.

Referans için, çoğu platformun ürettiği snippet türü:

<script
  async
  src="https://cdn.chatloom.app/widget.js"
  data-agent-id="agt_XXXXXXXX"
></script>

async özelliği önemlidir. Script'in sayfanın geri kalanıyla paralel olarak yüklenmesini sağlar, render'ı engellemez. Modern widget'lar tipik olarak 30-60 KB minified ve gzip'li olduğu için Core Web Vitals üzerindeki etki minimal olmalıdır. Kurulumdan sonra Lighthouse veya PageSpeed Insights ile doğrulayın.

Sık karşılaşılan tuzaklar:

• Snippet'i </body> öncesi yerine <head> içine yapıştırmak. Çoğu widget her iki şekilde de çalışır, ancak render engelini önlemek için </body> tercih edilir.
• Önbellek katmanları (Cloudflare, sayfa oluşturucuları, WordPress önbellek eklentileri) yeni etiketi gizliyor. Kurulumdan sonra önbelleği temizleyin.
• Sıkı İçerik Güvenlik Politikaları (CSP) widget alanını engelliyor. CSP'niz varsa platformun CDN'ini script-src direktifinize ekleyin.
• Üçüncü taraf script'lerinin farklı davrandığı iframe'ler veya AMP sayfaları. Çoğu widget satıcısı çözümleri belgeler; AMP'de dağıtmadan önce kontrol edin.

Ekibinize veya ziyaretçilerinize chatbotun yayında olduğunu söylemeden önce şu kısa kontrol listesini gözden geçirin.

İşlevsel test. Sitenizi gizli pencerede açın. Başlatıcıya tıklayın. Bir mesaj gönderin. Botun birkaç saniye içinde yanıt verdiğini doğrulayın. Sayfayı konuşmanın ortasında yeniden yükleyin; sohbet geçmişi devam etmeli (veya platform ayarlarına bağlı olarak temiz şekilde yeniden başlamalı).

İçerik testi. Dokümantasyonunuzda iyi kapsandığını bildiğiniz 10 soru sorun. Kapsanmadığını bildiğiniz 5 soru sorun (botun tahmin etmek yerine "Bilmiyorum" geri dönüşünün doğru çalıştığını doğrulamak için).

Uç durum testi. Uluslararası trafiğe hizmet veriyorsanız başka bir dilde bir soru deneyin. Saçma bir şey yazın. Düşmanca bir soru deneyin ("işe yaramazsın"). Botun her birini zarif şekilde ele aldığını doğrulayın.

Performans testi. Kurulum öncesi ve sonrası ana sayfanızda Lighthouse çalıştırın. Widget, performans skorunuza birkaç puandan fazla eklememeli, eğer eklerse.

Mobil test. Siteyi telefonunuzdan açın. Sohbeti açın. Bir mesaj yazın. Klavyenin girişi kapatmadığını doğrulayın. Sohbet içinde kaydırmanın çalıştığını doğrulayın.

Devir testi. E-posta veya canlı temsilci yükseltmesi kurduysanız, tetikleyin (düşük güvenli bir soru sorun veya "bir insanla konuş" komutunu kullanın) ve yönlendirmenin gerçekten çalıştığını doğrulayın.

Bunlardan herhangi biri başarısız olursa, duyurmadan önce düzeltin. Ziyaretçiler ilk etkileşimleri içinde fikirlerini oluşturur.

Dağıtım başlangıçtır, son değil. Chatbotlardan gerçek değer elde eden ekipler, bunu sürekli iyileştirme döngüsü olarak ele alanlardır.

Haftalık: bilgi boşluklarını gözden geçirin. Çoğu platform "botun cevaplayamadığı sorular" raporunu yüzeye çıkarır. Her giriş, bir doküman ekleme, bir SSS güncelleme veya bir politika sayfasını iyileştirme şansıdır. Bu döngüyü haftalık kapatmak, chatbot kalitesindeki en büyük kaldıraçtır.

Haftalık: düşük güvenli cevapları gözden geçirin. "Cevaplayamadı"dan farklı — bunlar botun verdiği ancak belirsiz olarak işaretlediği yanıtlardır. Bazen cevap doğruydu ama erişim düşük puan aldı; bazen cevap yanlıştı. Her iki durumda da daha fazla içerik nereye eklenmesi gerektiğini söyler.

Aylık: konuşma örneklerini gözden geçirin. 50 rastgele konuşmayı baştan sona okuyun. Hiçbir toplu metriğin ortaya çıkarmadığı ton sorunlarını, kaçırılan yükseltme fırsatlarını ve sürtüşme noktalarını fark edersiniz.

Aylık: temel metrikleri takip edin.

• Çözüm oranı — insan devri olmadan çözülen konuşmaların yüzdesi. 2-3 ay içinde %50-70 hedefleyin.
• Güven dağılımı — cevapların yüzde kaçının yüksek güvenli vs. düşük olduğu. Bilgi tabanınız iyileştikçe yukarı eğilim göstermelidir.
• Müşteri memnuniyeti — yanıtlardaki başparmak yukarı vs. aşağı oranları.
• Lead yakalama — bot e-posta toplar veya potansiyel müşteri nitelendirirse, haftada kaç tane.

Üç aylık: içeriği yenileyin. Güncel olmayan dokümantasyon, güncel olmayan cevaplar üretir. En çok alınan 50 belgenin üç aylık incelemesini takvimlendirin.

Çoğu ekip 4-8 hafta tutarlı yineleme içinde sabit durum performansına ulaşır. Ondan sonra bakım, ilk sprint'ten çok haftada bir saate yakındır.

Her sitenin chatbota ihtiyacı yok ve aksini iddia etmek kötü tavsiyedir.

Çok düşük trafik. Siteniz haftada 50 ziyaretçi alıyorsa, kurulum süresini haklı çıkaramayacak kadar düşük hacim. Bir iletişim formu ve e-posta kullanın.

Soru içermeyen yoğun görsel ürünler. Bir fotoğrafçının portfolyo sitesi, tek sayfalık sanatçı biyografisi. Botun erişeceği bir şey yok.

Sıkı script gereksinimleri olan ağır düzenlenmiş sektörler. Bazı sağlık, hukuk ve finans kullanım senaryoları her müşteri etkileşiminin insan tarafından gözden geçirilmesini gerektirir. Güçlü güven kapısıyla RAG bazen yine uygulanabilir, ancak dağıtım daha ağırdır.

Yanlış hizalanmış marka sesi. 20.000 dolarlık saatler satan bir lüks marka, beyaz eldivenli insan desteğinin değer önerisinin parçası olduğuna ve bir chatbotun bunu sulandırdığına karar verebilir. Geçerli bir seçim.

Geri kalan herkes için soru "chatbot eklemeli miyim" değil, "ihtiyaçlarıma hangi chatbot uyar ve ne kadar sürede yayınlayabilirim".