"FlowHunt의 플로우 변수란 무엇인가요?"

"플로우 변수는 사용자 또는 세션 정보와 같은 동적 데이터를 FlowHunt 챗봇에 전달할 수 있게 해줍니다. 이를 통해 각 사용자에게 맞춘 개인화되고 상황에 맞는 대화가 가능합니다."

"FlowHunt로 챗봇 상호작용을 어떻게 추적할 수 있나요?"

"urlSuffix 파라미터를 사용하여 챗봇이 호출하는 모든 URL에 커스텀 쿼리 스트링을 추가할 수 있습니다. 이를 통해 Google Analytics와 같은 분석 도구에서 챗봇 유입 트래픽과 전환을 쉽게 추적할 수 있습니다."

"FlowHunt JS API에서 사용할 수 있는 이벤트 핸들러는 무엇인가요?"

"FlowHunt는 onSessionCreated, onWindowOpened, onWindowClosed, onError, onMessageReceived, onMessageSent와 같은 이벤트 핸들러를 지원하여 챗봇 기반 사용자 상호작용을 완벽하게 제어할 수 있습니다."

"FlowHunt 챗봇을 프로그래밍적으로 활성화하거나 제어하려면 어떻게 해야 하나요?"

"'showChatButton'을 false로 설정하여 기본 버튼을 숨기고, fhChatbot.openChat() 및 fhChatbot.closeChat()을 사용해 커스텀 로직 또는 사용자 행동에 따라 챗봇을 열거나 닫을 수 있습니다."

"FlowHunt에서 고급 챗봇 커스터마이징의 이점은 무엇인가요?"

"고급 커스터마이징을 통해 사용자 여정을 개인화하고, 분석을 통합하며, 동적 액션을 트리거하고, 챗봇 경험을 사이트의 디자인과 비즈니스 요구에 완벽하게 맞출 수 있습니다."

FlowHunt JS API: 고급 챗봇 커스터마이징

플로우헌트 챗봇의 고급 기능을 활용하세요: 플로우 변수로 개인화, URL 접미사로 추적, 이벤트 핸들러 활용, 챗 활성화 제어로 맞춤형 사용자 경험 제공.

AI Chatbot JavaScript API Personalization

데모 예약하기 지금 체험하기

Flowhunt에는 챗봇의 동작을 깊이 있게 맞춤화하고 사이트 또는 애플리케이션과 매끄럽게 통합할 수 있는 강력한 기능들이 가득합니다. 이 페이지에서는 플로우 변수, URL 파라미터, 이벤트 기반 콜백, 커스텀 챗 활성화 로직 등 몇 가지 고급 커스터마이징 방법을 배울 수 있습니다.

플로우 변수: 챗 경험을 개인화하세요

플로우 변수는 챗봇에 동적 데이터를 전달할 수 있는 수단을 제공합니다. 이 변수 안에 무엇이든 저장할 수 있으며, 사용자 데이터, 세션 데이터, 또는 그 외 유의미한 정보가 될 수 있습니다.

flowVariable 사용 방법

flowVariable은 FHChatbot.initChatbot() 설정의 일부입니다. 객체 내 각 key-value 쌍이 변수와 그 값을 정의합니다. 예시 – 사용자의 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": /* Code to obtain IP Address */ ,
        "userId":  /* Code to obtain User ID */
      }
    });
  }
);
</script>

중요 참고사항:

/* Code to obtain IP Address */ 및 /* Code to obtain User ID */는 실제 시스템에서 해당 값을 가져오는 로직으로 교체해야 합니다. 이는 서버 사이드 변수 접근, 로컬 스토리지, 기타 인증 방식 등을 활용할 수 있습니다.
전달된 변수는 챗봇 로직 내에서 사용할 수 있어 동적 응답과 개인화된 워크플로우를 구현할 수 있습니다.
챗봇 로직은 이러한 변수를 읽어서 대화를 개인화하고, 더 상황에 맞는 대화를 할 수 있습니다.

