"FlowHunt JS API ile hangi olaylari dinleyebilirim?"

"FlowHunt JS API 10 olay yayinlar: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall ve onFHError. Bunlara window.addEventListener kullanarak veya chatbot yoneticisinin callback metodlari araciligiyla abone olabilirsiniz."

"Varsayilan sohbet butonunu nasil gizleyip chatbot'u programatik olarak acabilirim?"

"Varsayilan butonu gizlemek icin showChatButton: false yapilandirma secenegini kullanin, ardindan chatbot'u kendi kosullarinizda acmak icin chatbotManager.openChat() cagirin — ornegin, ozel bir buton tiklamasinda."

"Yonetici callback metodlari ile window.addEventListener arasindaki fark nedir?"

"Her iki yaklasim da calisir. Yonetici callback metodlari (ornegin chatbotManager.onMessageSent(fn)) init callback'i icinde cagrilir ve yonetici ornegine baglidir. window.addEventListener yaklasimi (ornegin window.addEventListener('onFHMessageSent', fn)) sayfanizda herhangi bir yerde, hatta chatbot yuklenmeden once bile ayarlanabilir."

"Akis degiskenlerini kullanarak chatbot'a ozel verileri nasil gonderirim?"

"Kullanici kimlligi, e-posta veya sayfa URL'si gibi anahtar-deger ciftlerini gondermek icin setConfig() icerisindeki flowVariables yapilandirma secenegini kullanin. Bu degiskenler, kisisellestirilmis yanitlar icin chatbot akisinizda kullanilabilir hale gelir."

"Olay isleyicilerinde hangi veriler mevcuttur?"

"Veri tasiyan olaylar bunu event.detail.metadata icerisinde icerir. Ornegin, onFHMessageSent mesaj icerigini ve zaman damgasini, onFHMessageReceived flow_id, message_id ve mesaj metnini, onFHFeedback ise message_id ve geri bildirimin olumlu mu yoksa olumsuz mu oldugunu icerir."

FlowHunt JS API: Ileri Duzey Kullanicilar Icin Entegrasyon Rehberi

FlowHunt JS API v2 entegrasyonu icin eksiksiz referans. Chatbot’u nasil gomecegini, tum 10 olaya nasil abone olacagini, akis degiskenlerini nasil kullanacagini, URL parametreleriyle etkilesimleri nasil takip edecegini ve sohbet penceresini programatik olarak nasil kontrol edecegini ogrenin.

FlowHunt JavaScript API Chatbot Integration

FlowHunt JS API, chatbot’unuzun web sitenizle nasil entegre oldugu uzerinde tam kontrol saglar. v2 entegrasyon kodunu kullanarak chatbot’u gomebilir, yasam dongusu ve etkilesim olaylarina abone olabilir, akis degiskenleri araciligiyla dinamik veriler gonderebilir, URL parametreleriyle etkilesimleri takip edebilir ve sohbet penceresini programatik olarak kontrol edebilirsiniz.

Bu rehber, projenize kopyalayip uyarlayabileceginiz kod ornekleriyle JS API’nin her yonunu kapsar.

Entegrasyon Kodu (v2)

FlowHunt’ta bir chatbot olusturdugununzda, bir entegrasyon snippet’i alirsiniz. Bunu kopyalayin ve HTML’inizde kapanist </body> etiketinden hemen once yapisitirin:

