JS API Integration

FlowHunt JS API v2インテグレーションの完全リファレンス。チャットボットの埋め込み、全11イベントへのサブスクライブ、フロー変数の使用、sendHook()による会話中のChat Hookトリガー発火、URLパラメータによるインタラクション追跡、チャットウィンドウのプログラム制御の方法を解説します。

FlowHunt JavaScript API Chatbot Integration

FlowHunt JS APIは、チャットボットとウェブサイトの連携を完全に制御する機能を提供します。v2インテグレーションコードを使用すると、チャットボットの埋め込み、ライフサイクルおよびインタラクションイベントへのサブスクライブ、フロー変数による動的データの受け渡し、sendHook()による会話中のChat Hookトリガー発火、URLパラメータによるインタラクション追跡、チャットウィンドウのプログラム制御が可能です。

このガイドでは、JS APIのすべての側面を、コピーしてプロジェクトに適用できるコード例とともに解説します。

インテグレーションコード（v2）

以下のスニペットをHTMLの閉じタグ</body>の直前にコピーして貼り付けてください。YOUR_CHATBOT_IDとYOUR_WORKSPACE_IDは、FlowHuntチャットボット設定の値に置き換えてください。

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

グローバル変数名（window.FHChatbot_YOUR_CHATBOT_ID）のチャットボットIDは、ハイフンの代わりにアンダースコアを使用します。

setConfig()による設定のオーバーライド

init()を呼び出す前に、setConfig()を使用してデフォルトのチャットボット設定をオーバーライドできます：

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

利用可能な設定オプション

OptionTypeDescription
headerTitlestringカスタムヘッダータイトルテキスト
maxWindowWidthstringチャットウィンドウの最大幅（例："700px"）
maxWindowHeightstringチャットウィンドウの最大高さ
inputPlaceholderstringメッセージ入力欄のプレースホルダーテキスト
showChatButtonbooleanデフォルトのフローティングチャットボタンの表示・非表示
openChatPanelbooleanページ読み込み時にチャットパネルを自動的に開く
flowVariablesobjectフローに渡されるカスタムデータのキーと値のペア。値はJSONシリアライズ可能な任意の型（文字列、数値、ブール値、オブジェクト、配列）が指定できます。
urlSuffixstringチャットボットが生成するすべてのURLに追加されるクエリ文字列
cookieConsentbooleanCookieによるセッション永続化を有効にする
embeddedstring埋め込みモードを有効にする（閉じるボタンなし）
themestringテーマモード

フロー変数：動的データの受け渡し

flowVariablesは、チャットボットが作成するすべてのセッションにマージされます。これらは通常、ユーザーのID、プラン、現在のロケールなど、ページ読み込み時にわかっている静的なコンテキストとして使用されます。

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

チャットが開いた後にユーザーがナビゲーションした場合、ここで渡された値は古くなります。会話中にこれらを更新するには、options.flowVariablesを指定してchatbotManager.sendHook()を呼び出してください。詳細は下記の会話中のホスト→フロー間通信を参照してください。

URLサフィックス：チャットボットインタラクションの追跡

urlSuffixパラメータは、チャットボットが生成するすべてのURLにクエリ文字列を追加します。これは、分析ツールでチャットボット経由のトラフィックを追跡するのに便利です：

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

ユースケース：

  • コンバージョン追跡 — Google Analyticsでチャットボットインタラクションからのコンバージョンを追跡。
  • ユーザー行動分析 — チャットボットとのやり取り後のユーザー行動を分析。
  • キャンペーン帰属 — チャットボットエンゲージメントを促進するキャンペーンの成果を帰属。

会話中のホスト→フロー間通信

2026年4月にFlowHunt Chat Hook機能の一環として追加されました。

