코딩 없이 웹사이트에 AI 챗봇 추가하는 방법

Agent에 비즈니스 지식을 제공하고, 답변 방식을 설정한 다음, 플러그인이나 제공된 스크립트로 채팅 위젯을 설치하면 웹사이트에 AI 챗봇을 추가할 수 있습니다. Quickchat AI의 웹사이트 챗봇은 지식, 대화 설정, 팀 Inbox를 한곳에서 관리합니다. 방문자는 계정을 만들지 않고 사이트에서 질문할 수 있습니다.

이 튜토리얼에서는 가상의 주방 설계 업체 Kestrel Kitchens를 구성합니다. 방문자가 리노베이션에 걸리는 시간을 묻고, 가로 3m, 세로 4m 주방의 예상 비용을 확인한 뒤 견적을 요청합니다. Agent는 업체 정보를 바탕으로 답하고 프로젝트 정보를 수집하며, 디자이너가 대화를 이어받을 수 있게 합니다.

기본 설정에는 프로그래밍이 필요하지 않습니다. 지식과 지침, 잠재 고객 정보 수집, 직원 인계를 설정한 뒤 위젯을 설치하세요. 선택 사항인 API Action을 사용하면 필요한 정보가 모두 모인 문의를 다른 시스템으로 전송할 수 있습니다.

Kestrel Kitchens 설정 키트를 다운로드하세요. 예시 웹사이트, 지식, Main Prompt, 설정, 테스트 메시지가 포함되어 있습니다. 대시보드에서 따라 설정할 수 있는 편집용 파일이며, 클릭 한 번으로 Agent를 가져오는 파일은 아닙니다. 검증된 예시를 재현할 수 있도록 스크린샷과 복사 가능한 키트·프롬프트·설정 자료는 영어로 유지됩니다.

웹사이트 챗봇은 어떤 일을 하나요?

챗봇은 콘텐츠를 바탕으로 질문에 답하고, 후속 연락을 요청한 방문자의 정보를 저장하며, 사람이 필요할 때 팀에 대화를 넘깁니다.

각 결과는 서로 다른 증거로 확인해야 합니다. 올바른 가격 범위는 Knowledge Base에서 나옵니다. 견적 문의에는 Inbox에 저장된 연락처와 프로젝트 정보가 필요합니다. 인계가 이루어졌는지는 직원이 대화를 맡고 방문자에게 도착하는 답변을 보내야 확인할 수 있습니다.

예시에서 방문자가 거치는 과정입니다. 견적 문의는 관심을 기록하는 단계이며, 가격과 진행 가능 여부는 디자이너가 확인합니다.

챗봇을 추가하기 전에 무엇을 준비해야 하나요?

Quickchat AI 계정, 검증할 수 있는 비즈니스 정보, 웹사이트의 플러그인 또는 사용자 지정 코드 설정에 접근할 권한이 필요합니다.

1. Quickchat AI 계정을 만들고 가입 절차를 완료합니다. 예시 정보가 기존 고객 서비스에 영향을 주지 않도록 이 실습에는 별도의 Agent를 사용하세요.
2. 서비스 페이지, FAQ, 정책을 준비하거나 키트의 가상 지식을 사용합니다. 실제 비즈니스에 배포하기 전에는 가상의 가격과 서비스 지역을 바꾸세요.
3. 웹사이트 요금제가 해당 설치 방식을 허용하는지 확인합니다. WordPress에는 플러그인 접근 권한이 필요하며, 일부 호스팅형 웹사이트 빌더는 사이트 전체에 사용자 지정 코드를 넣으려면 유료 요금제가 필요합니다.
4. 직원 인계를 테스트할 때 테스트용 Inbox를 확인할 사람을 정합니다. 최종 웹사이트 점검을 위해 데스크톱 브라우저와 휴대폰을 준비하세요.

Free는 개인의 비상업적 학습용입니다. Free 요금제에는 월 50 AI 크레딧이 포함됩니다. 비즈니스 배포에는 상업용 요금제가 필요하며, 테스트도 다른 AI 대화와 같은 답변 할당량을 사용합니다. 웹사이트 빌더 구독료와 외부 API 비용은 별도입니다. 비용 섹션에서 각 비용을 구분해 설명합니다.

1단계: 웹사이트 내용으로 챗봇을 어떻게 학습시키나요?

비즈니스의 답변이 담긴 페이지를 Knowledge Base에 추가한 뒤, 테스트하기 전에 가져온 내용을 검증합니다. Agent는 이를 답변의 참고 자료로 사용합니다.

학습용 Agent 만들기

1. 첫 설정 화면에서 Set up manually를 선택합니다. 기존 대시보드에서는 AI Agent 옆의 +(Add new AI Agent)로 별도 Agent를 만든 뒤 Set up manually를 선택합니다.
2. Identity의 Name your AI Agent에 Kestrel Kitchens를 입력합니다. 키트의 main-prompt.txt를 Describe what you want your agent to do에 붙여 넣습니다. 이 내용이 2단계에서 설명할 Agent의 Main Prompt가 됩니다. Next를 선택합니다.
3. 지금은 Knowledge Base를 비워 두고 Next를 선택합니다. External apps에서는 연결을 선택하지 않고 진행합니다. Deployment에서 Chat widget을 선택한 뒤 Next를 선택합니다.
4. Choose your plan에서 Skip for now를 눌러 개인 학습 실습을 계속하거나, 비즈니스 용도에 맞는 상업용 요금제를 선택합니다. 이후 선택 사항인 혜택이 표시되면 완료하거나 닫습니다.
5. 대시보드의 Identity에서 Agent 이름을 확인한 뒤 Knowledge Base를 엽니다. 자신의 페이지 또는 아래 제공된 예시 문서를 사용합니다.