urlSuffix: 챗봇 상호작용 추적 및 분석

urlSuffix 파라미터를 통해 챗봇이 호출하는 모든 URL 끝에 쿼리 스트링을 추가할 수 있습니다. 이는 Google Analytics와 같은 분석 도구를 활용해 챗봇 상호작용의 출처와 효과를 추적하는 데 매우 유용합니다.

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 변수를 사용해 핸들러를 설정할 수 있습니다. 예시:

<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("session started");
    });
    
    fhChatbot.onWindowOpened(function () {
      // 창 열림 시 커스텀 로직 (챗 상단에 콘텐츠 노출 등)
      console.log("window opened");
    });
    
    fhChatbot.onWindowClosed(function () {
      // 창 닫힘 시 커스텀 로직 (챗 상단에 콘텐츠 노출 등)
      console.log("window closed");
    });
    
    fhChatbot.onError(function (e) {
      // 오류 발생 시 커스텀 로직 (에러 추적 도구로 전송 등)
      console.log(e.metadata);
      console.log("window error");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // 봇이 응답했을 때 커스텀 로직
      console.log("chatbot answered");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // 사용자가 입력했을 때 커스텀 로직
      console.log("user sent an input");
    });
  }
);
</script>

각 이벤트 핸들러 함수에서 사용자의 행동에 따라 챗봇이 동적으로 동작하도록 커스텀 로직을 실행할 수 있습니다.

활용 예시:

분석 및 리포팅: onSessionStart 등 이벤트를 활용해 세션 시작, 챗봇 사용량 등 주요 지표를 전송.
동적 UI 업데이트: 챗봇 이벤트에 따라 페이지를 동적으로 변경 (예: 챗 활성화 시 다른 메시지 노출).
에러 핸들링: 챗봇 오류를 감지하고 사용자 경험을 개선.
커스텀 사용자 플로우: 챗 상호작용에 따라 맞춤 로직 실행.

커스텀 챗 활성화: 원하는 방식으로 챗봇 열고 닫기

showChatButton: false로 기본 챗봇 버튼을 숨기고, 원하는 로직에 따라 챗봇 창을 프로그래밍적으로 열거나 닫을 수 있습니다. 이를 통해 사용자 인터페이스를 완벽하게 제어할 수 있습니다.

커스텀 활성화 사용 방법

기본 버튼 비활성화: FHChatbot.initChatbot() 옵션에 showChatButton: false 추가
프로그래밍적으로 제어: 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로 챗봇 상호작용을 어떻게 추적할 수 있나요?: urlSuffix 파라미터를 사용하여 챗봇이 호출하는 모든 URL에 커스텀 쿼리 스트링을 추가할 수 있습니다. 이를 통해 Google Analytics와 같은 분석 도구에서 챗봇 유입 트래픽과 전환을 쉽게 추적할 수 있습니다.
FlowHunt JS API에서 사용할 수 있는 이벤트 핸들러는 무엇인가요?: FlowHunt는 onSessionCreated, onWindowOpened, onWindowClosed, onError, onMessageReceived, onMessageSent와 같은 이벤트 핸들러를 지원하여 챗봇 기반 사용자 상호작용을 완벽하게 제어할 수 있습니다.
FlowHunt 챗봇을 프로그래밍적으로 활성화하거나 제어하려면 어떻게 해야 하나요?: 'showChatButton'을 false로 설정하여 기본 버튼을 숨기고, fhChatbot.openChat() 및 fhChatbot.closeChat()을 사용해 커스텀 로직 또는 사용자 행동에 따라 챗봇을 열거나 닫을 수 있습니다.
FlowHunt에서 고급 챗봇 커스터마이징의 이점은 무엇인가요?: 고급 커스터마이징을 통해 사용자 여정을 개인화하고, 분석을 통합하며, 동적 액션을 트리거하고, 챗봇 경험을 사이트의 디자인과 비즈니스 요구에 완벽하게 맞출 수 있습니다.