Ana içeriğe geç

Chatbot'u Gömme

Gömme widget'ı, akışlarınızdan birini web sitenize sohbet balonu ya da tam sayfa sohbet olarak koyar. Tek bir script etiketi, derleme adımı yok.

Widget'ı sitenize ekleme​

  1. Akışı açın ve canvas başlığındaki API Endpoint düğmesine basın.
  2. Embed sekmesinde kalın.
  3. Bir varyant seçin.
  4. Kodu kopyalayıp sayfanıza, kapanış </body> etiketinden önce yapıştırın.

Embed sekmesi: widget kodu, varyantlar ve tema hazır ayarları.

Dört varyant sunulur:

VaryantNe elde edersiniz
Popup HTMLHerhangi bir HTML sayfasında yüzen bir sohbet balonu. Olağan seçim
Fullpage HTMLBir kabı dolduran sohbet — özel bir destek sayfası için
Popup ReactAynı balon, React bileşeni olarak
Fullpage ReactTam sayfa sürümü, React bileşeni olarak

Gömme kodu​

<script type="module">
    import Chatbot from "https://<flowera-alan-adiniz>/api/v1/widget/widget.js"
    Chatbot.init({
        chatflowid: "<akis-kimliginiz>",
        apiHost: "https://<flowera-alan-adiniz>"
    })
</script>

İki değer, ikisi de kopyalanan kodda hazır: hangi akışın çalışacağı ve hangi Flowera kurulumuna gidileceği. Widget'ın okuduğu seçenekler bu ikisinden ibarettir.

Fullpage varyantları farklıdır: yüzen bir balon yerine sayfadaki bir öğenin içine yerleşirler, bu yüzden kod bir kapsayıcı etiket ve initFull kullanır.

<flowera-fullchatbot></flowera-fullchatbot>
<script type="module">
    import Chatbot from "https://<flowera-alan-adiniz>/api/v1/widget/widget.js"
    Chatbot.initFull({
        chatflowid: "<akis-kimliginiz>",
        apiHost: "https://<flowera-alan-adiniz>"
    })
</script>

Bir varyantı elle uyarlamak yerine, seçtiğiniz sekme için pencerenin gösterdiği kodu kopyalayın.

chatflowid bir tanımlayıcıdır, gizli anahtar değildir. Sayfanızı görüntüleyen herkes onu okuyabilir ve akışla konuşabilir. Gömülü bir botu herkese açık bir arayüz olarak görün: talimatına kuruma özel bilgi koymayın ve ona bir yabancının yapmasına izin vermeyeceğiniz şeyleri yapan araçlar vermeyin.

Tema​

Penceredeki yapılandırma paneli görünümü koda dokunmadan kapsar:

  • Tema hazır ayarları — sekiz hazır görünüm (Modern Blue, Dark Pro, Ocean Breeze, Forest Green, Sunset Orange, Royal Purple, Rose Gold, Minimal Gray), tek tıkla uygulanır.
  • Genel ayarlar — başlık metni, karşılama mesajı ve hata mesajı.
  • Başlık / Header — başlığın arka plan ve yazı renkleri.
  • Avatar — bot ve kullanıcı avatar görselleri ve boyutları.
  • Bot mesajı, Kullanıcı mesajı, Metin girişi, Sohbet düğmesi, İpucu balonu — her parçanın renkleri ve metinleri, bölüm bölüm.

Sitenize en yakın hazır ayardan başlayın, sonra ayarlayın. Sıfırdan tema kurmak, bir hazır ayarın neredeyse verdiği şeye giden uzun yoldur.

Karşılama mesajı özel ilgiyi hak eder: çoğu ziyaretçinin okuduğu tek yönerge odur. "Bana siparişler, iadeler veya teslimat hakkında sorabilirsiniz" cümlesi "Merhaba! Size nasıl yardımcı olabilirim?" cümlesinden iyi iş görür; çünkü insanlara botun gerçekte neyde iyi olduğunu söyler.

Akışa bağlam gönderme​

Widget bunu yapamaz. Yalnızca chatflowid ve apiHost okur; sayfanızdan akışa müşteri kimliği, ürün ya da dil taşımak için bir seçenek yoktur.

Ziyaretçiye özel bağlama ihtiyacınız varsa bunun yerine kendi sunucunuzdan Tahmin API'sini çağırın — her istekte overrideConfig kabul eder ve hangi ziyaretçinin ne gönderebileceğine karar vermek için doğru yer sizin sunucunuzdur.

Nerede yükleneceğini sınırlama​

Widget, script'in çalıştığı her yerde çalışır; bunu kendi tarafınızda denetleyin:

  • Akışta İzin Verilen Alan Adları'nı ayarlayın. Site bazlı asıl denetim budur: sunucu isteğin origin bilgisini bu listeye karşı kontrol eder ve dışındakileri reddeder; böylece kodunuzu başka bir siteye kopyalamak işe yaramaz. Boş bırakırsanız her site akışınızı gömebilir.
  • Script'i yalnızca olması gereken sayfalara ekleyin. Bir etiket yöneticisi kuralı yeterlidir.
  • Akışın hız sınırını ayarlayın; betik yazan tek bir ziyaretçi fatura çıkaramasın.
  • Yayına aldıktan sonraki ilk hafta Kullanım Paneli'ni izleyin. Gerçek trafik her zaman beklenen trafikten farklıdır.
Gömülü bir akışa API anahtarı eklemeyin

Widget hiçbir Authorization başlığı göndermez; dolayısıyla API anahtarı eklenmiş bir akış her mesajda 401 döner — gömülü chatbot tamamen çalışmaz hale gelir. API anahtarları Tahmin API'sine sunucudan sunucuya yapılan çağrılar içindir. Gömme için İzin Verilen Alan Adları'nı kullanın.

İlgili​