<script id="fh-chatbot-script-YOUR_CHATBOT_ID">
  var currentScript = document.currentScript
    || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
    + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

  script.onload = function() {
    window.FHChatbot_YOUR_CHATBOT_ID.init(function(chatbotManager) {
      // The chatbot is ready — use chatbotManager here
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

YOUR_CHATBOT_ID ve YOUR_WORKSPACE_ID degerlerini FlowHunt panelinizden alinan degerlerle degistirin. Global degisken adindaki chatbot kimlligi (window.FHChatbot_YOUR_CHATBOT_ID) tire yerine alt cizgi kullanir.

setConfig() ile Yapilandirmayi Gecersiz Kilma

init() cagirmadan once, setConfig() kullanarak varsayilan chatbot ayarlarini gecersiz kilabilirsiniz:

<script id="fh-chatbot-script-YOUR_CHATBOT_ID">
  var currentScript = document.currentScript
    || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
    + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

  script.onload = function() {
    window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
      headerTitle: 'Support Assistant',
      maxWindowWidth: '700px',
      showChatButton: false,
      flowVariables: {
        userId: '12345',
        plan: 'enterprise'
      },
      urlSuffix: '?utm_source=chatbot'
    });

    window.FHChatbot_YOUR_CHATBOT_ID.init(function(chatbotManager) {
      // Chatbot initialized with custom config
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

Mevcut Yapilandirma Secenekleri

Option	Type	Description
`headerTitle`	string	Ozel baslik metni
`maxWindowWidth`	string	Maksimum sohbet penceresi genisligi (ornegin `'700px'`)
`maxWindowHeight`	string	Maksimum sohbet penceresi yuksekligi
`inputPlaceholder`	string	Mesaj giris alani icin yer tutucu metin
`showChatButton`	boolean	Varsayilan kayan sohbet butonunu goster veya gizle
`openChatPanel`	boolean	Sayfa yuklendiginde sohbet panelini otomatik olarak ac
`flowVariables`	object	Akisa gonderilen ozel verilerin anahtar-deger ciftleri
`urlSuffix`	string	Chatbot tarafindan olusturulan tum URL’lere eklenen sorgu dizesi
`cookieConsent`	boolean	Cerezler araciligiyla oturum kalicilgini etkinlestir
`embedded`	string	Gomulu modu etkinlestirmek icin ayarlayin (kapatma butonu yok)
`theme`	string	Tema modu

Akis Degiskenleri: Dinamik Veri Gonderme

Akis degiskenleri, web sitenizden chatbot akisina ozel veriler gondermenizi saglar. Bu, kullanici baglamina dayali kisisellestirilmis konusmalar olusturmanizi mumkun kilar.

window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
  flowVariables: {
    userId: getCurrentUserId(),
    userEmail: getCurrentUserEmail(),
    currentPage: window.location.pathname,
    plan: 'enterprise'
  }
});

Ayarlandiktan sonra, bu degiskenler chatbot akis mantginiz icerisinde erisilebilir hale gelir ve yanitlari kisisellesirmenize, konusmalari yonlendirmenize veya AI ajanlarina baglam aktarmaniza olanak tanir.

URL Suffix: Chatbot Etkilesimlerini Takip Etme

urlSuffix parametresi, chatbot tarafindan olusturulan her URL’ye bir sorgu dizesi ekler. Bu, analitik araclarinda chatbot kaynakli trafigi takip etmek icin faydalidir:

window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
  urlSuffix: '?utm_source=chatbot&utm_medium=widget'
});

Kullanim alanlari:

Google Analytics’te chatbot etkilesimlerinden donusumleri takip edin.
Chatbot ile etkilesimden sonra kullanici davranisini analiz edin.
Chatbot katilimini yonlendiren kampanyalari iliskilendirin.

Olay Referansi

FlowHunt JS API, window nesnesi uzerinde 10 ozel olay gonderir. Tum olaylar bubbles: true ve composed: true ile CustomEvent API’sini kullanir.

onFHChatbotReady

Chatbot widget’i tamamen olusturuldugunda ve kullanima hazir oldugunda tetiklenir.

Olay verisi: Yok
Ne zaman: Widget DOM’u monte edildikten ve sohbet butonu gorunur olduktan sonra.

onFHChatbotSessionCreated

Sunucuda yeni bir sohbet oturumu olusturuldugunda tetiklenir. Oturum yeniden baslatildiginda da tetiklenir.

Olay verisi: Yok
Ne zaman: Basarili bir oturum olusturma API caigrisindan sonra.

onFHChatbotWindowOpened

Kullanici sohbet penceresini actiginda tetiklenir.

Olay verisi: Yok
Ne zaman: Sohbet paneli gorunur hale geldiginde.
Not: Gomulu modda tetiklenmez.

onFHChatbotWindowClosed

Kullanici sohbet penceresini kapattiginda tetiklenir.

Olay verisi: Yok
Ne zaman: Sohbet paneli gizlendiginde.
Not: Gomulu modda tetiklenmez.

