FlowHunt JS API：高度なチャットボットカスタマイズ

FlowHuntの高度なチャットボット機能を解放：フロー変数でパーソナライズ、URLサフィックスでトラッキング、イベントハンドラー活用、チャット起動を自在にコントロール。

デモを予約 今すぐ試す

Flowhuntは、チャットボットの動作を深くカスタマイズし、あなたのサイトやアプリケーションにシームレスに統合するための強力な機能を備えています。このページでは、フロー変数・URLパラメータ・イベント駆動コールバック・カスタムチャット起動ロジックなど、高度なカスタマイズ方法をご紹介します。

フロー変数：チャット体験のパーソナライズ

フロー変数は、チャットボットに動的なデータを渡し、本当にパーソナライズされた体験を実現します。これらの変数には、ユーザーデータ・セッションデータ・その他関連情報など、あらゆる情報を格納可能です。

flowVariableの使い方

flowVariableはFHChatbot.initChatbot()の設定項目の一部です。これはオブジェクトであり、それぞれのキーと値のペアが変数名と値を定義します。例：ユーザーのIPアドレスとユーザーIDを渡す場合

<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": /* IPアドレスを取得するコード */ ,
        "userId":  /* ユーザーIDを取得するコード */
      }
    });
  }
);
</script>

重要な注意点：

  • /* IPアドレスを取得するコード */や/* ユーザーIDを取得するコード */は、システムからこれらの値を取得するための実際のロジックに置き換えてください。多くの場合、サーバーサイド変数・ローカルストレージ・認証情報などを参照します。
  • 渡した変数はチャットボット内ロジックで利用でき、動的な応答やパーソナライズされたワークフローを実現します。
  • チャットボットロジックではこれらの変数を読み取り、会話をパーソナライズし、よりコンテキストに合わせることが可能です。

urlSuffix：チャットボットのやり取りを追跡・分析

urlSuffixパラメータは、チャットボットが呼び出すすべてのURLの末尾にクエリ文字列を付加します。これは、Googleアナリティクスなどの分析ツールでチャットボットの起点や効果をトラッキングするのに非常に便利です。

urlSuffixの使い方

希望するクエリ文字列をurlSuffixプロパティにセットしてください。例：

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

この例では?utm_source=your-custom-sourceがチャットボットが発行する全てのURLに付加され、分析プラットフォームでチャットボット経由トラフィックを追跡できます。

主な利点

  • コンバージョンの追跡: どのチャットボット経由のやり取りがウェブサイトで最も多くの成果につながるかを可視化
  • ユーザー行動の分析: チャットボット利用後にユーザーがどのようにサイトを回遊するかを把握
  • キャンペーン効果の測定: チャットボット利用を促進するキャンペーンの効果を的確に測定

イベントハンドラー：チャットボットのアクションへ反応

Flowhuntでは、チャットボット内で特定のイベント発生時にカスタム関数を実行するイベントハンドラーを設定できます。これによりユーザー体験を細かく制御できます。主なイベントハンドラーは以下の通りです。

  • onSessionCreated: 新しいチャットボットセッションが開始されたときに発火（セッションのリスタートも含む）
  • onWindowOpened: チャットウィンドウが開いたときに発火
  • onWindowClosed: チャットウィンドウが閉じたときに発火
  • onError: チャットボット内でエラーが発生したときに発火
  • onMessageReceived: ボットがメッセージを送信したとき、またはユーザーが入力したときに発火
  • onMessageSent: ユーザーがメッセージを送信したときに発火

イベントハンドラーの使い方

FHChatbot.initChatbotが返すfhChatbot変数を利用し、fhChatbot.onSessionCreated()などでリスナーを追加します。例：

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
// チャットボットがページで準備完了したときのイベントをキャッチ
window.addEventListener("onFHChatbotReady", (e) => {
  console.log("チャットボットの準備ができ、チャットボタンが表示されています。");
});

(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 () {
      // セッション開始時のカスタムロジック（APIコールやデータ保存など）
      console.log("セッションが開始されました");
    });
    
    fhChatbot.onWindowOpened(function () {
      // ウィンドウオープン時のカスタムロジック
      console.log("ウィンドウが開きました");
    });
    
    fhChatbot.onWindowClosed(function () {
      // ウィンドウクローズ時のカスタムロジック
      console.log("ウィンドウが閉じました");
    });
    
    fhChatbot.onError(function (e) {
      // エラー発生時のカスタムロジック（エラー監視ツールへの記録など）
      console.log(e.metadata);
      console.log("ウィンドウエラー");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // ボットが応答した際のカスタムロジック
      console.log("チャットボットが応答しました");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // ユーザーが入力を送信した際のカスタムロジック
      console.log("ユーザーが入力を送信しました");
    });
  }
);
</script>

