Webflow web sitenize bir ChatLab chatbot'u eklemek, ziyaretçilerin doğrudan siteniz üzerinden yapay zeka asistanınızla etkileşime geçmesini sağlar. Bu kılavuz, ChatLab'den embed kodunuzu alma ve bunu Webflow'a yapıştırma adımlarını açıklamaktadır.
Başlamadan önce
Başlamadan önce chatbot'unuzu oluşturun ve Webflow sitenizin veya çalışma alanınızın özel kod (custom code) erişimi içerdiğini kontrol edin. Webflow'un özel kod gereksinimleri sayfasına göz atın. Ayrıca web sitesini düzenleme ve yayına alma iznine de ihtiyacınız vardır.
Adım 1 - ChatLab'den ekleme kodunu kopyalayın
- ChatLab hesabınıza giriş yapın ve eklemek istediğiniz chatbot'u seçin
- Deploy (Yayına al) sekmesine tıklayın, ardından sağdaki platform panelinden Webflow'u seçin
- Aşağıdaki sayfanın head bölümüne kurulum için Widget'ı seçin. Her zaman görünür bir sohbet için Iframe'i seçin ve aşağıdaki iframe talimatlarını izleyin. Karşılaştırma için Widget ile iframe arasındaki fark nedir? sayfasına bakın
- Copy to clipboard (Panoya kopyala) butonuna tıklayın
Adım 2 - Kodu Webflow'a ekleyin
Kodu Site Settings (Site Ayarları) alanına eklemek, chatbot'u Webflow sitenizin tüm sayfalarına yerleştirir.
- Projenizi Webflow Dashboard panelinde açın
- Site settings > Custom code (Site ayarları > Özel kod) yolunu izleyin
- Kopyaladığınız kodu Head Code (Head kodu) bölümüne yapıştırın
- Save Changes (Değişiklikleri Kaydet) butonuna tıklayın
- Değişikliklerin geçerli olması için sitenizi yayımlayın (Publish)
Yalnızca tek bir sayfaya ekleme
Chatbot'un tüm sitede değil de yalnızca belirli bir sayfada yer almasını istiyorsanız:
- İlgili sayfayı Webflow Designer içinde açın
- Dişli simgesine tıklayarak sayfa ayarlarını (Page Settings) açın
- Aşağı kaydırarak Custom Code (Özel Kod) bölümüne gelin
- Kodu Head Code alanına yapıştırın
- Değişiklikleri kaydedin ve sitenizi yayımlayın
Sürekli görünür bir iframe ekleme
Webflow Designer içinde, chatbot'un görünmesini istediğiniz yere bir Code Embed (Kod yerleştirme) öğesi yerleştirin, ChatLab'den aldığınız Iframe kod parçacığını yapıştırın ve yerleşiminize uygun genişlik ile yükseklik değerlerini belirleyin. Sayfayı kaydedin ve sitenizi yayımlayın. iframe, Head Code alanına değil sayfa içeriğine eklenmelidir.
Kurulumu doğrulama
Yayınlama işleminden sonra Webflow sitenizi bir tarayıcıda açın. Sayfanın köşesinde sohbet simgesinin belirdiğini (widget modu için) veya sohbet penceresinin sayfaya gömüldüğünü (iframe modu için) görmelisiniz. Sohbeti açmak için simgeye tıklayın ve her şeyin çalıştığını doğrulamak üzere bir test mesajı gönderin.