Sohbet botları giderek varsayılan bir müşteri hizmetleri kanalı haline geliyor; ancak HTML siteler Shopify veya WordPress gibi platformlarda bulunan tek tıklama entegrasyonlarına sahip değil. İyi haber şu ki, baştan bir chatbot inşa etmenize gerek yok: HTML tabanlı bir sohbet botu görsel olarak yapılandırılabilir ve tek bir kod parçacığıyla herhangi bir sayfaya gömülebilir.
Bu işlem, kendi iş içeriğiniz üzerinde eğitim alan ve herhangi bir HTML dosyasına iki satır yapıştırma olarak gömülen kullanıcı dostu bir widget olan Elfsight AI Chatbot ile gerçekleştirilebilir. Ziyaretçi sorularını yanıtlar, potansiyel müşterileri toplar ve çok dilli iletişimi kutudan çıktığı haliyle destekler. Aşağıda, kendi başınıza kurulum yöntemleriyle bu yaklaşımı adım adım inceliyoruz; böylece kurulumunuza en uygun olanı seçebilirsiniz.
- HTML’e Yapay Zeka Sohbet Robotu Gömmenin Hızlı ve Kolay Yolu
- Kullanım senaryonuza uygun bir sohbet botunu nasıl eğitir ve özelleştirirsiniz
- Manuel entegrasyon yöntemlerinin hangi kısıtlamaları vardır
- Gerçekten etkili bir chatbot deneyimi için 6 optimizasyon ipucu
HTML’e Hızlı ve Kolay Chatbot Ekleme
HTML’e bir sohbet botu eklemenin dört adımda nasıl yapılacağını şu şekilde özetliyoruz: tek bir yapıştırma ile kod yazmanıza gerek yok.
- Açın düzenleyiciyi ve bir Yapay Zeka Sohbet Robotu şablonu seçin
- Sohbet botunun bilgi tabanını yapılandırın ve özelleştirin
- Kurulum kodunuzu almak için “Web Sitesine Ekle” düğmesine tıklayın
- HTML dosyanızın <body> bölümüne yapıştırın ve kaydedin.
Aşağıdaki etkileşimli düzenleyicide Yapay Zeka Sohbet Robotu’nuzu yapılandırın ↓
HTML Sohbet Robotu için Kurulum Yöntemleri
Özel HTML bir web sitesine bir sohbet botu eklemenin birkaç yolu vardır. Doğru yol, ne kadar kontrole ihtiyacınız olduğuna, ne kadar zaman harcayacağınıza ve Yapay Zeka Destekli konuşmalar mı yoksa basit bir karar ağacı mı istediğinize bağlı olarak değişir.
| Yöntem | Zorluk | Yapay Zeka | Özelleştirme | Bakım | Maliyet |
|---|---|---|---|---|---|
| Elfsight Yapay Zeka Sohbet Robotu | Kod yok | Evet (GPT Destekli) | Yüksek (Görsel Düzenleyici) | Hiçbiri (bulut üzerinde barındırılır) | Ücretsiz Plan / Ücretli Katmanlar |
| Özel JavaScript Sohbet Botu | Gelişmiş | İsteğe Bağlı (API gerekir) | Tam | Yüksek (kendi kendine bakım) | API Maliyetleri |
| Üçüncü Taraf API Entegrasyonu | Orta Seviye | Evet | Orta | Orta | API kullanım ücretleri |
| Açık Kaynak Chatbot Çerçevesi | Gelişmiş | Değişken | Tam | Yüksek | Ücretsiz + Barındırma |
Ana Çıkarım: Bir sohbet botu widget’ı, altyapıyı inşa etmek veya sürdürmek istemediğiniz durumda en hızlı yoldur. Özelleştirilmiş bir JS sohbet botu veya doğrudan API entegrasyonu daha fazla kontrol sağlar, ancak geliştirme süresi ve sürekli bakım gerektirir — açık kaynak çerçeveleri için de durum aynıdır.
Hangi tür sohbet botuna ihtiyacınız var?
Bir şeyi yapılandırmadan önce, sohbet botunun gerçekten ne yapmasını istediğinizi düşünmek faydalı olur.
Destek Asistanı mı, yoksa Dönüşüm Aracı mı?
Çoğu kişi varsayılan olarak “müşteri destek botu” kullanır; ama Elfsight topluluğunun verileri, chatbot kurulumlarının çoğunun tamamen bir destek görevlisi olmadığını gösteriyor. Rezervasyon asistanları, ürün öneri rehberleri, SSS gezinicileri ve danışmanlık hunileri olarak kullanılıyor.
| Kullanım durumu | Bilgi Tabanı Odak Noktası | Etkinleştirilecek Ana Beceriler | Selamlama Stili |
|---|---|---|---|
| Müşteri Desteği | Yardım belgeleri, politikalar ve sorun giderme kılavuzları | İnsan ile iletişime geçin, Takip mesajı | Görev odaklı (“Nasıl yardımcı olabilirim?”) |
| Satış / Ürün Rehberi | Ürün sayfaları, fiyatlandırma, karşılaştırmalar | Eylem Düğmeleri (WhatsApp, E-posta, URL) | Faydaya odaklı (“Doğru planı bulun”) |
| Randevu / Danışmanlık | Hizmetler, kullanılabilirlik, süreç | Eylem Düğmeleri (Yönler, URL), Kişi Bilgilerini Topla | Eylem odaklı (“Bir oturum ayır”) |
| Eğitsel / SSS | Makaleler, kılavuzlar, metin blokları | Takip Mesajı | Merak Odaklı (“İlgili her şeyi sor…”) |
Bu fark, bilgi tabanına ne yazacağını, selamlamanın nasıl yazılacağını ve hangi becerileri etkinleştireceğini değiştirdiği için önemlidir.
Tek bir sohbet botu mu yoksa birden çok mu?
Web siteniz farklı hedef kitlelere veya kullanım senaryolarına hizmet ediyorsa, tek bir çok amaçlı bot yerine farklı sayfalar için ayrı chatbot widget’ları kullanmayı düşünün. Her widget’in kendi bilgi tabanı ve talimatları olabilir — bir fiyat sayfası sohbet botu plan karşılaştırmalarını yürütürken bir destek sayfası sohbet botu sorun giderme ile ilgilenebilir. Böylece yanıtlar odaklı kalır ve kafa karışıklığı azalır.
Okumak yerine izlemeyi mi tercih ediyorsunuz? Bu kısa eğitim kurulumun tüm adımlarını gösterir:
HTML Sohbet Botu Kurulumuna Ayrıntılı Rehber
İhtiyacınız olan sohbet botu türüne karar verdiğinize göre, adım adım bu rehber şablon seçiminden sayfaya yerleştirmeye kadar tüm yapılandırma aşamalarını kapsıyor.
Adım 1: HTML sohbet botu şablonunuzu seçin
Yapay Zeka Sohbet Robotu düzenleyicisini açın; farklı kullanım senaryoları için tasarlanmış bir başlangıç şablonu kitaplığı göreceksiniz. Her biri önceden yapılandırılmış selamlar, önerilen sorular ve benzersiz stillerle birlikte geliyor. İş tipinize en yakın şablonu seçin veya boş bir şablonla başlayın — sonraki adımlarda her şeyi özelleştireceksiniz.
Bir şablon seçtiğinizde, “Bu şablonla devam et” düğmesini tıklayın ve başlangıç eğitimini başlatmak için web sitesi URL’nizi yapıştırın.
Adım 2: Yapay Zeka Ajanı Profilini Yapılandırın
Sıradaki, Ajan sekmesi, sohbet botunun kendini nasıl sunduğunu ve nasıl iletişim kurduğunu tanımladığınız yerdir. Sohbet penceresi açıldığında ziyaretçilerin gördüğü ilk şey budur; doğru yapmak gerçekten değerli.
- Görünen Ad & Başlık — sohbet başlığında gösterilen ad (ör. şirket adı + “Yapay Zeka Ajanı”)
- Profil Resmi — logonuzu veya özel bir avatar yükleyin
- Rol — ajanın yaptığı işi tanımlayarak yapay zekanın rolünde kalmasını sağlayın
- Tone of Voice — choose from Friendly, Professional, Casual, Direct, or write custom instructions
- Cevap Uzunluğu — Kısa (hızlı, özlü yanıtlar), Orta (dengeli yanıtlar) veya Uzun
Hoş Geldiniz & Önerilen Sorular
Bu adım, insanların gerçekten chatbot’u kullanıp kullanmayacağına doğrudan etki eden adımlardan biridir. “Hello! How can I help you?” gibi bir karşılama uygun olsa da genel olur. “Hi! I can help you find the right plan, check feature availability, or walk you through setup — just ask” gibi bir karşılama, ziyaretçilere chatbot’un ne yapabileceğini net bir şekilde anlatır.
Öntanımlı sorular için ziyaretçilerinizin en sık sordukları 2–4 soruyu yazın; başlangıçta doğru yönlendirsin.
Ajan Talimatları
Profil ayarlarının altında ayrıca Görüşme Kuralları bulacaksınız — bunlar, belirli davranışları tanımlamanıza olanak tanır; örneğin “Rakip fiyatlarını tartışmayın” veya “Karmaşık sorular için her zaman bir danışmanlık randevusu önermek” gibi. Bunları adeta kılavuz sınırları olarak düşünün: Yapay Zeka, gerçek dünya ayrıntıları için eğitim verilerine dayanır, ancak edge-case’leri nasıl ele alacağını kurallar belirler.
Adım 3: Bilgi tabanınızı oluşturun ve düzenleyin
Şimdi en önemli adıma geçiyoruz: Bilgi sekmesi, sohbet botunuzun ne söyleyeceğini öğrendiği yerdir. Bir sohbet botunun kalitesi, üzerine eğitildiği içerikle doğru orantılıdır.
Bilgi sağlamanın beş yolu var:
- Web Pages — paste URLs from your website (up to 200 pages)
- Dosyalar — PDF, TXT, JSON, DOCX, PPTX, HTML veya MD formatlarında belgeler yükleyin
- Sık Sorulan Sorular — En yaygın ziyaretçi sorularına önceden tanımlanmış SSS çiftleri ekleyin
- Metin Blokları — işletme ayrıntıları, politikalar, ürün açıklamaları için serbest metin içerik blokları
- İş Bilgileri — şirket adınız, sektörünüz ve kısa bir özet
Birçok küçük işletme web sitesi için ana sayfanız, önemli hizmet/ürün sayfalarınız, SSS sayfası ve iletişim sayfanızla başlayın. Ziyaretçilerin sorularının %80’ini kapsar. İleride daha fazla içerik ekleyebilirsiniz — Bilgi tabanı ilk kurulumdan sonra kilitli değildir.
Adım 4: HTML sohbet botu becerilerini ayarlayın
Yetenekler sekmesi sohbet botunun sadece soruları yanıtlamanın ötesinde işlevler yapmasını sağlar. Ziyaretçilerinizin deneyimini geliştirmek için şu anda dört yetenek mevcut.
Her becerinin sunduğu olanaklara dair kısa bir özet:
| Sohbet Botu Yeteneği | Ne Yapar |
|---|---|
| Eylem Düğmeleri | Ziyaretçilerin sohbet üzerinden hızlı adımlar atmasını sağlayın: WhatsApp’ı açın, e-posta gönderin, yol tarifi alın veya bir URL’yi ziyaret edin. Tetikleyici koşulları doğal dilde siz belirlersiniz. |
| Kişileri Toplayın | İsim, e-posta ve telefon numarasını isteyen yerleşik bir form. Formun ne zaman görüneceğini ve hangi alanların dahil edileceğini siz belirlersiniz. Sohbeti sürdürmek için bu alanları zorunlu hale getirilebilir. |
| Takip Mesajı | Ziyaretçinin bir süre hareketsiz kalması sonucunda otomatik bir mesaj gönderilir. Ziyaretçileri yeniden etkilemek veya iletişim için bir seçenek paylaşmak için faydalıdır. |
| Bir İnsanla İletişime Geçin | Sohbet botu yanıt veremediğinde ya da ziyaretçi insan yardımı talep ederse, ziyaretçileri e-posta, telefon veya WhatsApp üzerinden gerçek bir kişiye yönlendirir |
Bir İnsana Ulaşın becerisi, yoğun trafik beklemese bile kurmaya değerdir. Sohbet botu bir soruyu yanıtlayamadığında veya kullanıcı insan yardımı talep ettiğinde otomatik olarak tetiklenir. Ayrıca, bu ziyaretçileri harici kanallara yönlendirir — aynı sohbet oturumuna bir insani getirmez.
Adım 5: Tema ve Görünümü Özelleştirin
Tema sekmesi sohbet botunun sitenizde nasıl görüneceğini belirler. Altı uyarlanabilir tema mevcut — her biri ayarlayabileceğiniz tek bir vurgu rengi etrafında tasarlandı.
Daha derinlemesine incelemek için “Tema Özelleştirme” düğmesine tıklayın:
- Başlatıcı Düğmesi için renk ve boyutunu seçin
- Başlık ve Altbilgi renklerini seçin
- Ayarla Chat arka planı ve köşe yarıçapı
- Bireysel öğelerin renklerini seçin (düğmeler, mesajlar, vb.)
- Kütüphaneden bir Yazı Tipi seçin.
Başlık arka planı için düz renk veya gradyan ayarlayabilir, sohbet arka planına desen ekleyebilir veya arka plan olarak bir görüntü yükleyebilirsiniz.
6. Adım: Görünüm ve Davranış Ayarlarını Yapılandırın
Ayarlar sekmesi konumlandırma, görünürlük, tetikleyiciler ve bildirimleri yönetir — özünde, sohbet botunun nerede görüneceği, ne zaman görüneceği ve kendini nasıl duyurduğu.
Yerleşim ve Düzen
Bu bölüm altında sohbet botunuzun sayfadaki görünümünü ayarlayabilirsiniz:
- Yüzen Sohbet (köşedeki baloncuk) veya Gömülü Sohbet (içeriğinizin içinde)
- Pozisyon: düşey ve yatay kaydırma kontrolüyle sol veya sağ
- Balon Simgesi kütüphaneden seçin veya kendi simgenizi yükleyin
- Görüntüleme: Sayfa yüklendiğinde manuel olarak veya gecikmeden sonra otomatik olarak açılır
Sohbet Görünürlüğü
Burada stratejinize bağlı olarak widget’ınızı nerede gösterip nerede gizleyeceğinize karar verirsiniz:
- Tüm sayfalar
- Sadece Ana Sayfa
- Belirlediğiniz sayfalar
- Mobil, Masaüstü veya Tüm Cihazlar
Ses Uyarıları
Etkileşimlerden sonra çalacak ses bildirimleri ayarlanabilir: kullanıcı sohbet penceresini açtığında, mesaj gönderdiğinde veya sohbet botu yanıt verdiğinde.
Diğer ayarlar
- Google Analytics entegrasyonu, ziyaretçilerin sohbet botunuzla nasıl etkileşime geçtiğini izlemenizi sağlar
- E-posta Bildirimleri tüm sohbet kayıtlarının otomatik olarak gelen kutunuza gönderilmesini sağlar
- Dil & Bölge sohbet botunun ana dili ve saat dilimini belirler
- Footer Text yapısı AI kullanımına ilişkin feragatnameler, politikalar veya iletişim linkleri için kullanılabilir.
- Özel CSS ve JS ileri düzey stil için kullanılabilir
Adım 7: HTML Web Sitenize Yapay Zeka Sohbet Robotunu Gömme
Son olarak, düzenleyicide “Web Sitesine Ekle” düğmesine tıklayarak kurulum kodunuzu oluşturun — iki satır: Elfsight platformunu yükleyen bir <script> etiketi ve widget’ın sayfada nerede görüntüleneceğini belirten bir <div> etiketi.
Sohbet botunun görünmesini istediğiniz sayfanın HTML dosyasını açın. Yüzen sohbet botu için kodu sayfanın <body> bölümünün herhangi bir yerine yapıştırın — kapatma </body> etiketinden hemen önce olması yaygın bir tercihtir. Alternatif olarak, gömülü bir sohbet botu için sayfanın görünmesini istediğiniz konuma yapıştırın.
Hızlı Sorun Giderme Kontrolü
- Sohbet Botu görünmüyor: Kodun <body> etiketleri içinde olduğundan emin olun; <head>, <style> veya <script> etiketlerinin içinde olmamalı.
- Düzenleyicide sohbet botu görülebilir ancak web sitesinde görünmeyebilir: Yüklenmesi için bazı widget’lar aktif bir internet bağlantısı gerektirir. Yerel olarak file:// protokolüyle test etmek çalışmayabilir — yerel bir sunucu kullanın veya canlı barındırılan sürümünü kullanın.
- Broken layout after adding the code: Kurulum kodunun içerik kısıtlayan başka bir HTML öğesine yapıştırılmadığından emin olun. <body> içinde bağımsız bir blok olmalıdır.
- Chatbot yanlış veya boş cevaplar veriyor: Bilgi sekmesini kontrol edin. Sadece bir veya iki URL eklediyseniz, sohbet botunun üzerinde çalışacak çok az veri olur. Daha fazla sayfa, dosya veya metin bloğu ekleyin, ardından “Retrain” düğmesine tıklayın.
Widget Seçenekleri: Özel HTML Sohbet Botu Nasıl Oluşturulur
Elfsight widget’i, her şeyi görsel bir editörle yönetir; ancak chatbot mantığını tamamen kontrol etmek veya kendi yapay zeka altyapınıza bağlamak istiyorsanız başka bir yol seçmenin geçerli nedenleri vardır. Her yaklaşımın neler içerdiğine bakıyoruz:
Seçenek 1: JavaScript ve API ile bir sohbet botu oluşturun
Geliştirme kaynaklarınız varsa, HTML, CSS ve JavaScript kullanarak sıfırdan bir sohbet botu arayüzü oluşturabilir, ardından konuşma mantığı için bir yapay zeka sağlayıcısının API’sine (OpenAI, Anthropic veya Google gibi) bağlayabilirsiniz. Genel bakış şu şekilde:
- HTML ve CSS kullanarak sohbet arayüzünü oluşturun (bir kapsayıcı div, mesaj listesi, giriş alanı ve Gönder düğmesi).
- Kullanıcı girdisini yakalamak için JS yazın, fetch() ile Yapay Zeka API uç noktasına gönderin ve yanıtı görüntüleyin.
- Her API isteğiyle tam mesaj dizisini göndererek konuşma geçmişini yönetin.
- Mevcut HTML dosyalarınızla birlikte web sunucunuza dağıtın.
Seçenek 2: Açık Kaynaklı Bir Çerçeve Kullanın
Botpress, Rasa veya Chatwoot gibi çerçeveler, kendi kendine barındırılabilir ve sitenize gömülebilir önceden oluşturulmuş sohbet motorları sunar. Özelleştirilmiş iş akışları, entegrasyonlar veya veri gizliliği kontrollerine ihtiyaç duyan ekipler için tasarlanmıştır.
- Çerçeveyi kendi sunucunuza veya bir bulut örneğine kurun ve yapılandırın.
- Çerçeve’nin görsel oluşturucusu veya yapılandırma dosyalarını kullanarak sohbet akışlarını oluşturun.
- Çerçeve tarafından sağlanan gömme kodunu ya da JavaScript parçacığını oluşturun.
- Gömme kodunu HTML dosyanıza yapıştırın ve dağıtın.
Seçenek 3: JS Kütüphanesiyle Kural Tabanlı Bir Sohbet Botu Ekleyin
Yapay Zeka Destekli Olmayan basit karar ağacı tabanlı sohbet botuna ihtiyaç duyan web siteleri için hafif JavaScript kütüphaneleri, temel dallanma konuşmalarını tamamen tarayıcı içinde işler.
- Bir kütüphane seçin (ör. BotUI, simple-chatbot) ve HTML’inize CDN bağlantısı üzerinden ekleyin.
- Konuşma akışınızı, sorular, seçenekler ve yanıtlarla bir JSON yapısı olarak tanımlayın.
- Sohbet botunu bir script bloğunda başlatın ve bir kapsayıcı div’e bağlayın.
HTML Sohbet Botunuz İçin Optimizasyon İpuçları
Kurulum tamamlandı — işte ziyaretçilerin gerçekten kullandığı bir sohbet botu ile üç saniye sonra kapattığınız bir bot arasındaki fark.
- Gerçek ziyaretçi davranışlarına dayalı olarak önerilen soruları yazın: Destek gelen kutunuzdan, iletişim formu gönderimlerinden veya site arama günlüklerinden en çok 3–4 soruyu çekin.
- En kritik sorular için Soru-Cevap özelliğini kullanın. Yanıtın kesinlikle doğru olması gereken bir soru varsa (fiyatlandırma, iade politikası, yasal uyum), bu soruyu bilgi tabanında Soru-Cevap çifti olarak ekleyin.
- Bir İnsanla İletişim Becerisini Gerçekçi Beklentilerle Ayarlayın. Sohbet botu ziyaretçileri harici kanallara yönlendirir, bu yüzden yapılandırdığınız iletişim bilgilerinin aktif olarak izlenmesini sağlayın ki ziyaretçiler yolunu şaşırmasın.
- Yapılandırılmış veriler için JSON dosyalarıyla eğitin. Ürün kataloğu, fiyat tabloları veya özellik karşılaştırmaları gibi verileriniz varsa, yüklemeden önce bunları JSON olarak formatlayın. Yapay Zeka modeli, yapılandırılmamış metinden daha doğru bir şekilde JSON’u çözer.
- Sayfa özel davranışlar için görünürlük kontrollerini kullanın. Destek belgeleriniz sayfalarında satış odaklı bir sohbet botu göstermeyin ve ana sayfanızda sorun giderme botu göstermeyin.
Sıkça Sorulan Sorular
Neden tarayıcıda HTML dosyasını açtığımda sohbet botu görünmüyor?
HTML sitenizin her sayfasında sohbet botunu nasıl gösterebilirsiniz?
İçeriğinizi değiştirdiğinizde Yapay Zeka Sohbet Botu otomatik olarak güncellenir mi?
Statik bir HTML sitesinde sohbet botunu kullanabilir miyim?
Sohbet botum neden yanlış yanıtlar veriyor?
Sonuç
Özel bir HTML sitesine bir sohbet botu eklemenin birkaç yolu vardır: JavaScript ve API ile baştan bir bot oluşturmak veya kodsuz bir widget yerleştirmek. HTML sohbet botu widget’ı ile süreç, görsel bir düzenleyici ve tek bir kod yapıştırması ile işler — arka uç yok, çerçeve bağımlılıkları yok, sürekli kod bakımı yok.
conversation rules and instructions, and shape the chatbot’s personality to match your brand voice.”>Henüz başlamadıysanız, Yapay Zeka Sohbet Robotu düzenleyicisini açın ve Bilgi Tabanı’na ilk birkaç web sayfasını ekleyin. Canlıya geçtiğinizde en etkili adım, sohbet botunun ne bildiğini ve nasıl iletişim kurduğunu iyileştirmektir — bilgi tabanına daha fazla URL ekleyin, ardından konuşma kurallarını ve talimatlarını netleştirin ve sohbet botunun kişiliğini markanızı yansıtacak şekilde şekillendirin.
