JS API Entegrasyonu

FlowHunt JS API v2 entegrasyonu icin eksiksiz referans. Chatbot’u gomun, 11 olayin tumune abone olun, akis degiskenlerini kullanin, sendHook() ile sohbet sirasinda Chat Hook tetikleyicisini calistirin, URL parametreleriyle etkilesimleri takip edin ve sohbet penceresini programatik olarak kontrol edin.

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, sendHook() ile sohbet sirasinda Chat Hook tetikleyicisini calistirabilir, 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)

Asagidaki snippet’i HTML’inize kapanis </body> etiketinden hemen once kopyalayip yapistirin. YOUR_CHATBOT_ID ve YOUR_WORKSPACE_ID degerlerini FlowHunt chatbot ayarlarinizdaki degerlerle degistirin.

<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>

Global degisken adindaki chatbot kimligi (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 initialised with custom config
    });
  };

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

Mevcut Yapilandirma Secenekleri

SecenekTipAciklama
headerTitlestringOzel baslik metni
maxWindowWidthstringMaksimum sohbet penceresi genisligi (ornegin "700px")
maxWindowHeightstringMaksimum sohbet penceresi yuksekligi
inputPlaceholderstringMesaj giris alani icin yer tutucu metin
showChatButtonbooleanVarsayilan kayan sohbet butonunu goster veya gizle
openChatPanelbooleanSayfa yuklendiginde sohbet panelini otomatik olarak ac
flowVariablesobjectAkisa gonderilen ozel verilerin anahtar-deger ciftleri. Degerler herhangi bir JSON-serilenebilir tipte olabilir (string, sayi, boolean, nesne, dizi).
urlSuffixstringChatbot tarafindan olusturulan tum URL’lere eklenen sorgu dizesi
cookieConsentbooleanCerezler araciligiyla oturum kalicilgini etkinlestir
embeddedstringGomulu modu etkinlestirmek icin ayarlayin (kapatma butonu yok)
themestringTema modu

Akis Degiskenleri: Dinamik Veri Gonderme

flowVariables, chatbot’un olusturdugu her oturuma birlestirilir. Genellikle statik baglam icin kullanilirlar (sayfa yuklenirken bilinen): kullanicinin kimligi, plani, mevcut yerel ayari vb.

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

Sohbet acildiktan sonra kullanici sayfa degistirirse, burada gonderilen degerler eskimis hale gelir. Bunlari sohbet sirasinda guncellemek icin chatbotManager.sendHook() cagirin ve options.flowVariables kullanin — asagidaki Sohbet sirasinda host → akis iletisimi bolumune bakin.

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.
Logo

İşinizi büyütmeye hazır mısınız?

Bugün ücretsiz denemenizi başlatın ve günler içinde sonuçları görün.

Demo talep et Giriş yap

Sohbet sirasinda host → akis iletisimi

Nisan 2026’da FlowHunt Chat Hook ozelliginin bir parcasi olarak eklendi.

Tek sayfali uygulamalarda sohbet penceresi, kullanici ekranlar arasinda gezinirken genellikle acik kalir. Sohbet calisir hale geldiginde, setConfig() araciligiyla gonderilen flowVariables eskimis olur ve host sayfada olan bir sey hakkinda akisi uyarmanin bir yolu yoktur. Tek bir yonetici metodu — sendHook(name, payload, options?) — hem “tetikleyici calistir” hem de “sadece baglami guncelle” kullanim durumlarini kapsar:

  • Akisin Chat Hook tetikleyicisini calistirmak icin bir name ve (istege bagli olarak) bir payload gonderin. Akis yazari tuvale bir Chat Hook dugumu birakir ve ne yapacagina karar vermek icin {ChatHook.hook_name} uzerinde dallar.
  • Oturum degiskenlerini ayni anda birlestirmek icin options.flowVariables gonderin — degerler tetikleyici calistirilmadan once kalici hale getirilir ve oturumun geri kalanina erisilebilir kalir.
  • Akisin Chat Hook tetikleyicisi yoksa, cagri sessiz bir 200 no-op’tur: options.flowVariables yine de birlestirilir, ancak hicbir tetikleyici calismaz ve hicbir kredi tahsil edilmez. Bu, host sayfalarin akis yazarinin henuz bir tetikleyici baglayip baglamadigini bilmeden sendHook() cagirabilecegi anlamina gelir.

