Web sitenize ChatLab eklemek, ziyaretçilerin doğrudan siteniz üzerinden yapay zeka chatbotunuzla etkileşime girmesini sağlar. Bu kılavuz, yerleştirme kodunu nasıl alacağınızı ve web sitenize nasıl ekleyeceğinizi açıklar.
Başlamadan önce
Müşterilerinizle paylaşmadan önce chatbotunuzu oluşturun ve eğitin. Kurulum için ayrıca web sitesini düzenleme ve yayınlama iznine de ihtiyacınız vardır. Bkz. İlk chatbotunuzu nasıl oluşturursunuz.
Deploy sekmesini açma
Ana kontrol panelinden chatbotunuzu seçin, ardından Deploy (Yayına al) sekmesine tıklayın.
Platformunuzu seçme
Sağ taraftaki Select Platform (Platform Seçin) paneli, desteklenen hedefleri iki grupta listeler: Chatbotu kontrol ettiğiniz sayfalara yerleştirmek için Website (Web Sitesi) ve mevcut bir konuşma hesabına bağlamak için Messaging channels (Mesajlaşma kanalları). Chatbotun görünmesini istediğiniz yere karşılık gelen girişe tıklayarak özel talimatları görüntüleyin.
Desteklenen platformlar:
- HTML Code - HTML kodunu düzenleyebildiğiniz tüm web sitelerinde çalışır
- WordPress - Resmi ChatLab eklentisi veya manuel kod ekleme yoluyla
- Wix - Settings > Custom Code üzerinden
- Webflow - Siteniz veya çalışma alanınız için özel kod erişimi etkinleştirilmiş olarak Site settings > Custom code üzerinden
- PrestaShop - ChatLab PrestaShop modülü veya manuel kod ekleme yoluyla
- Shopify - theme.liquid dosyası üzerinden
- WooCommerce - WordPress eklentisi veya manuel kod ekleme yoluyla
- Abicart - Store design > Themes > Site header üzerinden
- CS-Cart - Design > Layouts > Custom HTML code üzerinden
Mesajlaşma kanalları:
- WhatsApp Business - Bir WhatsApp Business hesabında yanıt verir, bkz. WhatsApp for Business
- Facebook Messenger - Facebook sayfanızın mesajlarına yanıt verir, bkz. Facebook Messenger Entegrasyonu
- Instagram - Instagram doğrudan mesajlarına yanıt verir, bkz. Instagram Entegrasyonu
Mesajlaşma kanalları aşağıdaki yerleştirme kodunu kullanmaz. Halihazırda sahip olduğunuz bir hesaba bağlanırlar, bu nedenle web sitesine herhangi bir kod yapıştırılmaz.
Her platform, ilgili entegrasyona özel adım adım talimatlar gösterir. Kendine özel yardım makalesi bulunan platformlar için alt kısımda bir View full instructions (Tüm talimatları görüntüle) bağlantısı yer alır.
HTML Code ile ekleme
HTML Code seçeneği, kaynak koduna erişiminiz olan tüm web sitelerinde çalışır. İki yerleştirme seçeneği göreceksiniz: Widget ve Iframe.
Widget modu
Widget sekmesi, web sitenize bir sohbet simgesi ekleyen kodu gösterir. Ziyaretçiler simgeye tıkladığında bir sohbet penceresi açılır.
- Widget sekmesine tıklayın
- Kodu kopyalamak için Copy to clipboard (Panoya kopyala) butonuna tıklayın
- Web sitenizin
<head>bölümünü bulun - Kodu
<head>bölümünün en son ögesi olarak yapıştırın - Chatbot simgesinin göründüğünü doğrulamak için tarayıcınızı yenileyin
Iframe modu
Iframe sekmesi, chatbotu doğrudan sayfa içeriğinize gömen kodu gösterir. Chatbot her zaman görünür durumdadır ve diğer sayfa ögeleriyle çevrelenebilir.
- Iframe sekmesine tıklayın
- Kodu kopyalamak için Copy to clipboard (Panoya kopyala) butonuna tıklayın
- Kodu, web sitenizin HTML'inde chatbotun görünmesini istediğiniz herhangi bir yere yapıştırın
widthveheightözelliklerini yerleşiminize uyacak şekilde ayarlayın
Hangisini seçeceğinizden emin değil misiniz? Ayrıntılı bir karşılaştırma için Widget ve Iframe arasındaki fark nedir? makalesini okuyun.
WordPress veya WooCommerce ile ekleme
WordPress ve WooCommerce platformları iki kurulum yöntemi sunar: Plugin Installation (Eklenti Kurulumu - önerilen) ve Manual Installation (Manuel Kurulum).
Plugin Installation (önerilen)
- Get the plugin on WordPress.org seçeneğine tıklayın, ardından ChatLab eklentisini kurup etkinleştirin.
- WordPress içinde ChatLab menüsünü açın. WooCommerce mağazası için mağaza verilerini de bağlamak üzere WooCommerce integration seçeneğini işaretli bırakın.
- Continue butonuna tıklayın, ChatLab'de oturum açın ve chatbotunuzu seçin.
- Bağlantıyı tamamlayın, yayınlanan web sitenizi açın ve bir test mesajı gönderin.
Manual Installation
Manual Installation sekmesine geçin ve bir kod ekleme eklentisi kullanarak Widget kodunu sitenizin üstbilgisine (header) kopyalayın. Iframe için, sayfa içeriğinde iframe HTML koduna izin veren bir HTML bloğu kullanın. Sayfayı yayınlayın ve sohbeti test edin. Widget'ı eklenti veya manuel kod parçacığından yalnızca birini kullanarak bir kez kurun.
Tüm ayrıntılar için bkz. WordPress web sitesine chatbotunuzu nasıl eklersiniz.
Diğer platformlar üzerinden ekleme
Shopify, Wix, Webflow, PrestaShop, Abicart ve CS-Cart için platformu Select Platform panelinden seçin. Her platform şunları gösterir:
- Widget ve Iframe seçenekleriyle birlikte yerleştirme kodu
- Platforma özel, adım adım yapıştırma talimatları
- Tam platform kılavuzuna yönlendiren bir View full instructions bağlantısı
GDPR uyumluluğu
Chatbotunuzun yalnızca çerez izni verildikten sonra yüklenmesini istiyorsanız CookieBot, Usercentrics ve Google Tag Manager'ı kapsayan entegrasyon kılavuzları için GDPR uyumluluğu için ChatLab kurulumu makalesine bakın.
İçerik Güvenliği Politikası (CSP)
Web siteniz İçerik Güvenliği Politikası (CSP) başlıkları kullanıyorsa chatbotun çalışması için ChatLab alan adlarına izin vermeniz gerekir. Gerekli direktifler, Widget veya Iframe modunu kullanmanıza bağlı olarak değişir.
Widget modu
Widget, sayfanıza sohbet arayüzünü oluşturan bir komut dosyası yükler. Web sitenizin geri kalanına yönelik politikayı değiştirmeyin; aşağıdaki ChatLab kaynaklarını mevcut CSP direktiflerinizle birleştirin:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Varsayılan olarak widget, bazı stilleri satır içi (inline) olarak ekler. Politikanızın ayrıca örneğin bir CSP nonce veya hash değeri ile satır içi yapılandırma komut dosyasını yetkilendirmesi gerekir. Botunuz ve ürün kartları tarafından kullanılan görsel kaynaklarına img-src içinde izin verin; ses ve etkinleştirilen diğer özellikler ek kaynaklar gerektirebilir. Bir ajans alan adı için oluşturulan kod parçacığınızdaki alan adlarını kullanın.
CSP Safe Mode - unsafe-inline kullanımından kaçınma
Web sitenizin güvenlik politikası style-src içinde 'unsafe-inline' kullanımına izin vermiyorsa CSP Safe Mode seçeneğini etkinleştirebilirsiniz. Bu, widget'ın kapsayıcı stil sayfasını harici bir CSS dosyasından yükler. Satır içi yapılandırma komut dosyanızı yetkilendirmez veya her özel stilin ve etkinleştirilen özelliğin politikanıza uyacağını garanti etmez.
Etkinleştirmek için ChatLab betik etiketinden önce window.aichatbotCspSafe = true; satırını ekleyin:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
CSP Safe Mode etkinken 'unsafe-inline' içermeyen bir stil sayfası politikasını test edin. Başlangıç noktası olarak şunu kullanabilirsiniz:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Iframe modu
Üst sayfa, kopyalanan iframe URL'sindeki kaynağa izin vermelidir. Standart ChatLab barındırma hizmeti için mevcut politikaya şunu ekleyin:
frame-src https://api.chatlab.com;