シングルページアプリケーションでは、ユーザーが画面間を移動している間もチャットウィンドウは開いたままになるのが一般的です。チャットが起動した後は、setConfig()経由で渡されたflowVariablesは古くなり、ホストページ上で発生した出来事をフローに通知する手段がありません。sendHook(name, payload, options?)という単一のマネージャーメソッドが、「トリガーの発火」と「コンテキストの更新だけ」の両方のユースケースをカバーします：

  • nameと（オプションで）payloadを渡してフローのChat Hookトリガーを発火させます。フロー作成者はキャンバス上に1つのChat Hookノードを配置し、{ChatHook.hook_name}で分岐して動作を決定します。
  • options.flowVariablesを渡すと、同時にセッション変数をマージできます。値はトリガー発火前に永続化され、セッションの残りの間も利用可能になります。
  • フローにChat Hookトリガーがない場合、呼び出しはサイレントな200のno-opとなります：options.flowVariablesは引き続きマージされますが、トリガーは実行されず、クレジットも消費されません。これにより、ホストページはフロー作成者がトリガーを配線済みかどうかを知らずに、sendHook()を楽観的に呼び出すことができます。

sendHook()はセッションが存在する前に呼び出しても安全です（内部でバッファリングされ、セッションが作成されると一括処理されます）。また、ホストページに対して例外を投げることはありません。ネットワークエラーはconsole.warnでログに記録されるのみです。

入力制限

sendHook()に適用されるサーバー側およびクライアント側の境界です。これらに違反してもクラッシュは起こりません。バックエンドはHTTP 422を返し、マネージャーは例外を投げずにconsole.warnでログに記録します。

ConstraintLimitWhere enforcedOn violation
sendHookのnameの長さ1〜256文字バックエンド（Pydantic）HTTP 422、トリガーは発火しない
options.flowVariables内のキー数64以下バックエンド（Pydantic）HTTP 422、何も永続化されない
options.flowVariables内の各キーの長さ128文字以下バックエンド（Pydantic）HTTP 422、何も永続化されない
マネージャーがバッファリングするセッション前の呼び出し数50ウィジェット（ブラウザ内）最も古いキュー済み呼び出しが破棄され、console.warnが記録される

セッション前のバッファ上限が問題となるのは、セッション作成が無期限に失敗するページ（例：永続的なネットワークエラー）のみです。通常の状況下では、onFHChatbotSessionCreatedが発火するとすぐにキューがフラッシュされます。

1. Chat Hookトリガーの追加（フロー作成者側）

  1. FlowHuntエディタでチャットボットに関連付けられたフローを開きます。
  2. Chat Hookトリガーノードをキャンバスにドラッグします。エディタはフローごとに1つのトリガーのみを許可します。複数は使用できません。
  3. （オプション）Validate Payload Schemaをオンにして、受信ペイロードが一致すべきJSON Schemaを定義します。バリデーションはステップ内で実行されます。不一致はフローエラーイベントとして表面化します（エンドポイントは依然として200を返します。エラーはonFHError経由で確認できます）。
  4. トリガーの出力（hook_name、payload、flow_variables）を、発火させたい下流のステップ（Generator、Chat Output、Tool Calls、hook_nameでの条件分岐など）に配線します。
  5. フローを公開します。

2. フロー内で異なるhook名による分岐

ホストページがsendHook()に渡すnameは、フローが分岐するためのラベルであり、ルーティングキーではありません。バックエンドは名前をノードと照合しません。代わりに、フローの単一のChat Hookトリガーが発火し、名前を{ChatHook.hook_name}として公開します。これをフローロジック内で参照して動作を決定します。

システムプロンプトの例：

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.

より複雑なルーティングが必要な場合は、{ChatHook.hook_name}に対する条件分岐ステップを配線して、複数の下流パスへ分岐させてください。

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

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

引数

ArgumentTypeRequiredDescription
namestringはい{ChatHook.hook_name}としてフローに転送されるラベル。トリガーは値に関係なく発火します。フローロジックでこの値に基づき分岐します。
payloadobjectいいえ{ChatHook.payload}としてトリガーに渡されるJSONペイロード。有効化されている場合はノードのスキーマに対してバリデーションされます。デフォルトは{}。
options.flowVariablesobjectいいえトリガー発火前にマージされるセッション変数。下流のステップおよび将来のユーザーメッセージで利用可能です。