자신의 페이지 가져오기

1. Knowledge Base에서 Add Website를 선택합니다. 필요한 범위에 따라 단일 페이지 또는 웹사이트 가져오기 옵션을 선택합니다.
2. 공개 URL을 입력합니다. 웹사이트를 가져오는 경우 검색된 페이지를 검토하고 답변의 근거로 사용할 서비스, 가격, 절차, FAQ 페이지를 선택합니다.
3. 가져온 텍스트를 살펴봅니다. 가격의 통화와 세금 처리가 올바른지, 지난 프로모션이나 무관한 페이지가 출처에 포함되지 않았는지 확인합니다.
4. 처리가 완료될 때까지 기다립니다. 설치된 위젯을 테스트하기 전에 대시보드에 표시된 미적용 지식 변경 사항을 적용하거나 게시합니다.

먼저 내용이 명확한 페이지 몇 개로 시작하세요. 사이트가 눈에 띄는 가격 카드와 그 가격의 적용 조건을 서로 다른 곳에 둘 수 있으므로 Agent에는 두 내용 모두 필요합니다. 홈페이지에서만 가져오면 답변에 필요한 시공 조건, 지역 제한, 환불 정책이 빠질 수 있습니다.

Kestrel Kitchens 자료 사용하기

웹사이트를 먼저 호스팅하지 않고 예시를 재현하려면 정보를 직접 추가합니다.

1. Knowledge Base에서 Add Article을 선택합니다. Untitled 문서가 생성되고 Edit Article이 열립니다.
2. Title에 Kestrel Kitchens: services, prices and process를 입력합니다. Content에서 Plain Text를 선택하고 키트의 knowledge.txt를 붙여 넣습니다.
3. Save를 선택하고 문서가 Ready 상태가 될 때까지 기다립니다. Knowledge Base 목록에 해당 제목이 표시되는지 확인합니다.

저장된 문서에는 가격과 일정의 조건이 그대로 담겨 있습니다. 가상의 정보는 예시 웹사이트와 일치합니다.

Kestrel Kitchens is a fictional kitchen design and renovation business used in this tutorial. It serves Bristol, Bath and addresses within 25 miles of central Bristol.

Services: kitchen design, supply and full installation. A full kitchen renovation typically costs £18,000 to £45,000 including VAT. This is a planning range, not a quote. The final price depends on the survey, layout, cabinetry, appliances and building work. Room dimensions alone are not enough to calculate a firm price.

Timelines: survey and design normally take 2 to 3 weeks. Installation usually takes 4 to 8 weeks after all materials are available. These are typical durations, not a promised start date or completion date.

Process: discuss the project, arrange a site survey, agree the design and receive a written quote, then schedule work once the quote is accepted and materials are available. The chatbot cannot book a survey or confirm availability.

The design team works Monday to Friday, 09:00 to 17:00, Europe/London. Quote enquiries need the visitor's full name, email, postcode and project type. A preferred timeline is helpful but optional. The team follows up by email. Do not promise a response deadline.

이 자료는 금융 상품에 관한 내용을 의도적으로 명시하지 않습니다. Agent가 실제 정보 공백을 어떻게 처리하는지 테스트할 수 있습니다. 실제 사이트에서는 출처 페이지를 최신 상태로 유지하고, 지원되는 경우 새로고침 설정을 사용하세요. Knowledge Base 가이드에서 출처를 정리하고 테스트하는 방법을 설명합니다.

2단계: 챗봇은 무엇을 말하고, 무엇을 약속하지 않아야 하나요?

Main Prompt에서 Agent가 지식을 적용하는 방식을 정합니다. 질문에 먼저 답하고, 유용한 답변을 제공하며, 확정 견적 같은 결정은 팀에 맡기도록 합니다.

Kestrel에서 방 크기는 프로젝트 규모를 알려 주지만, 수납장, 가전제품, 건축 작업의 범위를 정해 주지는 않습니다. Agent는 바닥 면적으로 더 정확한 가격을 계산하지 않고, 출처에 있는 VAT 포함 £18,000~£45,000의 예산 검토용 범위를 설명해야 합니다.

이 가격은 튜토리얼용 가상 데이터입니다. 출처에 명시된 정보와 팀이 아직 결정해야 하는 사항을 구분하는 것이 핵심입니다.

1. Identity의 Main Prompt 카드에서 Edit를 선택합니다.
2. 아래 프롬프트 전체를 붙여 넣습니다. 저장된 뒤 편집기를 다시 열어 저장된 텍스트를 확인합니다.
3. 비즈니스 정보는 Knowledge Base에 보관합니다. 프롬프트에는 답변 스타일, 정보 수집 방식, 사람이 필요한 결정을 지정합니다.

Main Prompt는 지침 입력 필드입니다. 아래와 키트에 있는 전체 텍스트를 복사해 사용하세요.

You are the website assistant for Kestrel Kitchens. Help visitors understand our services, indicative prices and process using the Knowledge Base.

Answer the visitor's question before asking for contact details. Keep replies concise, usually two to four sentences. Use the visitor's language.

Treat prices as planning ranges. Never calculate a firm quote from room dimensions, invent a discount, promise a start date, confirm a survey booking or claim financing is available. If the Knowledge Base does not answer a question, say that a designer must confirm it.

When a visitor wants a quote or follow-up, collect their full name, email, postcode and project type in conversation. Ask one or two relevant questions at a time. Ask about their preferred timeline only after the required details, and accept a refusal without pressure. Do not ask for payment information.