sendHook(), oturum mevcut olmadan once cagrildiginda guvenli bir no-op’tur (dahili olarak tamponlanir ve oturum olusturuldugunda bosaltilir) ve host sayfaya asla istisna firlatmaz — ag hatalari yalnizca console.warn araciligiyla loglanir.

Giris sinirlari

sendHook() icin gecerli olan sunucu ve istemci tarafi sinirlar. Bunlari ihlal etmek bir cokus degildir — backend HTTP 422 dondurur ve yonetici istisna firlatmadan console.warn araciligiyla loglar.

KisitlamaSinirNerede uygulanirIhlal durumunda
sendHook name uzunlugu1–256 karakterBackend (Pydantic)HTTP 422, tetikleyici calismaz
options.flowVariables icindeki anahtar sayisi≤ 64Backend (Pydantic)HTTP 422, hicbir sey kalici hale getirilmez
options.flowVariables icindeki her anahtarin uzunlugu≤ 128 karakterBackend (Pydantic)HTTP 422, hicbir sey kalici hale getirilmez
Yonetici tarafindan tamponlanan oturum oncesi cagrilar50Widget (tarayicida)En eski kuyruktaki cagri dusurulur ve console.warn loglanir

Oturum oncesi tampon ust siniri yalnizca oturum olusturmanin sureklikle basarisiz oldugu sayfalarda onemlidir (ornegin kalici bir ag hatasi). Normal kosullar altinda kuyruk, onFHChatbotSessionCreated tetiklenir tetiklenmez bosaltilir.

1. Chat Hook tetikleyicisi ekleme (akis yazari tarafi)

  1. Chatbot’unuzla iliskili akisi FlowHunt editorunde acin.
  2. Tuvale bir Chat Hook tetikleyici dugumu surukleyin. Editor akis basina tek bir tetikleyici uygular — birden fazla izin verilmez.
  3. (Istege bagli) Validate Payload Schema secenegini acin ve gelen payload’in eslemesi gereken bir JSON Schema tanimlayin. Dogrulama adim icinde calisir — bir uyusmazlik bir akis hata olayi olarak yuzeye cikar (uc nokta yine 200 doner; hata onFHError araciligiyla gorulebilir).
  4. Tetikleyicinin ciktilarini (hook_name, payload, flow_variables) calistirmak istediginiz alt akis adimlarina baglayin (Generator, Chat Output, Tool Calls, hook_name uzerinde kosullu dallar vb.).
  5. Akisi yayinlayin.

2. Akis icinde farkli hook adlarinda dallanma

Host sayfanin sendHook() ile gonderdigi name, akisinizin uzerinde dallanmasi icin bir etikettir, bir yonlendirme anahtari degildir — backend isimleri dugumlerle eslestirmez. Bunun yerine, akisin tek Chat Hook tetikleyicisi calisir ve adi {ChatHook.hook_name} olarak gosterir, bu da ne yapacaginiza karar vermek icin akis mantiginda referans alirsiniz.

Ornek sistem istemi:

If {ChatHook.hook_name} is "screen_changed", briefly summarise the page at
{ChatHook.payload.url}. If it is "user_action", acknowledge the action and
update memory. Otherwise, continue the conversation normally.

Daha karmasik yonlendirme icin, {ChatHook.hook_name} uzerinde kosullu bir adim baglayin ve birden fazla alt yola dallanin.

3. chatbotManager.sendHook(name, payload, options?)

chatbotManager.sendHook(
  name: string,
  payload?: Record<string, unknown>,
  options?: { flowVariables?: Record<string, unknown> }
): Promise<void>;

Argumanlar

ArgumanTipGerekliAciklama
namestringevetAkisa {ChatHook.hook_name} olarak iletilen etiket. Tetikleyici degerden bagimsiz olarak calisir; akis mantiginiz uzerinde dallanir.
payloadobjecthayirTetikleyiciye {ChatHook.payload} olarak iletilen JSON payload. Etkinlestirilirse dugumun semasiyla dogrulanir. Varsayilan {}.
options.flowVariablesobjecthayirTetikleyici calistirilmadan once birlestirilecek oturum degiskenleri. Alt akis adimlari ve gelecek kullanici mesajlari icin kullanilabilir.

