Webflow'a Asyntai AI Chatbot Nasıl Eklenir

Webflow web siteleri için adım adım kılavuz

Platform:

Adım 1: Yerleştirme Kodunuzu Alın

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Not: Yukarıdaki kod yalnızca bir örnektir. Kişisel widget kimliğinizi içerdiğinden, kendi benzersiz yerleştirme kodunuzu Dashboard'unuzdan kopyalamanız gerekir.

Adım 2: Site Ayarları Üzerinden Kod Ekleme (Tüm Sayfalar)

Chatbot'u Webflow sitenizin tüm sayfalarına aynı anda eklemek için:

Webflow hesabınıza giriş yapın ve projenizi seçin
Sol kenar çubuğundaki dişli simgesine (Site Settings) tıklayın
Ayarlar menüsünde "Custom Code" seçeneğine tıklayın
"Footer Code" bölümüne (</body> etiketinden önce) kadar aşağı kaydırın
Asyntai yerleştirme kodunuzu yapıştırın
"Save Changes" seçeneğine tıklayın
Değişiklikleri uygulamak için sitenizi yayınlayın

İpucu: Kodu Footer bölümüne eklemek, onu kapanış </body> etiketinin hemen öncesine yerleştirir; bu, sohbet widget'ları için önerilir çünkü sayfa yüklemenizi yavaşlatmaz.

Alternatif: Sayfaya Özel Kod

Chatbot'u yalnızca belirli sayfalarda istiyorsanız:

Projenizi Webflow Designer'da açın
Sol kenar çubuğundaki Pages paneline (klasör simgesi) tıklayın
Düzenlemek istediğiniz sayfanın üzerine gelin ve dişli simgesine tıklayın
"Custom Code" bölümüne kadar aşağı kaydırın
Asyntai gömme kodunuzu "Before </body> tag" bölümüne yapıştırın
"Kaydet"'e tıklayın
Sitenizi yayınlayın

Alternatif: Embed Elemanı Kullanma

Chatbot'u sayfanızın herhangi bir yerine Embed elemanını kullanarak da ekleyebilirsiniz:

Projenizi Webflow Designer'da açın
Add panelini açmak için "+" düğmesine tıklayın
"Embed" araması yapın veya Components altında bulun
Embed elemanını sayfanıza sürükleyin
Asyntai gömme kodunuzu kod düzenleyicisine yapıştırın
"Save & Close" düğmesine tıklayın
Sitenizi yayınlayın

Önemli: Embed elemanını kullanırken, chatbot'u istediğiniz her sayfaya eklemeniz gerekir. Site genelinde kurulum için yukarıdaki Site Ayarları yöntemini kullanın.

Adım 3: Kurulumu Doğrulayın

Sitenizi yayınladıktan sonra yeni bir tarayıcı sekmesinde veya gizli pencerede açın. Sağ alt köşede sohbet widget düğmesini görmelisiniz. Doğru açıldığından ve çalıştığından emin olmak için tıklayın.

Widget'ı göremiyor musunuz? Kodu ekledikten sonra sitenizi yayınladığınızdan emin olun. Özel kodlar yalnızca canlı sitede görünür, Designer önizlemesinde görünmez. Tarayıcı önbelleğinizi temizlemeyi veya gizli pencerede görüntülemeyi deneyin.

AI Arama Çubuğunu ekleme

AI Arama Çubuğu, kendi koduna sahip ayrı bir widget tır. Sohbetin yanı sıra ya da tek başına ekleyin. Standard veya üzeri bir plan gerektirir: daha düşük planda çubuk görünür ama sonuç döndürmez.

Script etiketine data-replace özniteliğini ekleyin; çubuk, temanızdaki mevcut çubuğun yerini alır. Site Settings, Custom Code, Footer altına ekleyin; sohbet kodunun bulunduğu yerin aynısı, böylece kapanış body etiketinin hemen öncesinde yer alır.

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

AI Arama Çubuğu kılavuzunun tamamını okuyun