それぞれのイベントハンドラー関数で、ユーザーの行動に応じた動的なチャットボット制御が可能です。

活用例：

  • 分析・レポート: onSessionStartなどのイベントを利用してセッション開始や利用状況を計測
  • 動的UI更新: チャットボットの状態に応じてページ表示を変更（例：チャット利用中のみ特定メッセージ表示）
  • エラーハンドリング: チャットボットエラーをキャッチし、ユーザー体験を向上
  • カスタムユーザーフロー: チャット操作に応じて独自ロジックを実装

カスタムチャット起動：任意のタイミングで開閉

showChatButton: falseを設定すると、デフォルトのチャットボタンが非表示になります。その後は、独自のロジックでチャットウィンドウをプログラム的に開閉可能です。これによりユーザーインターフェースを完全にコントロールできます。

カスタム起動の使い方

  1. デフォルトボタンを無効化: FHChatbot.initChatbot()オプションにshowChatButton: falseを追加
  2. プログラム操作: fhChatbot.openChat()やfhChatbot.closeChat()で独自のイベントに応じて表示・非表示を制御
<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
    }); 
    
    // 例：ユーザーがカスタムボタンをクリックした場合
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // 例：ユーザーがカスタムクローズボタンで閉じた場合
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

この例では、カスタムボタンへのリスナー追加でチャットの開閉を制御しています。

利点：

  • カスタムデザイン: サイトのデザインや雰囲気に合わせて、独自ボタンやトリガーでチャットを呼び出し可能
  • ユーザーフローコントロール: ユーザージャーニーの特定のタイミングでチャットボットを起動し、状況に応じたサポートを提供
  • 戦略的配置: アニメーションや視覚的な工夫で、最適なタイミングでユーザーの注意をチャットボットへ誘導

フロー変数・URLサフィックス・イベントハンドラー・カスタムチャット起動を活用することで、Flowhuntで極めて柔軟かつ魅力的なチャットボット体験を作り上げることができます。これらの高度なオプションを使いこなせば、あなたのビジネスニーズやユーザーの期待に完璧に合ったチャットボットを実現できます。

よくある質問

FlowHuntのフロー変数とは何ですか？

フロー変数は、ユーザーやセッション情報などの動的データをFlowHuntチャットボットに渡すためのものです。これにより、ユーザーごとにパーソナライズされ、コンテキストを考慮した会話が可能になります。

FlowHuntでチャットボットのやり取りをどう追跡できますか？

チャットボットが呼び出すすべてのURLにカスタムクエリ文字列を付加するurlSuffixパラメータを使用します。これによって、Googleアナリティクスなどの分析ツールでチャットボット経由のトラフィックやコンバージョンの追跡が簡単になります。

FlowHunt JS APIで利用できるイベントハンドラーは？

FlowHuntは、onSessionCreated、onWindowOpened、onWindowClosed、onError、onMessageReceived、onMessageSentなどのイベントハンドラーをサポートしており、チャットボット主導のユーザー操作を完全に制御できます。

FlowHuntチャットボットをプログラムで起動・制御するには？

デフォルトボタンを非表示にするには'showChatButton'をfalseに設定し、その後fhChatbot.openChat()やfhChatbot.closeChat()を使って、独自のロジックやユーザー操作に応じてチャットボットを開閉できます。

FlowHuntで高度なチャットボットカスタマイズを行う利点は？

高度なカスタマイズにより、ユーザー体験のパーソナライズ、分析連携、動的アクションのトリガー、チャットボット体験をサイトデザインやビジネス要件に完全に合わせることが可能です。

FlowHuntの高度なチャットボットカスタマイズをお試しください

FlowHuntの高度なJS API機能でチャットボットを次のレベルへ。パーソナライズ・分析・あらゆる面を細やかにコントロール！

デモを予約 今すぐ試す

詳細はこちら

HubSpotチャットボット
HubSpotチャットボット

HubSpotチャットボット

FlowHuntでHubSpotチャットボットを強化しましょう。返信、データソース、会話フローをより細かく制御できます。

1 分で読める
AI Chatbot +4
Freshchat連携
Freshchat連携

Freshchat連携

FlowHuntはFreshchatをはじめとする主要なカスタマーサービスソリューションと連携可能です！AIチャットボットから人によるサポートへのスムーズな切り替えを、Freshchatの連携で実現します。...

1 分で読める
Freshchat AI Integration +4
フロー
フロー

フロー

フローはFlowHuntの頭脳です。ノーコードのビジュアルビルダーで、最初のコンポーネントの配置からWebサイトへの統合、チャットボットの展開、テンプレートの活用まで、フローの作り方を学びましょう。...

1 分で読める
AI No-Code +4