Offer Human Handoff when the visitor asks for a designer or needs information you cannot confirm. Respect the configured working hours. Never claim that a designer is connected or a quote is booked. If the team is unavailable, offer an email follow-up.

Acknowledge the details the visitor has provided. Do not claim CRM delivery or a confirmed booking. The design team reviews enquiries in the Inbox.

AI Preview를 열고 How long does a full kitchen renovation take?라고 질문합니다. 로컬 대조 테스트에서 Agent는 현장 조사와 설계에 2~3주, 이어서 자재가 모두 준비된 후 시공에 4~8주라고 답했습니다. 소요 시간과 그 조건이 모두 중요합니다.

새 대화를 시작하고 Do you offer financing?라고 질문합니다. 올바른 답변은 출처만으로 금융 상품 제공 여부를 확인할 수 없다고 인정하고 디자이너에게 문의하도록 안내합니다. 프롬프트를 더 확신에 찬 표현으로 바꾸어도 누락된 비즈니스 정보가 생기지는 않습니다.

3단계: 채팅에서 견적 요청을 어떻게 수집하나요?

Smart Data Gathering은 대화 중 선택한 정보를 묻고 방문자가 제공한 내용을 저장합니다. 견적 문의에서는 디자이너가 후속 연락에 필요한 정보만 수집하세요.

1. Actions & MCPs를 열고 Smart Data Gathering을 활성화한 뒤 Edit Action을 선택합니다. Name은 Quote enquiries, Description은 Capture contact and project details for a kitchen design enquiry.로 설정합니다. 저장한 이름이 카드 제목이 됩니다.
2. Data to collect에 아래 행을 추가합니다. 예시를 재현할 때는 영어 Data point 이름을 그대로 사용하세요. 연락처 항목 이름은 Inbox의 방문자 필드와 특별한 방식으로 매핑됩니다.
3. Reason for collecting information을 So a Kestrel Kitchens designer can assess your project and follow up by email.로 설정합니다.
4. When to ask for data를 After exchanging a few messages로, How to ask for data를 Subtle로 설정합니다.
5. Action을 저장합니다. AI Preview에서 견적을 요청하기 전에 서비스에 관해 유용한 질문을 하고, Inbox에서 저장된 정보를 확인합니다.

질문은 수집할 정보를 정의합니다. 시점과 스타일 설정은 언제 질문할지 안내하지만, 실제 대화도 테스트해야 합니다.

이 예시에서 필요한 정보가 모두 모인 문의에는 이름, 이메일, 우편번호, 프로젝트 유형이 필요합니다. 일정은 Main Prompt에 설명된 대로 선택 사항입니다. 이 업무 요건은 대화 중 수집 설정과 별개이며, 8단계에서 CRM 요청을 보내기 전에 필수 필드가 채워졌는지 확인합니다.

Agent는 이메일 주소를 받아야만 답변하는 방식으로 동작하지 않고 일반적인 비용 질문에 답해야 합니다. 방문자는 정보 수집을 거절할 수도 있습니다. I am only researching. I do not want to leave contact details.를 사용해 반복적인 정보 요청 없이 대화가 유용하게 이어지는지 확인하세요.

수집한 정보는 어디로 가나요?

Inbox에서 대화를 엽니다. 표준 연락처 정보는 방문자 필드에 표시되며, 그 밖에 수집한 값은 대화에 연결된 상태로 유지되고 Export Gathered Data로 내보낼 수 있습니다.

Where to send data의 Email new leads는 이메일 주소나 전화번호를 처음 수집하면 Agent의 모든 관리자에게 알립니다. 이름만으로는 이메일을 보내지 않습니다. Preview와 Simulation은 이 알림을 보내지 않으므로, 이메일 전달에 의존하기 전에 설치된 위젯에서 통제된 테스트를 진행해 자신의 관리자 메일함을 확인하세요. 이 로컬 실습에서는 외부 이메일 전송을 비활성화한 상태로 유지합니다.

Smart Data Gathering 문서에서 수집, 알림, 내보내기를 설명합니다. 자신의 사이트에서는 정보를 요청하는 이유를 설명하고 위젯에 개인정보 처리방침 링크를 넣으세요. 챗봇 개인정보 보호 가이드는 전체 데이터 흐름을 검토하는 데 도움이 됩니다.

4단계: 직원이 채팅을 이어받게 하려면 어떻게 하나요?

Human Handoff는 대화를 팀에 넘기며, 이후 직원이 Inbox에서 대화를 맡아 같은 방문자에게 답합니다.

위젯을 게시하기 전에 인계를 준비하세요. 디자이너를 요청한 방문자가 견적 양식을 먼저 모두 작성해야 해서는 안 되며, Agent가 근무 시간 밖에도 직원이 온라인 상태인 것처럼 말해서는 안 됩니다.

1. Actions & MCPs에서 Human Handoff를 활성화하고 Edit Action을 엽니다.
2. 기본 규칙인 Media Message, User Frustration, Customer Support Suggestion, Lack Of Knowledge는 켜 두고, Irrelevant Advice는 꺼 둡니다. Main Prompt에 디자이너 연결을 제안할 시점이 이미 설명되어 있습니다. 검증된 예시는 사용자 지정 규칙 없이 이 기본 규칙을 사용합니다.
3. 아래 메시지와 응대 가능 시간을 설정한 뒤 저장합니다. 학습 실습에서는 Email notifications를 꺼 두고 Inbox에서 직접 인계를 확인합니다.

실제로 직원이 Inbox를 확인하는 시간을 설정하세요. 이 가상의 일정은 즉시 답변을 약속하지 않습니다.