onFHMessageSent

Kullanici bir mesaj gonderdiginde tetiklenir.

Olay verisi (event.detail.metadata):

{
  "content": "Hello, I need help with...",
  "createdAt": "2026-02-19T10:30:00.000Z"
}

onFHMessageReceived

Chatbot bir yanit alip gosterdiginde tetiklenir.

Olay verisi (event.detail.metadata):

{
  "flow_id": "abc123",
  "message_id": "msg_456",
  "message": "Sure, I can help you with that!",
  "sender": {
    "sender_name": "Support Agent",
    "sender_avatar": "https://example.com/avatar.png"
  }
}

sender alani istege baglidir ve yalnizca bir insan ajan dahil oldugunda mevcuttur.

onFHFormDataSent

Kullanici chatbot araciligiyla form verisi gonderdiginde tetiklenir.

Olay verisi (event.detail.metadata):

{
  "objectData": { "name": "John", "email": "john@example.com" },
  "createdAt": "2026-02-19T10:31:00.000Z"
}

onFHFeedback

Bir kullanici chatbot mesajina begeni veya begenmeme geri bildirimi verdiginde tetiklenir.

Olay verisi (event.detail.metadata):

{
  "message_id": "msg_456",
  "content": "Optional feedback text",
  "feedback": "P"
}

feedback degeri olumlu (begeni) icin "P" veya olumsuz (begenmeme) icin "N" olur.

onFHToolCall

Akis isleme sirasinda bir arac veya eylem yurutuldugunde tetiklenir.

Olay verisi (event.detail.metadata):

{
  "metadata": {
    "flow_id": "abc123",
    "message_id": "msg_789",
    "message": "Calling search API..."
  },
  "createdAt": "2026-02-19T10:32:00.000Z"
}

Not: Yalnizca flowAssistant ve flowAssistantV3 modlarinda tetiklenir, standart chatbot modunda tetiklenmez.

onFHError

Chatbot isletimi sirasinda bir hata olustugunda tetiklenir.

Olay verisi (event.detail.metadata):

{
  "metadata": {
    "flow_id": "abc123",
    "message_id": "msg_err",
    "message": "Flow execution failed"
  },
  "createdAt": "2026-02-19T10:33:00.000Z"
}

Olaylara Abone Olma

Chatbot olaylarina abone olmanin iki yolu vardir.

Yontem 1: Pencere Olay Dinleyicileri

Sayfanizda herhangi bir yerde window.addEventListener kullanin. Bu, chatbot yuklenmeden once bile calisir:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Chatbot lifecycle events
  window.addEventListener('onFHChatbotReady', function(event) {
    console.log('Chatbot is ready');
  });

  window.addEventListener('onFHChatbotSessionCreated', function(event) {
    console.log('Session created');
  });

  window.addEventListener('onFHChatbotWindowOpened', function(event) {
    console.log('Chat window opened');
  });

  window.addEventListener('onFHChatbotWindowClosed', function(event) {
    console.log('Chat window closed');
  });

  // Message events
  window.addEventListener('onFHMessageSent', function(event) {
    console.log('User sent:', event.detail.metadata.content);
  });

  window.addEventListener('onFHMessageReceived', function(event) {
    console.log('Bot replied:', event.detail.metadata.message);
  });

  window.addEventListener('onFHFormDataSent', function(event) {
    console.log('Form submitted:', event.detail.metadata.objectData);
  });

  // Feedback
  window.addEventListener('onFHFeedback', function(event) {
    var feedback = event.detail.metadata;
    console.log('Feedback on message', feedback.message_id, ':',
      feedback.feedback);
  });

  // Tool calls (flowAssistant modes only)
  window.addEventListener('onFHToolCall', function(event) {
    console.log('Tool called:', event.detail.metadata);
  });

  // Errors
  window.addEventListener('onFHError', function(event) {
    console.error('Chatbot error:', event.detail.metadata);
  });
});
</script>

Bir olayi dinlemeyi durdurmak icin, ayni fonksiyon referansiyla removeEventListener kullanin:

var handleMessage = function(event) {
  console.log(event.detail.metadata);
};
window.addEventListener('onFHMessageReceived', handleMessage);

