n8n 채팅 위젯 삽입 코드
6.1.3 Supabase RAG FAQ 챗봇 — STEP 9 실습 자료
사용 방법
- n8n에서 FAQ 챗봇 워크플로를 활성화(Active)합니다.
- Chat Trigger 노드의 Production URL을 복사합니다.
- 아래 코드의
webhookUrl을 복사한 URL로 교체합니다.
- 교체한 코드를 웹페이지의
</body> 태그 직전에 붙여넣습니다.
- 브라우저에서 페이지를 열어 채팅 위젯이 표시되는지 확인합니다.
플로팅 버블 모드 (window)
우측 하단에 채팅 버블이 표시됩니다. 기존 웹사이트 레이아웃을 변경하지 않고 위젯만 추가할 때 사용합니다.
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
createChat({
webhookUrl: 'https://your-n8n-instance.com/webhook/xxxxxxxx/chat',
mode: 'window',
showWelcomeScreen: false,
initialMessages: [
'안녕하세요! 다빈치전자 고객지원 챗봇입니다. 😊',
'배송, 반품, 보증, 결제, 회원, 제품 관련 질문에 답변해 드립니다.'
],
i18n: {
ko: {
title: '다빈치전자 고객지원',
subtitle: 'FAQ 기반 AI 챗봇',
inputPlaceholder: '질문을 입력하세요...',
getStarted: '대화 시작하기',
footer: '',
},
},
});
</script>
풀스크린 모드 (fullscreen)
페이지 전체를 채팅 인터페이스로 사용합니다. 전용 고객지원 페이지를 만들 때 적합합니다.
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
createChat({
webhookUrl: 'https://your-n8n-instance.com/webhook/xxxxxxxx/chat',
mode: 'fullscreen',
showWelcomeScreen: false,
initialMessages: [
'안녕하세요! 다빈치전자 고객지원 챗봇입니다. 😊',
'배송, 반품, 보증, 결제, 회원, 제품 관련 질문에 답변해 드립니다.'
],
i18n: {
ko: {
title: '다빈치전자 고객지원',
subtitle: 'FAQ 기반 AI 챗봇',
inputPlaceholder: '질문을 입력하세요...',
getStarted: '대화 시작하기',
footer: '',
},
},
});
</script>
주요 설정 옵션
| 옵션 | 설명 | 값 |
|---|
webhookUrl | n8n Chat Trigger의 Production URL | 필수 — 본인 URL로 교체 |
mode | 표시 모드 | 'window' (플로팅 버블) / 'fullscreen' (전체 화면) |
showWelcomeScreen | 시작 화면 표시 여부 | true / false |
initialMessages | 처음 표시할 메시지 배열 | 문자열 배열 |
i18n | 다국어 설정 (라벨, 플레이스홀더) | 객체 |
주의: webhookUrl의 노란색 강조 부분을 반드시 본인의 n8n Production URL로 교체해야 합니다. Test URL이 아닌 Production URL을 사용하세요.
팁: 샘플 랜딩페이지(6.1.3_davinci_landing.html)의 하단 주석을 해제하고 URL을 교체하면 바로 테스트할 수 있습니다.