Davranis

  • onFHChatbotSessionCreated‘tan once cagirmak guvenlidir; cagri tamponlanir ve oturum mevcut oldugunda bosaltilir. Tampon sinirlandirilmistir — yukaridaki Giris sinirlari bolumune bakin.
  • Akisin Chat Hook tetikleyicisi yoksa, istek sessiz bir 200 no-op’tur — bu nedenle host sayfalar akis yazari bir tetikleyici baglamadan once sendHook() cagirabilirler. Bu durumda bile options.flowVariables kalici hale getirilir, dolayisiyla ayni cagri yalnizca baglam guncellemesi olarak hizmet eder.
  • Chat Hook tetikleyicisinde sema dogrulamasi etkinlestirilmis ve payload basarisiz olursa, dogrulama adim icinde calisir — uc nokta 200 doner ancak akis bir adim hata olayi yayinlar (onFHError araciligiyla gozlenebilir).
  • name ve options.flowVariables sinirlandirilmistir — yukaridaki Giris sinirlari bolumune bakin. Ihlaller HTTP 422 doner ve hicbir sey kalici hale getirilmez.
  • Basarili cagrilar, options.flowVariables saglandiysa bir onFHChatbotFlowVariablesUpdate olayi yayinlar (Olay Referansina bakin).
  • Asla istisna firlatmaz. Ag hatalari ve 2xx olmayan yanitlar console.warn araciligiyla loglanir.

Ornek — SPA navigasyonunda proaktif oneri

window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
  window.addEventListener('hashchange', function () {
    chatbotManager.sendHook('screen_changed', {
      url: window.location.href,
      screen_name: getScreenName(),
    }, {
      flowVariables: { current_page_url: window.location.href },
    });
  });
});

Ornek — yalnizca baglam guncellemesi (Chat Hook bagli degil)

Akisin Chat Hook tetikleyicisi yoksa, cagri sessiz bir 200’dur — bu nedenle ayni API hicbir sey calistirmadan flow_variables senkronize tutabilir:

window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
  window.addEventListener('hashchange', function () {
    chatbotManager.sendHook('navigate', {}, {
      flowVariables: {
        current_page_url: window.location.href,
        screen_name: getScreenName(),
      },
    });
  });
});

4. Akis yazari bu degerleri nasil tuketir

  • {ChatHook.hook_name} ve {ChatHook.payload.foo} — sendHook('x', { foo: 1 }) ile gonderilen degerler Chat Hook tetikleyicisinin yurutme yolunda gosterilir. Yalnizca hook calistirilmasiyla baslayan yolda kullanilabilir.
  • {flow_variables.foo} — options.flowVariables ile gonderilen degerler, tetikleyici calistirilmadan once oturumun degisken cantasina birlestirilir. Her yurutme yolu (normal Chat Input ile tetiklenen kullanici mesajlari dahil) bunlari okuyabilir.

Bir sonraki kullanici mesajinin yeni bir degeri gormesini istiyorsaniz, onu options.flowVariables icine koyun — payload tek basina yalnizca o hook tarafindan baslatilan yurutme calisitirmasini etkiler.

Olay Referansi

FlowHunt JS API, window nesnesi uzerinde 11 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.

  • Olay verisi: event.detail.sessionId — yeni olusturulan oturumun kimligi.
  • Ne zaman: basarili bir oturum olusturma API cagrisindan sonra.

onFHChatbotWindowOpened

Kullanici sohbet penceresini actiginda tetiklenir. Gomulu modda tetiklenmez.

onFHChatbotWindowClosed

Kullanici sohbet penceresini kapattiginda tetiklenir. Gomulu modda tetiklenmez.

onFHMessageSent

Kullanici bir mesaj gonderdiginde tetiklenir.

event.detail.metadata = {
  content: 'Hello, I need help with...',
  createdAt: '2026-02-19T10:30:00.000Z',
};

onFHMessageReceived

Chatbot bir yanit alip gosterdiginde tetiklenir.

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 istege baglidir ve yalnizca bir insan ajan dahil oldugunda mevcuttur.

onFHFormDataSent

Kullanici chatbot araciligiyla form verisi gonderdiginde tetiklenir.

event.detail.metadata = {
  objectData: { name: 'John', email: 'john@example.com' },
  createdAt: '2026-02-19T10:31:00.000Z',
};

onFHFeedback

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

event.detail.metadata = {
  message_id: 'msg_456',
  content: 'Optional feedback text',
  feedback: 'P', // 'P' = positive, 'N' = negative
};

onFHToolCall

Akis isleme sirasinda bir arac veya eylem yurutuldugunde tetiklenir. Yalnizca flowAssistant ve flowAssistantV3 modlarinda tetiklenir.

event.detail.metadata = {
  metadata: {
    flow_id: 'abc123',
    message_id: 'msg_789',
    message: 'Calling search API...',
  },
  createdAt: '2026-02-19T10:32:00.000Z',
};