// Later, when you want to stop listening:
window.removeEventListener('onFHMessageReceived', handleMessage);

Yontem 2: Yonetici Callback Metodlari

init() callback’i icerisinde, chatbot yoneticisinin yerlesik metodlarini kullanin:

window.FHChatbot_YOUR_CHATBOT_ID.init(function(chatbotManager) {
  chatbotManager.onSessionCreated(function() {
    console.log('Session created');
  });

  chatbotManager.onWindowOpened(function() {
    console.log('Window opened');
  });

  chatbotManager.onWindowClosed(function() {
    console.log('Window closed');
  });

  chatbotManager.onMessageSent(function(event) {
    console.log('User sent:', event.metadata);
  });

  chatbotManager.onMessageReceived(function(event) {
    console.log('Bot replied:', event.metadata);
  });

  chatbotManager.onFormDataSent(function(event) {
    console.log('Form data:', event.metadata);
  });

  chatbotManager.onFeedback(function(event) {
    console.log('Feedback:', event.metadata);
  });

  chatbotManager.onToolCall(function(event) {
    console.log('Tool call:', event.metadata);
  });

  chatbotManager.onError(function(event) {
    console.error('Error:', event.metadata);
  });
});

Yonetici Metodlari Referansi

Method	Parameters	Description
`onSessionCreated(fn)`	`fn: () => void`	Oturum olusturulmasini dinle
`onWindowOpened(fn)`	`fn: () => void`	Pencere acilmasini dinle
`onWindowClosed(fn)`	`fn: () => void`	Pencere kapanmasini dinle
`onMessageSent(fn)`	`fn: (event) => void`	Kullanici mesajlarini dinle
`onMessageReceived(fn)`	`fn: (event) => void`	Bot yanitlarini dinle
`onFormDataSent(fn)`	`fn: (event) => void`	Form gonderimlerini dinle
`onFeedback(fn)`	`fn: (event) => void`	Kullanici geri bildirimini dinle
`onToolCall(fn)`	`fn: (event) => void`	Arac yurutmelerini dinle
`onError(fn)`	`fn: (event) => void`	Hatalari dinle
`openChat()`	—	Sohbet panelini acar
`closeChat()`	—	Sohbet panelini kapatir

Ozel Sohbet Aktivasyonu: Butonu Gizleme ve Tiklama ile Acma

Chatbot’un ne zaman gorunecegini tamamen kontrol etmek icin, varsayilan kayan butonu gizleyin ve sohbeti programatik olarak acin — ornegin, kendi ozel butonunuzdan.

Tam Ornek

<!-- Your custom chat button -->
<button id="my-chat-button">Chat with us</button>

