FlowHunt JS API: Gelişmiş Chatbot Özelleştirmesi

Flowhunt, chatbot’unuzun davranışını derinlemesine özelleştirmenizi ve siteniz ya da uygulamanızla sorunsuzca entegre etmenizi sağlayan güçlü özelliklerle doludur. Bu sayfada, bazı gelişmiş özelleştirmeleri nasıl uygulayacağınızı öğreniyorsunuz: akış değişkenleri, URL parametreleri, olay tabanlı geri çağırmalar ve özel sohbet aktivasyon mantığı.

Akış Değişkenleri: Sohbet Deneyimini Kişiselleştirin

Akış değişkenleri, chatbot’a dinamik veri aktarmanızı sağlar; böylece sohbet tamamen kişiye özel hale gelir. Bu değişkenlere istediğiniz her şeyi kaydedebilirsiniz; kullanıcı verisi, oturum verisi veya anlamlı herhangi bir bilgi olabilir.

flowVariable Nasıl Kullanılır

flowVariable, FHChatbot.initChatbot() yapılandırmasının bir parçasıdır. Her anahtar-değer çifti, bir değişkeni ve onun değerini tanımlar. Örnek – Kullanıcının IP adresi ve kullanıcı kimliği aktarma:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "flowVariable": {
        "ip": /* Code to obtain IP Address */ ,
        "userId":  /* Code to obtain User ID */
      }
    });
  }
);
</script>

Önemli Notlar:

• /* Code to obtain IP Address */ ve /* Code to obtain User ID */ kısımlarını, sisteminizden bu değerleri almak için kendi mantığınız ile değiştirin. Bu genellikle sunucu tarafı değişkenlerine erişmek, local storage kullanmak veya diğer kimlik doğrulama yöntemlerine başvurmak anlamına gelir.
• Bu değişkenler aktarıldıktan sonra, chatbot mantığınız içinde kullanılabilir olur ve dinamik yanıtlar ile kişiselleştirilmiş iş akışları sağlar.
• Chatbot mantığı bu değişkenleri okuyup kullanarak sohbeti kişiye özel ve bağlama duyarlı hale getirebilir.

urlSuffix: Chatbot Etkileşimlerini Takip Edin ve Analiz Edin

urlSuffix parametresi, chatbot’un çağırdığı her URL’nin sonuna bir sorgu dizesi eklemenizi sağlar. Bu, Google Analytics gibi analiz araçları ile chatbot etkileşimlerinin kaynağını ve etkinliğini takip etmek için çok değerlidir.

urlSuffix Nasıl Kullanılır

Sadece urlSuffix özelliğini istediğiniz sorgu dizesine ayarlayın, örneğin:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=your-custom-source"
    });
  }
);
</script>

Bu örnekte, ?utm_source=your-custom-source chatbot tarafından başlatılan tüm URL’lerin sonuna eklenecek ve chatbot trafiğini analiz platformunuzda takip edebileceksiniz.

Avantajlar

• Dönüşümleri Takip Edin: Hangi chatbot etkileşimlerinin sitenizde en fazla dönüşüme yol açtığını izleyin.
• Kullanıcı Davranışını Analiz Edin: Kullanıcıların chatbot ile etkileşimden sonra sitenizde nasıl gezindiğini anlayın.
• Kampanya Ataması: Kullanıcıları chatbot ile etkileşime teşvik eden kampanyaların etkinliğini ölçün.

Olay İşleyiciler: Chatbot Eylemlerine Tepki Verin

Flowhunt, chatbot’ta belirli olaylar gerçekleştiğinde özel fonksiyonlar tetikleyen olay işleyicileri kurmanıza olanak tanır. Bu işleyiciler, kullanıcı deneyimi üzerinde hassas kontrol sağlar. Temel olay işleyiciler şunlardır:

• onSessionCreated: Yeni bir chatbot oturumu başlatıldığında tetiklenir (oturum yeniden başlatıldığında da!).
• onWindowOpened: Chatbot penceresi açıldığında tetiklenir.
• onWindowClosed: Chatbot penceresi kapatıldığında tetiklenir.
• onError: Chatbot’ta hata oluştuğunda tetiklenir.
• onMessageReceived: Bot bir mesaj gönderdiğinde ve kullanıcı bir giriş sağladığında tetiklenir.
• onMessageSent: Kullanıcı bir mesaj gönderdiğinde tetiklenir.

Olay İşleyiciler Nasıl Kullanılır