onFHError

Chatbot isletimi sirasinda bir hata olustugunda tetiklenir.

event.detail.metadata = {
  metadata: {
    flow_id: 'abc123',
    message_id: 'msg_err',
    message: 'Flow execution failed',
  },
  createdAt: '2026-02-19T10:33:00.000Z',
};

onFHChatbotFlowVariablesUpdate

Nisan 2026’da eklendi.

options.flowVariables saglayan basarili bir chatbotManager.sendHook(...) cagrisindan sonra tetiklenir. flowVariables atlayan sendHook() cagrilari icin tetiklenmez.

event.detail = {
  variables: {
    current_page_url: 'https://example.com/products',
    screen_name: 'products',
  },
};

Birlestirilmis degiskenleri gozlemlemek icin kullanin (ornegin kendi host tarafi durumunuzu senkronize etmek, hata ayiklamak veya ayni veriye bagli bir UI ogesini yeniden olusturmak icin).

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 () {
  window.addEventListener('onFHChatbotReady', function () {
    console.log('Chatbot is ready');
  });

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

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

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

  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);
  });

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

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

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

  window.addEventListener('onFHChatbotFlowVariablesUpdate', function (event) {
    console.log('Variables merged:', event.detail.variables);
  });
});
</script>

Bir dinleyiciyi kaldirmak icin handler referansini saklayin:

var handleMessage = function (event) {
  console.log(event.detail.metadata);
};
window.addEventListener('onFHMessageReceived', handleMessage);
// Later …
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

MetodParametrelerAciklama
onSessionCreated(fn)fn: () => voidOturum olusturulmasini dinle
onWindowOpened(fn)fn: () => voidPencere acilmasini dinle
onWindowClosed(fn)fn: () => voidPencere kapanmasini dinle
onMessageSent(fn)fn: (event) => voidKullanici mesajlarini dinle
onMessageReceived(fn)fn: (event) => voidBot yanitlarini dinle
onFormDataSent(fn)fn: (event) => voidForm gonderimlerini dinle
onFeedback(fn)fn: (event) => voidKullanici geri bildirimini dinle
onToolCall(fn)fn: (event) => voidArac yurutmelerini dinle
onError(fn)fn: (event) => voidHatalari dinle
openChat()—Sohbet panelini acar
closeChat()—Sohbet panelini kapatir
sendHook(name, payload?, options?) (yeni)name: string, payload?: object, options?: { flowVariables?: object }Calisan akista Chat Hook tetikleyicisini calistirir (veya hicbir tetikleyici bagli degilse options.flowVariables‘i sessizce birlestirir)

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.

<button id="my-chat-button">Chat with us</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) {
      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>
  window.addEventListener('onFHChatbotReady', function () {
    document.getElementById('open-chat').style.display = 'block';
  });
</script>

<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, ozel sohbet aktivasyonu ve yeni sendHook() metodunu 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 (event) {
          console.log('New chat session started:', event.detail.sessionId);
        });

        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('onFHChatbotFlowVariablesUpdate', function (event) {
          console.log('Context updated:', event.detail.variables);
        });

        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',
            current_page_url: window.location.href,
          },
          urlSuffix: '?utm_source=chatbot',
        });

        window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
          // Open / close from custom buttons
          document.getElementById('open-chat-btn')
            .addEventListener('click', function () {
              chatbotManager.openChat();
            });
          document.getElementById('close-chat-btn')
            .addEventListener('click', function () {
              chatbotManager.closeChat();
            });

          // Keep the flow's context in sync with SPA navigation and
          // optionally fire the Chat Hook trigger (if the flow has one wired).
          // If the flow has no Chat Hook, the call is a silent 200 — the
          // flow_variables still get merged, so the same line covers both
          // "notify the flow" and "just update context".
          window.addEventListener('hashchange', function () {
            chatbotManager.sendHook('screen_changed', {
              url: window.location.href,
            }, {
              flowVariables: { current_page_url: window.location.href },
            });
          });
        });
      };

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

Sıkça sorulan sorular

Daha fazla bilgi

LiveChat
LiveChat

LiveChat

FlowHunt'ı LiveChat ile entegre ederek akıllı yapay zeka-insan eskalasyonunu etkinleştirin. İhtiyaç duyduğunda konuşmaları LiveChat ajanlarına otomatik olarak d...

4 dakika okuma
AI LiveChat +4