動作

  • onFHChatbotSessionCreatedの前に呼び出しても安全です。呼び出しはバッファリングされ、セッションが存在するとフラッシュされます。バッファには上限があります。詳細は上記の入力制限を参照してください。
  • フローにChat Hookトリガーがない場合、リクエストはサイレントな200のno-opになります。これにより、ホストページはフロー作成者がトリガーを配線する前に、sendHook()を楽観的に呼び出すことができます。options.flowVariablesはその場合でも永続化されるため、同じ呼び出しがコンテキストのみの更新としても機能します。
  • Chat Hookトリガーでスキーマバリデーションが有効になっており、ペイロードが失敗した場合、バリデーションはステップ内で実行されます。エンドポイントは200を返しますが、フローはステップエラーイベントを発行します（onFHError経由で観測可能）。
  • nameとoptions.flowVariablesには境界があります。詳細は上記の入力制限を参照してください。違反時はHTTP 422が返り、何も永続化されません。
  • 成功した呼び出しは、options.flowVariablesが指定されていた場合、onFHChatbotFlowVariablesUpdateイベントを発行します（イベントリファレンスを参照）。
  • 例外を投げることは決してありません。ネットワーク障害および2xx以外の応答はconsole.warn経由でログに記録されます。

例 — SPAナビゲーション時の積極的な提案

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

例 — コンテキストのみの更新（Chat Hookが配線されていない場合）

フローにChat Hookトリガーがない場合、呼び出しはサイレントな200となります。そのため、同じAPIで何も発火させずにflow_variablesを同期し続けることができます：

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. フロー作成者がこれらの値を利用する方法

  • {ChatHook.hook_name}および{ChatHook.payload.foo} — sendHook('x', { foo: 1 })経由で渡された値はChat Hookトリガーの実行パスに公開されます。フックの発火によって開始されたパスでのみ利用可能です。
  • {flow_variables.foo} — options.flowVariables経由で渡された値は、トリガー発火前にセッションの変数バッグへマージされます。すべての実行パス（通常のChat Inputトリガーによるユーザーメッセージを含む）で読み取れます。

次のユーザーメッセージで新しい値を見せたい場合は、options.flowVariablesに入れてください。payload単独では、そのフックによって開始された実行ランにのみ影響します。

イベントリファレンス

FlowHunt JS APIは、windowオブジェクト上で11のカスタムイベントをディスパッチします。すべてのイベントはbubbles: trueとcomposed: trueを持つCustomEvent APIを使用します。

onFHChatbotReady

チャットボットウィジェットが完全にレンダリングされ、使用可能になったときに発火します。

  • イベントデータ：なし。
  • 発火タイミング：ウィジェットのDOMがマウントされ、チャットボタンが表示された後。

onFHChatbotSessionCreated

サーバー上で新しいチャットセッションが作成されたときに発火します。

  • イベントデータ：event.detail.sessionId — 新しく作成されたセッションのID。
  • 発火タイミング：セッション作成APIコールが成功した後。

onFHChatbotWindowOpened

ユーザーがチャットウィンドウを開いたときに発火します。埋め込みモードでは発火しません。

onFHChatbotWindowClosed

ユーザーがチャットウィンドウを閉じたときに発火します。埋め込みモードでは発火しません。

onFHMessageSent

ユーザーがメッセージを送信したときに発火します。

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

onFHMessageReceived

チャットボットが応答を受信して表示したときに発火します。

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はオプションで、ヒューマンエージェントが関与している場合にのみ存在します。

onFHFormDataSent

ユーザーがチャットボットを通じてフォームデータを送信したときに発火します。

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

onFHFeedback

ユーザーがチャットボットのメッセージに対して高評価／低評価のフィードバックを行ったときに発火します。

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

onFHToolCall

フロー処理中にツールまたはアクションが実行されたときに発火します。flowAssistantおよびflowAssistantV3モードでのみ発火します。

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