FHChatbot.initChatbot tarafından döndürülen fhChatbot değişkeniyle işleyicileri ayarlayabilir, örneğin fhChatbot.onSessionCreated() ile dinleyiciler ekleyebilirsiniz. İşte bir örnek:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
// chatbot sayfanıza hazır olduğunda olayı yakalayın
window.addEventListener("onFHChatbotReady", (e) => {
  console.log("Chatbot hazır, sohbet butonu şu anda görünür olmalı ve tıklanmaya hazır.");
});

(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    const fhChatbot = FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=asdfsdfgsdg"
    }); 
    
    fhChatbot.onSessionCreated(function () {
      // Oturum oluşturulduğunda özel mantık, API çağrıları yapılabilir veya veri saklanabilir
      console.log("oturum başlatıldı");
    });
    
    fhChatbot.onWindowOpened(function () {
      // Pencere açıldığında özel mantık veya sohbet üstünde içerik gösterme
      console.log("pencere açıldı");
    });
    
    fhChatbot.onWindowClosed(function () {
      // Pencere kapandığında özel mantık veya sohbet üstünde içerik gösterme
      console.log("pencere kapandı");
    });
    
    fhChatbot.onError(function (e) {
      // Hata oluştuğunda özel mantık, hata takip aracında izlenebilir
      console.log(e.metadata);
      console.log("pencere hatası");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // Bot cevap verdiğinde özel mantık
      console.log("chatbot cevapladı");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // Kullanıcı bir giriş gönderdiğinde özel mantık
      console.log("kullanıcı giriş gönderdi");
    });
  }
);
</script>

Her bir olay işleyici fonksiyonu, chatbot’unuzun kullanıcının davranışına dinamik şekilde tepki vermesini sağlayacak özel mantık çalıştırabilir.

Kullanım Senaryoları:

• Analitik ve Raporlama: onSessionStart ve diğer olaylarla oturum başlangıçlarını ve chatbot kullanımını izleyip değerli metrikler gönderebilirsiniz.
• Dinamik Arayüz Güncellemeleri: Chatbot olaylarına göre sayfanızı değiştirebilirsiniz (ör. sohbet aktifken farklı mesaj gösterme).
• Hata Yönetimi: Chatbot hatalarını yakalayıp yanıtlayarak kullanıcı deneyimini iyileştirin.
• Özel Kullanıcı Akışları: Kullanıcı sohbet ile etkileşime girdikçe özel mantık uygulayın.

Özel Sohbet Aktivasyonu: Açma ve Kapama Tamamen Sizin Kontrolünüzde

showChatButton: false ayarını yaparak varsayılan sohbet butonunu gizleyebilirsiniz. Ardından, kendi özel mantığınızla sohbet penceresini programatik olarak açıp kapatabilirsiniz. Bu, kullanıcı arayüzü üzerinde tam hakimiyet sağlar.

Özel Aktivasyon Nasıl Kullanılır

1. Varsayılan Butonu Devre Dışı Bırakın: FHChatbot.initChatbot() seçeneklerine showChatButton: false ekleyin.
2. Programatik Olarak Kontrol Edin: fhChatbot.openChat() ve fhChatbot.closeChat() yöntemleriyle, kendi olaylarınıza bağlı olarak sohbetin görünürlüğünü yönetin.

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    const fhChatbot = FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=asdfsdfgsdg",
      "showChatButton": false
    }); 
    
    // Örnek: Kullanıcı bir butona tıkladığında
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Örnek: Kullanıcı özel bir kapatma butonuyla kapattığında
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

Bu örnekte, özel butonlara dinleyiciler ekleyerek sohbeti açıp kapatmayı sağladık.

Avantajlar:

• Özel Tasarım: Chatbot’u sitenizin tasarımına tamamen entegre edin; sohbete başlatmak için özel bir buton veya tetikleyici kullanın.
• Kullanıcı Akışını Kontrol Edin: Sohbeti, kullanıcı yolculuğunun belirli noktalarında başlatarak bağlamsal destek sağlayın.
• Stratejik Konumlandırma: Sohbeti kullanıcıların dikkatini çekmek için animasyonlar veya görsel ipuçlarıyla öne çıkarabilirsiniz.

Akış değişkenleri, URL ekleri, olay işleyicileri ve özel sohbet aktivasyonu kullanarak Flowhunt ile son derece özelleştirilmiş ve ilgi çekici chatbot deneyimleri oluşturabilirsiniz. Bu gelişmiş seçenekler, chatbot’unuzu iş ihtiyaçlarınıza ve kullanıcılarınızın beklentilerine tam uyumlu hale getirmek için gerekli tüm araçları size sunar.