근무 시간 중 웹사이트에서 Can I speak to a designer?라고 질문합니다. Agent가 인계 확인을 요청하면 응답합니다. Inbox에서 대화를 열고 미배정 상태이면 Assign to me를, Take over가 표시되면 해당 버튼을 선택합니다. 직원 답변을 보내고 방문자가 받았는지 확인합니다. AI가 다시 응답하게 하려면 Reassign to AI를 사용합니다.

Agent의 인계 제안만 보지 말고 담당자와 실제로 전달된 직원 답변을 확인하세요.

설정한 시간 밖에 새 대화로 반복합니다. Agent는 응대 가능한 시간을 설명하고 지정된 후속 연락 방법을 제안해야 합니다. 이 확인을 위해 일정을 임시로 변경했다면 테스트 후 실제 일정으로 복구하세요. Human Handoff 문서에서 설정과 Inbox 흐름을 설명합니다.

챗봇의 상담원 전환 가이드에서는 대화 담당자, AI로의 재배정, 운영 시간 외 오류 상황을 각각 확인합니다.

5단계: 위젯을 웹사이트에 어울리게 설정하려면 어떻게 하나요?

Channels → Your Website에서 외형과 고정 문구를 설정합니다. 환영 메시지는 방문자가 무엇을 물을 수 있는지 알 수 있을 정도로 구체적으로 작성하세요.

외형 설정

