FlowHunt 챗봇이 고객의 페이지 URL을 감지할 수 있나요? 기능, 통합, 그리고 모범 사례
FlowHunt 챗봇이 고객이 채팅을 시작한 웹 페이지의 URL을 감지할 수 있는지, 왜 기본적으로 제공되지 않는지, 통합을 통한 컨텍스트 전달 방법, 그리고 전문가의 구현 권장사항을 알아보세요....
5 분 읽기
chatbot
integration
+2
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>
사용 가능한 설정 옵션
| Option | Type | Description |
|---|---|---|
headerTitle | string | 커스텀 헤더 타이틀 텍스트 |
maxWindowWidth | string | 채팅 창 최대 너비 (예: "700px") |
maxWindowHeight | string | 채팅 창 최대 높이 |
inputPlaceholder | string | 메시지 입력란의 플레이스홀더 텍스트 |
showChatButton | boolean | 기본 플로팅 채팅 버튼 표시 또는 숨김 |
openChatPanel | boolean | 페이지 로드 시 채팅 패널 자동 열기 |
flowVariables | object | 플로우에 전달되는 커스텀 데이터의 키-값 쌍. 값은 JSON으로 직렬화 가능한 모든 타입(string, number, boolean, object, array)이 될 수 있습니다. |
urlSuffix | string | 챗봇이 생성하는 모든 URL에 추가되는 쿼리 문자열 |
cookieConsent | boolean | 쿠키를 통한 세션 지속성 활성화 |
embedded | string | 임베디드 모드 활성화 (닫기 버튼 없음) |
theme | string | 테마 모드 |
플로우 변수: 동적 데이터 전달
flowVariables는 챗봇이 생성하는 모든 세션에 병합됩니다. 일반적으로 페이지 로드 시점에 알려진 정적 컨텍스트(사용자 ID, 플랜, 현재 로케일 등)로 사용됩니다.
window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
flowVariables: {
userId: getCurrentUserId(),
userEmail: getCurrentUserEmail(),
currentPage: window.location.pathname,
plan: 'enterprise',
},
});
사용자가 채팅이 열린 후 페이지를 이동하면, 여기에 전달된 값은 stale(오래된 값)이 됩니다. 대화 중에 값을 업데이트하려면
chatbotManager.sendHook()을options.flowVariables와 함께 호출하세요. 아래 대화 중 호스트 → 플로우 통신 섹션을 참조하세요.
URL 접미사: 챗봇 인터랙션 추적
urlSuffix 파라미터는 챗봇이 생성하는 모든 URL에 쿼리 문자열을 추가합니다. 이는 분석 도구에서 챗봇 경유 트래픽을 추적하는 데 유용합니다:
window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
urlSuffix: '?utm_source=chatbot&utm_medium=widget',
});
사용 사례:
- 전환 추적 — Google Analytics에서 챗봇 인터랙션의 전환을 추적합니다.
- 사용자 행동 분석 — 챗봇과 상호작용한 후 사용자 행동을 분석합니다.
- 캠페인 귀속 — 챗봇 참여를 유도하는 캠페인의 성과를 귀속합니다.
대화 중 호스트 → 플로우 통신
2026년 4월에 FlowHunt Chat Hook 기능의 일부로 추가되었습니다.
싱글 페이지 애플리케이션(SPA)에서는 사용자가 화면 사이를 이동하는 동안에도 채팅 창이 열린 상태로 유지되는 것이 일반적입니다. 채팅이 실행되기 시작하면 setConfig()를 통해 전달된 flowVariables는 stale 상태가 되고, 호스트 페이지에서 발생한 사건을 플로우에 알릴 방법이 없습니다. 단일 매니저 메서드인 sendHook(name, payload, options?) 하나가 “트리거 발사"와 “단순한 컨텍스트 업데이트” 두 가지 사용 사례를 모두 처리합니다:
name과 (선택적으로)payload를 전달하여 플로우의 Chat Hook 트리거를 발사합니다. 플로우 작성자는 캔버스에 Chat Hook 노드 하나를 배치하고{ChatHook.hook_name}을 기준으로 분기하여 어떤 동작을 할지 결정합니다.- 동시에 세션 변수를 병합하려면
options.flowVariables를 전달하세요. 값은 트리거가 발사되기 전에 저장되며, 이후 세션 전반에서 사용 가능합니다. - 플로우에 Chat Hook 트리거가 없으면 호출은 조용한 200 no-op입니다.
options.flowVariables는 여전히 병합되지만 트리거가 실행되지 않으며 크레딧도 부과되지 않습니다. 즉, 호스트 페이지는 플로우 작성자가 트리거를 연결했는지 모르는 상태에서도 낙관적으로sendHook()을 호출할 수 있습니다.
sendHook()은 세션이 존재하기 전이라도 안전한 no-op이며(내부적으로 버퍼링되고 세션 생성 시 플러시됨) 호스트 페이지에 절대 throw하지 않습니다. 네트워크 오류는 console.warn으로만 기록됩니다.
입력 한도
sendHook()에 적용되는 서버 및 클라이언트 측 경계입니다. 위반은 크래시가 아니며, 백엔드는 HTTP 422를 반환하고 매니저는 throw하지 않고 console.warn으로 기록합니다.
| Constraint | Limit | Where enforced | On violation |
|---|---|---|---|
sendHook name 길이 | 1–256자 | Backend (Pydantic) | HTTP 422, 트리거 미발사 |
options.flowVariables의 키 개수 | ≤ 64 | Backend (Pydantic) | HTTP 422, 아무것도 저장되지 않음 |
options.flowVariables의 각 키 길이 | ≤ 128자 | Backend (Pydantic) | HTTP 422, 아무것도 저장되지 않음 |
| 매니저가 버퍼링하는 세션 생성 전 호출 | 50 | Widget (in browser) | 가장 오래된 큐 호출이 제거되고 console.warn이 기록됨 |
세션 생성 전 버퍼 한도는 세션 생성이 무한정 실패하는 페이지(예: 영구적인 네트워크 오류)에서만 의미가 있습니다. 정상 조건에서는 onFHChatbotSessionCreated가 발생하자마자 큐가 플러시됩니다.
1. Chat Hook 트리거 추가하기 (플로우 작성자 측)
- FlowHunt 에디터에서 챗봇과 연결된 플로우를 엽니다.
- Chat Hook 트리거 노드를 캔버스로 드래그합니다. 에디터는 플로우당 하나의 트리거만 허용하며, 여러 개는 허용되지 않습니다.
- (선택 사항) Validate Payload Schema를 활성화하고 들어오는 payload가 일치해야 하는 JSON Schema를 정의하세요. 검증은 단계 내부에서 실행됩니다. 불일치는 플로우 오류 이벤트로 표면화되며(엔드포인트는 여전히 200을 반환하고, 오류는
onFHError로 확인 가능합니다), - 트리거의 출력(
hook_name,payload,flow_variables)을 발사하려는 다운스트림 단계(Generator, Chat Output, Tool Calls,hook_name기반 조건 분기 등)에 연결합니다. - 플로우를 게시합니다.
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>;
인자
| Argument | Type | Required | Description |
|---|---|---|---|
name | string | yes | {ChatHook.hook_name}으로 플로우에 전달되는 라벨. 값과 무관하게 트리거가 발사되며, 플로우 로직이 이를 기준으로 분기합니다. |
payload | object | no | {ChatHook.payload}로 트리거에 전달되는 JSON payload. 활성화된 경우 노드의 스키마에 대해 검증됩니다. 기본값은 {}입니다. |
options.flowVariables | object | no | 트리거가 발사되기 전에 병합되는 세션 변수. 다운스트림 단계 및 이후 사용자 메시지에서 사용 가능합니다. |
동작
onFHChatbotSessionCreated이전에 호출해도 안전합니다. 호출은 버퍼링되며 세션이 존재할 때 플러시됩니다. 버퍼에는 한도가 있으니 위의 입력 한도를 참조하세요.- 플로우에 Chat Hook 트리거가 없으면 요청은 조용한 200 no-op입니다. 따라서 호스트 페이지는 플로우 작성자가 트리거를 연결하기 전이라도 낙관적으로
sendHook()을 호출할 수 있습니다. 이 경우에도options.flowVariables는 여전히 저장되므로, 동일한 호출이 컨텍스트 전용 업데이트의 역할도 합니다. - Chat Hook 트리거에 스키마 검증이 활성화되어 있고 payload가 검증을 통과하지 못하면, 검증은 단계 내부에서 실행됩니다. 엔드포인트는 200을 반환하지만 플로우는 단계 오류 이벤트를 발생시킵니다(
onFHError로 관찰 가능). name과options.flowVariables에는 한도가 있으니 위의 입력 한도를 참조하세요. 위반은 HTTP 422를 반환하며 아무것도 저장되지 않습니다.options.flowVariables가 제공된 경우 성공한 호출은onFHChatbotFlowVariablesUpdate이벤트를 발생시킵니다(이벤트 레퍼런스 참조).- 절대 throw하지 않습니다. 네트워크 오류와 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로 전달된 값은 트리거가 발사되기 전에 세션의 변수 백(variable bag)에 병합됩니다. 모든 실행 경로(일반 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 요소 재렌더링 등).
뉴스레터 가입
최신 팁, 트렌드 및 특가 정보를 무료로 받아보세요.
이벤트 구독
챗봇 이벤트를 구독하는 방법은 두 가지가 있습니다.
방법 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);
});
});
매니저 메서드 레퍼런스
| Method | Parameters | Description |
|---|---|---|
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>