onFHError

チャットボットの動作中にエラーが発生したときに発火します。

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

onFHChatbotFlowVariablesUpdate

2026年4月に追加されました。

options.flowVariablesを指定したchatbotManager.sendHook(...)の呼び出しが成功した後に発火します。flowVariablesを省略したsendHook()の呼び出しでは発火しません。

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

マージされた変数を観測するために使用します（例：自身のホスト側の状態を同期する、デバッグ、同じデータに依存するUI要素の再描画など）。

イベントへのサブスクライブ

チャットボットイベントにサブスクライブする方法は2つあります。

方法1：ウィンドウイベントリスナー

ページのどこでもwindow.addEventListenerを使用できます。これはチャットボットが読み込まれる前でも動作します：

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

リスナーを削除するには、ハンドラーの参照を保持しておきます：

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

方法2：マネージャーコールバックメソッド

init()コールバック内で、チャットボットマネージャーの組み込みメソッドを使用します：

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

マネージャーメソッドリファレンス

MethodParametersDescription
onSessionCreated(fn)fn: () => voidセッション作成をリッスン
onWindowOpened(fn)fn: () => voidウィンドウの開きをリッスン
onWindowClosed(fn)fn: () => voidウィンドウの閉じをリッスン
onMessageSent(fn)fn: (event) => voidユーザーメッセージをリッスン
onMessageReceived(fn)fn: (event) => voidボットの応答をリッスン
onFormDataSent(fn)fn: (event) => voidフォーム送信をリッスン
onFeedback(fn)fn: (event) => voidユーザーフィードバックをリッスン
onToolCall(fn)fn: (event) => voidツール実行をリッスン
onError(fn)fn: (event) => voidエラーをリッスン
openChat()—チャットパネルを開く
closeChat()—チャットパネルを閉じる
sendHook(name, payload?, options?) (new)name: string, payload?: object, options?: { flowVariables?: object }実行中のフローでChat Hookトリガーを発火させる（トリガーが配線されていない場合は、options.flowVariablesをサイレントにマージする）

カスタムチャット起動：ボタンの非表示とクリックで開く

チャットボットの表示タイミングを完全に制御するには、デフォルトのフローティングボタンを非表示にし、プログラムでチャットを開きます。例えば、独自のカスタムボタンから開くことができます。

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

チャットボット準備完了時にのみカスタムボタンを表示

非表示起動とイベントリスナーを組み合わせて、高度なインタラクションを作成できます：

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

完全なインテグレーション例

設定オーバーライド、イベント追跡、カスタムチャット起動、新しいsendHook()メソッドを組み合わせた完全な動作例：

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

よくある質問

詳しく見る

FlowHuntチャットボットは顧客のページURLを検出できる？機能・連携・ベストプラクティス
FlowHuntチャットボットは顧客のページURLを検出できる？機能・連携・ベストプラクティス

FlowHuntチャットボットは顧客のページURLを検出できる？機能・連携・ベストプラクティス

FlowHuntチャットボットが顧客がチャットを開始したウェブページのURLを検出できるか、なぜ標準ではできないのか、連携によるコンテキスト受け渡しの方法、実装上の専門的な推奨事項について解説します。...

1 分で読める
chatbot integration +2
interactive-mcp
interactive-mcp

interactive-mcp

FlowHuntをinteractive-mcpと統合することで、大規模言語モデルとユーザー間の安全でリアルタイムな通信をローカルマシン上で実現します。ユーザー入力の取得、OS通知の配信、永続的なチャットセッションの維持により、インタラクティブなAI駆動ワークフローをNode.js/TypeScriptで管理できます。...

1 分で読める
AI interactive-mcp +7
AIチャットボット
AIチャットボット

AIチャットボット

FlowHuntで高度なAIチャットボットを展開。コーディング不要でAIツールを構築・カスタマイズ・統合。カスタマーサービス、マーケティング、営業チームに最適です。...

1 分で読める