<!-- FlowHunt integration with hidden default button -->
<script id="fh-chatbot-script-YOUR_CHATBOT_ID">
  var currentScript = document.currentScript
    || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
    + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

  script.onload = function() {
    window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
      showChatButton: false
    });

    window.FHChatbot_YOUR_CHATBOT_ID.init(function(chatbotManager) {
      // Open chat when your custom button is clicked
      document.getElementById('my-chat-button')
        .addEventListener('click', function() {
          chatbotManager.openChat();
        });
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

Chatbot Hazir Oldugunda Ozel Buton Gosterme

Gelismis etkilesimler olusturmak icin gizli aktivasyonu olay dinleyicileriyle birlestirebilirsiniz:

<button id="open-chat" style="display:none;">Need help?</button>

<script>
// Show a custom button only when the chatbot is ready
window.addEventListener('onFHChatbotReady', function() {
  document.getElementById('open-chat').style.display = 'block';
});
</script>

<!-- FlowHunt integration -->
<script id="fh-chatbot-script-YOUR_CHATBOT_ID">
  var currentScript = document.currentScript
    || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
    + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

  script.onload = function() {
    window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
      showChatButton: false
    });

    window.FHChatbot_YOUR_CHATBOT_ID.init(function(chatbotManager) {
      document.getElementById('open-chat')
        .addEventListener('click', function() {
          chatbotManager.openChat();
        });
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

Eksiksiz Entegrasyon Ornegi

Yapilandirma gecersiz kilma, olay takibi ve ozel sohbet aktivasyonunu birlikte gosteren tam calisir bir ornek:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>FlowHunt Chatbot Integration</title>
</head>
<body>
  <h1>My Website</h1>
  <button id="open-chat-btn">Talk to our AI assistant</button>
  <button id="close-chat-btn">Close chat</button>

  <!-- Subscribe to events before the chatbot loads -->
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('onFHChatbotReady', function() {
      console.log('Chatbot widget is ready');
    });

    window.addEventListener('onFHChatbotSessionCreated', function() {
      console.log('New chat session started');
    });

    window.addEventListener('onFHMessageSent', function(event) {
      console.log('User message:', event.detail.metadata.content);
    });

    window.addEventListener('onFHMessageReceived', function(event) {
      console.log('Bot response:', event.detail.metadata.message);
    });

    window.addEventListener('onFHFeedback', function(event) {
      var fb = event.detail.metadata;
      if (fb.feedback === 'P') {
        console.log('Positive feedback on message', fb.message_id);
      } else {
        console.log('Negative feedback on message', fb.message_id);
      }
    });

    window.addEventListener('onFHError', function(event) {
      console.error('Chatbot error:', event.detail.metadata);
    });
  });
  </script>

  <!-- FlowHunt integration -->
  <script id="fh-chatbot-script-YOUR_CHATBOT_ID">
    var currentScript = document.currentScript
      || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

    var script = document.createElement('script');
    script.async = true;
    script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
      + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

    script.onload = function() {
      window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
        showChatButton: false,
        headerTitle: 'AI Assistant',
        maxWindowWidth: '600px',
        flowVariables: {
          source: 'website',
          page: window.location.pathname
        },
        urlSuffix: '?utm_source=chatbot'
      });

      window.FHChatbot_YOUR_CHATBOT_ID.init(function(chatbotManager) {
        document.getElementById('open-chat-btn')
          .addEventListener('click', function() {
            chatbotManager.openChat();
          });

        document.getElementById('close-chat-btn')
          .addEventListener('click', function() {
            chatbotManager.closeChat();
          });
      });
    };

    if (currentScript && currentScript.parentNode) {
      currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
    } else {
      document.head.appendChild(script);
    }
  </script>
</body>
</html>

Sıkça sorulan sorular

FlowHunt JS API ile hangi olaylari dinleyebilirim?: FlowHunt JS API 10 olay yayinlar: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall ve onFHError. Bunlara window.addEventListener kullanarak veya chatbot yoneticisinin callback metodlari araciligiyla abone olabilirsiniz.
Varsayilan sohbet butonunu nasil gizleyip chatbot'u programatik olarak acabilirim?: Varsayilan butonu gizlemek icin showChatButton: false yapilandirma secenegini kullanin, ardindan chatbot'u kendi kosullarinizda acmak icin chatbotManager.openChat() cagirin — ornegin, ozel bir buton tiklamasinda.
Yonetici callback metodlari ile window.addEventListener arasindaki fark nedir?: Her iki yaklasim da calisir. Yonetici callback metodlari (ornegin chatbotManager.onMessageSent(fn)) init callback'i icinde cagrilir ve yonetici ornegine baglidir. window.addEventListener yaklasimi (ornegin window.addEventListener('onFHMessageSent', fn)) sayfanizda herhangi bir yerde, hatta chatbot yuklenmeden once bile ayarlanabilir.
Akis degiskenlerini kullanarak chatbot'a ozel verileri nasil gonderirim?: Kullanici kimlligi, e-posta veya sayfa URL'si gibi anahtar-deger ciftlerini gondermek icin setConfig() icerisindeki flowVariables yapilandirma secenegini kullanin. Bu degiskenler, kisisellestirilmis yanitlar icin chatbot akisinizda kullanilabilir hale gelir.
Olay isleyicilerinde hangi veriler mevcuttur?: Veri tasiyan olaylar bunu event.detail.metadata icerisinde icerir. Ornegin, onFHMessageSent mesaj icerigini ve zaman damgasini, onFHMessageReceived flow_id, message_id ve mesaj metnini, onFHFeedback ise message_id ve geri bildirimin olumlu mu yoksa olumsuz mu oldugunu icerir.