1. Appearance를 엽니다. Kestrel에는 Custom 테마를 선택하고 배경은 흰색, 헤더와 강조색은 짙은 녹색(#315448), 헤더 텍스트는 흰색으로 설정합니다. 기본 텍스트 크기와 둥근 모서리의 컨트롤은 유지합니다.
2. Branding → AI Agent Avatar에서 아바타 업로드 아이콘을 클릭하고 키트의 website/kestrel-avatar.png를 선택한 뒤 자르기 대화상자에서 Upload를 선택합니다.
3. Widget window max width를 400px, Widget window max height를 520px로 설정합니다. 실행 버튼 크기는 Small, 위치는 오른쪽으로 선택하고 문구로 Ask about your kitchen을 사용합니다. 문구는 작은 실행 버튼에서 사용할 수 있습니다. 사이트의 쿠키 배너나 다른 플로팅 컨트롤과 위치가 겹치지 않는지 미리 확인하세요.
4. Auto-open Widget은 꺼 둡니다. 페이지를 불러올 때마다 위젯이 열리면 특히 휴대폰에서 탐색을 방해합니다.

색상을 선택하면서 미리보기를 확인하세요. 실행 버튼이 사이트의 다른 컨트롤과 공간을 함께 사용하므로 실제 웹사이트 테스트도 필요합니다.

표시 문구 설정

Text Content를 열고 다음 값을 사용합니다.

대화 시작 문구는 유용한 작업으로 이어져야 합니다. 안내 문구는 어떤 결정에 디자이너가 필요한지 방문자에게 알려 줍니다.

Agent는 방문자의 언어로 답할 수 있습니다. 고정 환영 메시지와 위젯 레이블 번역은 유료 요금제의 Other languages에서 별도로 설정합니다. 다국어 사이트에서는 답변과 고정 인터페이스 문구를 모두 테스트하세요. 다국어 챗봇 가이드에서 이 차이를 설명합니다.

외형 변경이 캐시된 방문자 세션에 반영되기까지 몇 분 걸릴 수 있습니다. 저장한 변경 사항이 적용되지 않았다고 판단하기 전에 새로고침하세요. Hide Quickchat AI Branding에는 Professional 이상이 필요합니다. 화이트라벨 설정 가이드에서 그 밖에 점검할 부분을 다룹니다.

6단계: 웹사이트에 챗봇을 어떻게 설치하나요?

사이트의 공통 레이아웃에 Widget을 설치하거나 지원되는 플랫폼 통합을 사용합니다. 플로팅 Widget은 방문자가 보고 있는 페이지에서 실행되어야 합니다.

1. Channels → Your Website → Install을 엽니다.
2. 공개 위젯을 위해 Widget & Embed access를 활성화합니다.
3. 웹사이트에 맞는 설치 방법을 선택하고 이 Agent에 표시된 스니펫 또는 Scenario ID를 복사합니다.
4. 변경 사항을 게시하고 공개 사이트를 연 뒤 Knowledge Base에 답이 있는 질문을 합니다.

이 Agent의 Install 화면에서 복사하세요. Scenario ID는 공개 위젯 식별자이며 비공개 API 키가 아닙니다.

모든 웹사이트: 닫는 body 태그 앞에 Widget 스니펫 붙여 넣기

Install manually with code를 선택하고 Widget 스니펫을 복사합니다. 현재 로더는 다음 형태입니다.

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("init", "YOUR_SCENARIO_ID");
</script>

YOUR_SCENARIO_ID를 Install에 표시된 값으로 바꿉니다. 공통 레이아웃에서 </body> 바로 앞에 전체 스니펫을 한 번만 붙여 넣거나, 빌더의 사이트 전체 푸터 필드를 사용합니다. 이 로더는 페이지 body에 스크립트를 삽입하므로 body가 생성되기 전 head에 배치하면 로드되지 않을 수 있습니다.

위치가 중요합니다. iframe 기반 HTML 블록은 별도의 페이지이므로 이 플로팅 Widget에 적합하지 않습니다.

별도의 Embed 옵션은 페이지 컨테이너 안에 채팅을 배치합니다. 페이지 내 채팅 영역이 필요하면 해당 옵션에서 생성한 스니펫을 사용하세요. 코드를 페이지에 직접 삽입하는 HTML 블록은 이 방식을 지원할 수 있지만, iframe으로 코드를 격리하는 빌더 블록은 경우가 다릅니다. Website 채널 문서를 참고하세요.

WordPress: 공식 플러그인 설치하기

1. WordPress에서 Plugins → Add New를 열고 Quickchat AI Agent를 검색한 뒤 Install Now, Activate를 차례로 선택합니다.
2. Settings → Quickchat AI Agent를 엽니다.
3. Quickchat AI Install 화면의 Scenario ID를 붙여 넣고 Save Changes를 선택합니다.
4. 공개 페이지를 열어 위젯을 확인합니다. 로더를 두 번 설치하지 않도록 플러그인 또는 수동 스니펫 중 하나만 사용합니다.

플러그인을 허용하는 WordPress 설치 환경과 요금제가 필요합니다. WordPress 챗봇 가이드에서 플러그인 인터페이스와 WordPress 관련 점검 사항을 확인할 수 있습니다.

Squarespace: 푸터에 코드 삽입하기

1. 사이트의 Code Injection 패널을 엽니다. 계정의 탐색 메뉴가 다르면 대시보드의 설정 검색을 사용합니다.
2. Footer에 전체 Widget 스니펫을 붙여 넣고 저장합니다.
3. 게시된 페이지를 별도 브라우저 탭에서 열고 답변을 테스트합니다.

Squarespace는 Core, Plus, Advanced 및 일부 기존 요금제에서 Code Injection을 제공합니다. 푸터 삽입은 사이트 전체의 </body> 앞에 코드를 넣습니다. 플로팅 위젯에는 이 설정을 사용하세요. 페이지 단위 iframe 블록은 이와 다릅니다. 이 사용자 지정 코드는 Squarespace 결제 페이지에는 적용되지 않습니다.

Wix: body 끝에 사용자 지정 코드 넣기

1. 사이트 대시보드에서 Settings → Custom Code를 열고 + Add Custom Code를 선택합니다.
2. Widget 스니펫을 붙여 넣고 이름을 Quickchat AI widget으로 지정합니다.
3. All pages에 적용하고 Body - end를 선택한 뒤 Apply를 누릅니다.
4. 다른 페이지로 이동하는 과정까지 포함해 게시된 사이트를 테스트합니다.

Wix에서 사용자 지정 코드를 사용하려면 사이트가 게시되어 있고 도메인이 연결되어 있어야 합니다. 이 플로팅 위젯에는 사이트 전체 Custom Code 설정을 사용합니다.

Webflow: 푸터 코드 사용 후 게시하기

1. Site settings → Custom code를 엽니다.
2. Footer code에 Widget 스니펫을 붙여 넣고 Save changes를 선택합니다.
3. 원하는 도메인에 Publish한 뒤 게시된 URL에서 테스트합니다.

Webflow의 사용자 지정 코드 설정에는 해당 기능을 지원하는 유료 Workspace 또는 활성 Site 요금제가 필요합니다. 설정을 저장하는 것만으로 게시되지는 않습니다.

Shopify: 기존 Agent 스니펫 또는 Shopify 앱 선택하기

이미 만든 Kestrel Agent에는 Online Store → Themes → Edit code → layout/theme.liquid에서 </body> 바로 앞에 Widget 스니펫을 추가한 뒤 저장하고 스토어 화면을 확인합니다. 편집 전에 테마를 백업하고, 테마를 변경한 뒤에는 설치를 다시 확인하세요. 이 방식은 선택한 Agent를 표시하며 상품 또는 주문 Actions를 구성하지는 않습니다.

스토어 중심의 Agent에는 Quickchat AI Shopify 앱 설정을 사용해 전용 온보딩 절차로 스토어를 연결합니다. 연결 후 Enable Widget in Shopify Theme Editor를 사용하거나 Online Store → Themes → Edit theme → App embeds를 엽니다. Quickchat AI Widget을 활성화하고 저장합니다. Shopify의 앱 임베드 문서에서 테마 컨트롤을 설명합니다. 게시된 테마를 바꿀 때는 앱 임베드를 다시 활성화하세요.

위 빌더별 경로는 공식 문서를 기준으로 확인했습니다. 실습 스크린샷은 Kestrel 예시 웹사이트와 실제 로컬 위젯을 보여 주며, 모든 빌더에 로그인한 계정의 화면을 보여 주는 것은 아닙니다.

Agent 문제를 조사하기 전에 스니펫 확인하기

다음 선택적 점검 도구는 사용자가 제공하는 값을 확인합니다.

• Widget 스니펫 검사. 붙여 넣은 코드를 제공한 Scenario ID와 대조합니다. 웹사이트를 가져오지는 않습니다.
• 배포 방식 비교. 입력한 채널, 웹사이트 접근 권한, 필수 기능을 Quickchat AI 설정 옵션과 대조합니다. 웹사이트나 계정을 직접 살펴보지는 않습니다.

호환 브라우저에서는 이 점검을 사이트 도구로도 사용할 수 있습니다. 링크를 열면 일반 양식이 표시됩니다.

7단계: 방문자에게 공개하기 전에 챗봇을 어떻게 테스트하나요?

답변, 저장 데이터, 전달된 답변을 각각 테스트합니다. AI Preview와 Simulation Testing은 동작을 평가하는 데 도움이 되며, 게시된 웹사이트에서는 방문자가 설치된 위젯을 사용할 수 있는지 확인합니다.

Simulation Testing에서 독립적인 질문 실행하기

Testing → Create Dataset을 열고 이름을 Kestrel Kitchens: website launch checks로 지정한 뒤 Paste messages를 선택합니다. 아래 소요 시간, 가격, 금융 상품 질문을 추가하되 질문 사이에 ---만 있는 줄을 넣어 구분합니다. 줄바꿈만 하면 텍스트가 하나의 테스트 메시지에 남습니다. Evaluation criteria에서 사실과 간결한 답변을 확인하도록 설정한 뒤 Run → Start Run을 선택합니다. 키트에는 정확한 메시지와 기준이 포함되어 있습니다.

데이터셋의 각 행은 별도 대화를 시작합니다. 독립적인 질문에는 Simulation을 사용하고, 여러 차례 주고받는 견적 및 직원 인계 테스트는 하나의 AI Preview 또는 웹사이트 대화에서 실행하세요. 대화 기록 평가기는 외부 전달을 검증할 수 없으므로 Action 로그와 수신 서버는 별도로 확인합니다.

완료된 실행을 열어 답변을 확인하세요. 이 가격 답변은 예산 검토용 범위를 유지하지만, 답변 점수가 다른 시스템으로의 전달을 입증하지는 않습니다.

독립적인 사례마다 새 대화를 사용합니다. 페이지를 새로고침하면 기존 대화가 재개될 수 있으므로 새 테스트가 필요할 때는 위젯의 새 채팅 기능을 사용하세요.

휴대폰에서 웹사이트 확인하기

너비가 768 CSS 픽셀 미만인 화면에서는 열린 위젯이 전체 화면 레이아웃을 사용합니다. 위젯을 열고, 키보드가 보이는 상태에서 입력하고, 대화를 스크롤하고, 닫아서 사이트로 돌아갈 수 있는지 확인합니다.

마지막으로 실제 직원이 Inbox에서 답변하게 합니다. AI 답변이 좋다고 해서 직원 지원 경로가 작동한다는 뜻은 아닙니다. 출처, 프롬프트, Actions, 사이트 테마를 바꾼 뒤에는 이 점검 중 일부를 다시 실행하세요.

8단계: 필요한 정보가 모두 모인 문의를 CRM에 어떻게 전송하나요?

선택 사항인 API Action은 대화에서 필수 정보를 모두 모은 뒤 저장된 필드를 HTTP 수신 서버로 보낼 수 있습니다. 이 확장 기능 없이도 기본 웹사이트 챗봇을 사용할 수 있습니다.

연락처가 수집된 상태와 문의 정보가 모두 갖춰진 상태를 구분해야 합니다. Quickchat AI는 이름을 포함한 표준 연락처 필드를 새로 수집하면 lead_captured를 설정합니다. 이 플래그만으로 이메일, 우편번호, 프로젝트 유형이 있는지는 알 수 없습니다.

플랫폼은 모든 조건을 확인합니다. 모델은 정보를 수집하고, 조건은 요청을 실행할 수 있는 시점을 결정합니다.

수신 서버 준비하기

아래 JSON 본문을 받는, 직접 제어할 수 있는 CRM 또는 자동화 엔드포인트를 사용합니다. 키트에는 CRM 연결 전에 요청을 확인하려는 독자를 위한 작은 로컬 데모 수신 서버가 포함되어 있습니다. 설정 안내는 비공개 토큰을 만들고 임시 HTTPS 엔드포인트를 노출하는 방법을 설명합니다. 데모 수신 서버에는 가상의 테스트 데이터만 보내세요.

대신 관리형 통합을 사용하려면 Google Sheets 보고 튜토리얼 또는 사용자 지정 CRM 연동 가이드를 따르세요. 같은 잠재 고객을 생성하는 두 워크플로를 동시에 켜지 마세요.

자동 API Action 하나 설정하기

1. Actions & MCPs → Custom Actions → Add Action → API Action을 엽니다. 설명 기반 빌더가 열리면 Create manually를 선택합니다.
2. API Action Name을 Send quote enquiry로 설정합니다.
3. What to ask the user first는 비워 둡니다. 이 Action은 Smart Data Gathering이 이미 저장한 필드를 읽으며, 모델에 별도의 매개변수 세트를 채우도록 요청하지 않습니다.
4. API Endpoint에서 POST를 선택하고 수신 서버의 HTTPS /enquiries URL을 입력합니다.
5. 아래 헤더, 본문, 조건을 추가한 뒤 저장하고 Action을 활성화합니다.

토큰은 Action의 헤더 설정에만 입력합니다. 프롬프트, 웹사이트 스니펫, 방문자 대화에 넣지 마세요. 데모 수신 서버의 README에서 생성 방법을 설명하며, 실제 통합에는 CRM 문서에 명시된 인증 방식을 사용합니다.

Body 탭에서 JSON을 선택하고 다음을 입력합니다.

{
  "conversation_id": "{{conversation_id}}",
  "name": "{{metadata_visitor_name}}",
  "email": "{{metadata_visitor_email}}",
  "postcode": "{{metadata_postcode}}",
  "project_type": "{{metadata_project_type}}"
}

Add AI Data로 해당 기본 제공 값과 메타데이터 값을 삽입합니다. conversation_id는 대화를 식별합니다. 나머지 값은 저장된 필드에서 가져옵니다. 영어 연락처 항목 이름은 visitor_name, visitor_email에 매핑되고, Project type은 project_type이 됩니다. 변수 문서에서 이 매핑을 설명합니다.

When to run에서 When metadata matches를 선택합니다. Run when에 다섯 행을 모두 추가합니다. 메타데이터 조건은 AND로 결합됩니다.

이 텍스트 필드에 대해 is true는 빈 값과 거짓으로 취급되는 텍스트를 모두 거부합니다. exists는 키의 존재 여부만 확인하므로 저장된 빈 문자열도 통과할 수 있습니다. 아래 테스트는 더 엄격한 조건이 필요한 이유를 보여 줍니다. 이 검사는 사용 가능한 텍스트가 제공되었는지를 확인하며, 방문자의 신원이나 부동산 정보를 독립적으로 검증하지는 않습니다.

API Action Description에는 다음을 사용합니다.

Send a quote enquiry to the design team when the visitor has provided their full name, email, postcode and project type. This records an enquiry only; it does not book a survey or confirm a price.

저장된 다섯 조건 중 처음 두 개입니다. 표의 모든 행을 추가하세요. When metadata matches는 Agent가 Action을 선택하지 않아도 AI 응답 차례가 끝난 뒤 조건을 확인합니다.

모든 조건이 맞으면 Action은 대화당 한 번 실행을 시도합니다. 선택 사항인 일정이 나중에 들어와도 다시 실행되지 않으며, 전송된 요청이 실패해도 같은 대화에서 자동으로 재시도하지 않습니다. 디자이너가 볼 수 있도록 일정을 Inbox에 남기거나, CRM에서 후속 변경이 필요하다면 생성과 업데이트를 명시적으로 처리하는 통합을 구현하세요.

요청은 AI 응답 차례가 끝난 뒤 실행되며, 응답 결과는 채팅에 삽입되지 않습니다. 따라서 Main Prompt는 방문자가 제공한 정보를 확인하면서도 CRM이 이를 수신했다고 주장하지 않습니다. Action 로그와 수신 서버에서 전달을 검증하세요. 자동 Action 문서에서 이 실행 방식을 설명합니다.

일부 정보부터 완성된 문의까지 테스트하기

첫 버전에서는 필수 텍스트 필드에 exists를 사용했습니다. Sam은 이름을 제공한 뒤 다음 메시지에서 이메일을 제공했습니다. Smart Data Gathering이 우편번호와 프로젝트 유형에 빈 값을 이미 생성했으므로 해당 키들이 존재했고 Action은 불완전한 요청을 보냈습니다. 이로써 해당 대화의 한 번뿐인 실행 시도도 소진됐습니다.

수정은 다른 설정을 유지한 채 텍스트 필드 네 개의 조건을 is true로 바꾸는 것이었습니다. 새 대화에서 두 번째 차례에는 이메일만 제공하며 테스트를 반복하세요. Action은 나머지 프로젝트 정보가 들어올 때까지 기다려야 합니다.

이는 관찰한 대화 한 건이며 운영 환경의 성공률이 아닙니다. 새 대화로 재현하고, 매 차례 저장된 필드를 살펴보며, 자신의 엔드포인트에서 요청을 확인하세요.

실제 Action 호출은 HTTP 201을 반환했습니다. 세부 정보를 열어 요청을 확인하세요. 아래 저장 기록은 수신 서버가 저장한 내용을 보여 줍니다.

인증된 데모 수신 서버에 실제로 저장된 기록 한 건입니다. 확정 견적이나 예약이 아닌 문의입니다.

데모는 로컬 수신 서버를 사용해 실제 HTTP 전달을 확인했습니다. 호스팅된 Quickchat AI Agent에는 외부에서 접근할 수 있는 HTTPS 엔드포인트가 필요하며, 서비스에서는 사용자 컴퓨터의 localhost URL에 접근할 수 없습니다.

아무것도 도착하지 않으면 Action의 View logs와 대화에 저장된 메타데이터를 살펴봅니다. 값 누락, 비활성 Action, HTTP 실패는 각각 해결 방법이 다릅니다. 설정을 수정한 뒤 새 대화로 자동 트리거를 다시 테스트하세요. 같은 채팅에서 재시도를 요청해도 대화당 한 번인 실행 시도가 초기화되지 않습니다.

챗봇이 보이지 않거나 이전 설정이 표시되는 이유는 무엇인가요?

프롬프트를 바꾸기 전에 게시된 페이지, 설치 위치, Agent 접근 권한을 확인합니다. 브라우저 로딩 문제와 답변 품질 문제는 별개입니다.

브라우저가 차단된 리소스를 보고하면 정확한 Content Security Policy 또는 차단 도구 오류를 확인합니다. 사이트의 보호 기능을 일괄적으로 비활성화하지 마세요. HTTPS로 공개 페이지를 테스트하고 채널 문서에서 필요한 설정을 확인하세요.

웹사이트 챗봇의 비용은 얼마인가요?

구독료와 사용 할당량은 AI 서비스 비용이며, 웹사이트 요금제와 선택적 통합 비용은 별도입니다.

AI 크레딧 하나가 대화 한 건을 뜻하지는 않습니다. 한 대화에 여러 AI 답변이 포함될 수 있으며, 모델 선택에 따라 크레딧 비용도 달라질 수 있습니다. 테스트 예산에는 Preview와 Simulation도 포함하세요. 현재 가격과 할당량 및 챗봇 비용 가이드를 참고해 사용량을 추산하세요.

ChatGPT나 Claude로 챗봇 설정을 도울 수 있나요?

Quickchat AI 계정 관리 연결을 사용하면 호환되는 어시스턴트가 이 자료를 바탕으로 지원되는 Agent 설정을 구성하고 테스트를 준비할 수 있습니다.

Manage with AI 가이드에 따라 ChatGPT의 Quickchat AI 또는 Claude의 Quickchat AI로 자신의 계정을 연결하세요. 지원 도구는 지식, Main Prompt, 대화 시작 문구, Human Handoff, HTTP Actions, 테스트, 배포 스니펫을 다룹니다.

Smart Data Gathering과 위젯의 세부 Appearance 설정은 대시보드에서 완료하세요. 외부 계정에 권한을 부여하고 웹사이트 설정에 스니펫을 설치하는 작업도 필요합니다. 이 계정 연결은 Agent 관리용이며, Agent를 MCP 도구로 공개하는 것과는 별개입니다.

Use the Kestrel Kitchens website-chatbot kit to prepare a separate learning Agent. Do not change existing Agents. Set its name to Kestrel Kitchens, add knowledge.txt and set main-prompt.txt as Main Prompt. Configure the supported greeting, conversation starters and Human Handoff settings from the kit. Prepare the launch-test dataset with the supplied messages and criteria. Read back the saved configuration and return this Agent's current Widget snippet.
List the remaining dashboard steps for Smart Data Gathering, Appearance and website installation. Do not invent support for those settings. Leave the optional Send quote enquiry Action inactive until I provide my receiver URL and configure its credential. Before running tests or external writes, tell me the expected credit use and effects and obtain any approval required by this client. Do not claim that a website, email or CRM delivery works until it has been tested.

자주 묻는 질문

웹사이트에 AI 챗봇을 어떻게 추가하나요?

Quickchat AI에서 Agent를 만들고 비즈니스 지식을 추가한 뒤 Main Prompt, Smart Data Gathering, Human Handoff를 설정하고, 플러그인이나 제공된 스니펫으로 Widget을 설치합니다. 게시된 사이트에서 출처 기반 답변, 수집된 연락처 정보, 실제로 전달된 직원 답변을 테스트하세요.

사용자 지정 ChatGPT를 웹사이트에 추가할 수 있나요?

자신의 페이지를 학습한 ChatGPT 형태의 어시스턴트를 추가할 수 있습니다. 이 튜토리얼은 Quickchat AI Agent를 웹사이트 위젯으로 배포하므로 방문자는 ChatGPT에 로그인하지 않고 사이트에서 채팅할 수 있습니다. 지식, 지침, 통합은 Quickchat AI에서 관리합니다.

웹사이트에 AI 챗봇을 무료로 추가할 수 있나요?

Quickchat AI의 Free 요금제는 개인의 비상업적 학습을 지원하며 월 50 AI 크레딧을 포함합니다. 회사 웹사이트나 고객 대상 영업 및 지원 배포에는 상업적 사용을 허용하는 요금제가 필요합니다. 웹사이트 빌더 구독료는 별도이며, 테스트도 AI 크레딧을 사용합니다.

코딩하거나 API 키를 제공해야 하나요?

기본 설정은 대시보드 설정과 플러그인, 앱 임베드 또는 제공된 스크립트를 사용합니다. 웹사이트 스니펫에는 비공개 API 키가 아닌 공개 Scenario ID가 들어 있습니다. 선택 사항인 CRM Action을 연결하려면 적절한 엔드포인트와 인증이 필요하며, 인증 정보는 Action 설정에 보관하세요.

웹사이트 챗봇으로 잠재 고객 정보와 견적 요청을 수집할 수 있나요?

예. Smart Data Gathering은 대화 중 선택한 필드를 질문하고 Inbox에 저장합니다. Email new leads는 이메일 주소나 전화번호가 수집된 뒤 Agent 관리자에게 알릴 수 있습니다. API Action은 저장된 필수 필드를 설정된 수신 서버로 보낼 수 있으며, 이름만 수집됐다고 해서 문의 정보가 모두 갖춰진 것은 아닙니다.

직원이 채팅을 이어받을 수 있나요?

예. Human Handoff에 근무 시간과 시간 외 메시지를 설정합니다. Inbox에서 미배정 대화에는 Assign to me를, Take over가 표시되면 해당 버튼을 선택한 뒤 방문자에게 답합니다. Reassign to AI를 사용하면 대화가 Agent로 돌아갑니다.

WordPress, Shopify, Squarespace, Wix, Webflow에서 작동하나요?

각 플랫폼에 맞는 설치 방법이 있습니다. 공식 WordPress 플러그인, 스토어 Agent 연결 후 Shopify 앱 임베드, 또는 기존 Agent에 맞는 사이트 전체 푸터나 body 끝 스니펫을 사용하세요. 플러그인 권한과 사용자 지정 코드에 필요한 요금제는 빌더마다 다릅니다.

웹사이트에 챗봇이 나타나지 않는 이유는 무엇인가요?

게시된 페이지, 올바른 Scenario ID, 페이지 body 끝의 스니펫 위치를 확인하세요. 오래된 중복 설치를 제거하고 플로팅 Widget에는 iframe 기반 블록을 사용하지 마세요. 위젯은 열리지만 답하지 못하면 Widget & Embed access와 사용 가능한 AI 크레딧을 확인하세요.

챗봇 때문에 웹사이트가 느려지나요?

위젯 로더는 비동기로 다운로드되지만 JavaScript와 네트워크 요청은 추가됩니다. 대표 페이지와 휴대폰에서 설치 전후의 로딩 및 상호작용 성능을 비교하세요. 비동기 로딩이 성능에 전혀 영향을 주지 않는다는 뜻은 아닙니다.

웹사이트 챗봇은 휴대폰에서도 작동하나요?

열린 위젯은 너비 768 CSS 픽셀 미만에서 전체 화면 레이아웃을 사용합니다. 휴대폰에서 실행 버튼, 키보드, 스크롤, 닫기 컨트롤을 테스트하세요. 자동 열기가 탐색을 방해한다면 Auto-open Widget을 꺼 두세요.

챗봇이 방문자의 언어로 답할 수 있나요?

Agent는 방문자의 언어로 답할 수 있습니다. 고정 환영 문구, 대화 시작 문구, 위젯 레이블 번역은 별도의 유료 요금제 설정입니다. 지원하려는 언어마다 답변의 사실과 인터페이스 문구를 모두 테스트하세요.