웹사이트

Quickchat AI 에이전트를 웹에 제공하는 방법은 세 가지입니다. 표시할 위치와 목적에 맞는 형식을 선택하세요.

• Widget: 사이트 구석에 떠 있는 채팅 버튼입니다. 일반적인 고객 지원에 적합합니다.
• Embed: 페이지의 원하는 위치에 넣는 채팅창입니다. 특정 앱 화면, 도움말 센터, 제품 상세 페이지 안에 AI를 배치할 때 적합합니다.
• Chat Page: Quickchat이 호스팅하는 전체 화면 채팅입니다. 설치나 코드가 필요하지 않습니다. 지원 이메일, 내부 Slack, 베타 테스터에게 브라우저 설정을 바꾸지 않고 링크를 공유할 때 적합합니다.

선택한 형식은 Channels → Your Website → Install에서 설치합니다. 페이지에는 에이전트 추가 방법을 선택하는 Install, 디자인을 설정하는 Appearance, 방문자에게 보이는 안내와 문구를 설정하는 Text Content 세 하위 탭이 있습니다. Install은 방법 선택 화면으로 시작하고, 사용 가능 여부와 접근 제어를 별도 섹션에 두며, 플러그인과 API에 필요한 Scenario ID를 복사할 수 있게 표시합니다.

선택적으로 사용할 수 있는 설정 도구

• 배포 방법 비교하기. 지정한 채널, 웹사이트 접근 권한, 필요한 기능을 Quickchat AI의 설정 옵션과 비교합니다. 웹사이트나 계정을 검사하지는 않습니다.

• 샘플 페이지의 HTML과 Markdown 비교하기. 고정된 Quickchat AI 샘플에서 초기 HTML, Markdown 콘텐츠, 도구 링크를 가져옵니다. JavaScript를 렌더링하거나 임의의 웹사이트를 검사하지는 않습니다.

Widget

Widget을 사용하면 AI 에이전트를 웹사이트에 바로 추가하여 사용자가 편리하게 대화할 수 있습니다. 일반적으로 웹페이지 오른쪽 아래의 채팅 버튼으로 표시되며, 클릭하면 질문하고 도움을 받거나 정보를 찾을 수 있는 채팅창으로 펼쳐집니다.

웹사이트에 Widget 추가하기

Channels → Your Website → Install을 여세요. 탭은 “How do you want to add your AI Agent?”라는 질문과 함께 쉬운 순서대로 설치 방법을 보여 줍니다. 사이트에 맞는 방법을 선택하세요.

• WordPress: 무료 Quickchat AI Agent 플러그인을 설치하고 Scenario ID를 붙여 넣으세요. 테마 코드를 수정하지 않아도 Widget이 자동 표시됩니다.
• Shopify: 스토어의 Theme Editor에서 Widget을 추가하세요. Shopify 가이드를 참고하세요.
• Webflow, Wix & others: 코드 한 조각을 복사하여 사이트 빌더의 사이트 전체 사용자 지정 코드 설정에 붙여 넣고 모든 페이지에 적용하세요. 개별 페이지의 Embed나 HTML 요소를 사용하지 마세요. 사이트 빌더를 참고하세요.
• Share a link instead: 설치하지 않고 호스팅된 Chat Page 링크를 공유하세요.
• Install manually with code: Widget 또는 Embed 코드를 복사하여 HTML에 직접 붙여 넣으세요.

각 방법은 필요한 코드나 ID만 포함한 단계별 패널을 엽니다.

Scenario ID는 Install 탭 상단에 복사 가능한 필드로 표시됩니다. 플러그인과 API가 사용하는 식별자이므로 설정 단계에서 필요할 때 여기서 복사하세요.

코드로 직접 설치하기

HTML을 직접 관리한다면 Install 탭의 Install manually with code를 펼친 뒤 다음 단계를 따르세요.

1. Widget 코드를 복사하세요.
2. 페이지의 HTML 파일을 여세요. 사이트 빌더에서는 사이트 전체 코드 설정을 사용하세요. 사이트 빌더를 참고하세요.
3. Widget을 표시할 각 페이지에서 닫는 </body> 태그 바로 앞에 코드를 붙여 넣으세요.

지정한 Scenario ID에 맞는지 Widget 코드를 검사하세요. 이 검사는 붙여 넣은 코드를 읽으며 웹사이트를 가져오지는 않습니다.

사이트 빌더

Webflow, Wix, Squarespace, Hostinger 등의 빌더에서는 사이트 전체 코드 설정으로 Widget을 한 번만 추가하세요.

1. 모든 페이지에 코드를 추가하는 설정을 여세요. Custom code, Code injection, Footer code, Body end 등의 이름으로 표시될 수 있습니다.
2. Widget 코드를 붙여 넣고 모든 페이지에 적용하세요. 위치를 선택할 수 있다면 바닥글이나 body의 끝을 선택하세요. 이 코드는 head에서는 작동하지 않습니다.
3. 사이트를 공개하세요. 모든 페이지에 채팅 버튼이 표시됩니다.

주의

페이지 위에 배치하는 Embed 또는 HTML 요소로 Widget을 추가하지 마세요. 많은 빌더가 이런 요소를 작고 분리된 프레임 안에 표시하므로 Widget이 열리지 않습니다. 로드되더라도 그 한 페이지에서만 보입니다.

사이트 전체 설정의 위치:

빌더	사이트 전체 코드 설정
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom Code에서 All pages, Body - end를 선택합니다. 연결된 도메인이 필요합니다.
Squarespace	Custom Code → Code Injection → Footer. Core, Plus, Advanced 및 일부 기존 플랜에서 사용할 수 있습니다.
Hostinger Website Builder	More (⋯) → Integrations → Custom code. 스크립트는 페이지 끝에서 자동 로드됩니다.

메뉴는 바뀔 수 있으며 빌더의 언어에 맞게 번역되어 있을 수 있습니다. 빌더나 플랜에 사이트 전체 코드 설정이 없다면 Chat Page 링크를 공유하세요.

도움이 필요하신가요?

개발자가 아니신가요? Install 탭의 Need a hand? 아래에는 두 가지 바로가기가 있습니다.

• Ask AI for help: 웹사이트에 에이전트를 추가하는 질문이 미리 입력된 앱 내 도우미를 엽니다.
• Email instructions to a developer: Widget 코드, Scenario ID, 이 가이드 링크를 포함한 설치 자료를 동료에게 보내 대신 설치할 수 있도록 합니다.

추가 도움이 필요하면 contact@quickchat.ai로 문의하세요.

Chat Page

Chat Page는 Quickchat URL에 호스팅된 에이전트의 전체 화면 버전입니다. 설치할 필요 없이 링크를 공유하면 방문자가 브라우저에서 바로 대화할 수 있습니다. 다음 상황에서 사용하세요.

• 채팅을 제공하고 싶지만 웹사이트가 없거나 사이트 코드를 수정하고 싶지 않을 때.
• 베타 테스터, 지원팀, 잠재 고객 같은 작은 그룹에 AI를 공유하며 공개 위젯 대신 접근 제어가 있는 링크가 필요할 때.
• 이메일, Slack, CRM에서 후속 소통 채널로 AI를 보내고 싶을 때.

Install → Chat Page Access에서 Chat Page를 열 수 있는 사람을 설정하세요. 아래 접근 제어를 참고하세요.

새 대화 시작하기

채팅을 새로 시작하려면 다음과 같이 하세요.

• Widget 또는 Embed: 채팅창 오른쪽 위의 사각형 안에 펜이 있는 버튼을 클릭하세요.
• Chat Page: 사이드바의 New chat을 선택하거나 헤더의 사각형 펜 버튼을 사용하세요.

AI 에이전트와 새 대화가 시작되며 이전 대화는 Inbox에 남습니다. Widget을 닫았다 다시 열거나 페이지를 새로고침하면 기존 대화가 이어질 수 있습니다. AI에 대화를 초기화하거나 지워 달라고 요청해도 새 대화가 시작되지는 않습니다. 브라우저 쿠키를 지울 필요도 없습니다.

접근 제어

Install 탭에는 접을 수 있는 Availability and access 섹션이 있습니다. 펼치면 배포에 적용되는 두 가지 접근 제어가 나타납니다.

Widget & Embed access

Availability and access 상단의 스위치입니다. 켜면 방문자 브라우저에서 Widget과 Embed 스크립트가 정상 작동합니다. 끄면 코드가 사이트에 남아 있어도 둘 다 사용할 수 없습니다. 코드를 삭제하지 않고 AI를 잠시 끄거나, 초대한 사용자에게 Chat Page를 열어 둔 채 공개 접근을 제한할 때 유용합니다.

Chat Page Access

Widget 및 Embed 스위치와 별개로 Chat Page를 열 수 있는 사람을 제한할 수 있습니다.

• Anyone: Chat Page URL이 공개됩니다. 링크가 있는 누구나 사용할 수 있습니다.
• Invited users only: 이메일로 초대한 Chat Users만 사용할 수 있으며 인증이 필요합니다.
• Nobody: Chat Page가 완전히 비활성화됩니다.

Invite Chat Users 링크는 Settings → Organization → Team Members를 엽니다. 현재 초대 양식은 대시보드 권한이 있는 팀 역할을 제공하며, 채팅 전용 역할이나 Chat Users 섹션은 제공하지 않습니다. 초대 전에 팀 구성원과 역할을 확인하세요.

맞춤 설정

Appearance와 Text Content 하위 탭에서 Widget, Embed, Chat Page의 모습과 방문자에게 표시할 문구를 조정합니다. 세 형식 모두 설정을 공유하므로 한 번 변경하면 에이전트가 배포된 모든 곳에 적용됩니다.

Install, Appearance, Text Content 탭의 오른쪽 패널에는 별도의 미리 보기 기능이 있습니다. Widget, Embed, Chat Page와 Desktop, Mobile 화면을 전환하여 공개 전에 변경 내용을 확인하세요.

Appearance

시각적 설정은 Branding, Size & Position, Theme, Other Settings로 나뉩니다.

Branding

• AI Agent Avatar: 에이전트 프로필 사진이나 로고입니다. 최대 5 MB의 이미지 하나를 채팅 헤더와 실행 버튼에 함께 사용합니다. 두 설정이 아니라 하나이므로 한 번 업로드하면 두 위치에 모두 나타나며, 기존의 별도 헤더 로고와 실행 아이콘을 대체합니다. 모든 에이전트는 기본 아바타로 시작합니다. Reset to default로 기본값을 복원하며, 삭제하면 아바타가 표시되지 않습니다. Free를 포함한 모든 플랜에서 사용할 수 있습니다.

AI Agent Avatar는 Widget, Embed, Chat Page에 적용됩니다. Discord 봇의 아바타는 Discord 앱에서 가져오므로 적용되지 않습니다. Discord를 참고하세요.

Size & Position

• Launcher size: Classic, Input Only, Small 중에서 선택합니다. 채팅을 열기 전 실행 버튼의 모습을 정합니다.
• 실행 버튼 닫기: Classic에는 오른쪽 위에 작은 닫기 버튼이 있습니다. 데스크톱에서는 마우스를 올리면 나타나고 터치 기기에서는 항상 보입니다. 현재 페이지를 보는 동안만 위젯을 숨기며 다음 페이지 로드에서 다시 표시됩니다. 다른 크기에는 닫기 버튼이 없습니다.
• Launcher label: Small일 때만 표시됩니다. 작은 실행 버튼의 사용자 지정 문구로 최대 25자이며, “AI에 질문”, “채팅” 같은 텍스트를 넣을 수 있습니다. 비우면 아이콘만 표시됩니다.
• Widget position: 왼쪽 아래, 가운데 아래, 오른쪽 아래 중에서 선택합니다.
• Chat window dimensions: 채팅창 너비는 300–700px, 높이는 400–1200px입니다.
• Draggable launcher: 방문자가 실행 버튼을 다른 위치로 끌어 옮길 수 있습니다. 중요한 콘텐츠를 가릴 때 유용합니다.

Theme

채팅 화면의 색상을 선택하세요.

• Light와 Dark는 모든 계정에서 동일하게 보이는 고정 테마입니다.
• Custom에서는 자신만의 전체 팔레트를 사용할 수 있습니다. 배경, 헤더와 헤더 텍스트, 채팅 시작 버튼과 제안 항목 및 평가 동작 등에 쓰이는 강조색, 메시지 말풍선과 텍스트, AI 메시지 텍스트, link color, 입력란, 테두리 등의 색상을 설정합니다. 각 색상은 배경 대비 WCAG AA 기준으로 검사되며 읽기 어려운 조합에는 경고가 표시됩니다.

브랜드의 헤더와 강조색은 Custom에 설정합니다. Light와 Dark는 중립적인 고정 테마이므로 둘 사이를 바꿔도 사용자 지정 색상이 따라가지 않습니다.

Transparency의 Background는 채팅창이 얼마나 비쳐 보일지 정합니다. 모든 테마에서 작동하며 테마가 색조를 제공합니다.

• Solid: 불투명한 배경입니다. 기본값입니다.
• Glass: 채팅창이 비쳐 보이고 뒤의 웹사이트는 반투명 유리처럼 흐려집니다. Light는 흰색, Dark는 어두운 색, Custom은 지정한 배경색을 사용합니다. Custom에서 헤더가 배경과 다른 색이면 해당 색을 유지하므로 브랜드가 계속 드러납니다. Glass opacity는 색조가 페이지를 덮는 강도를 정합니다. 어떤 웹사이트에서도 텍스트가 읽히는 최소 수준, 즉 Light의 50%, Dark의 65%, Custom에서는 지정 색상에 따른 값부터 최대 95%까지 설정합니다. Custom 색상에서 어떤 불투명도도 가독성을 확보하지 못하면 위젯은 불투명 배경을 사용하고 설정에 이유를 표시합니다. Glass 선택은 유지되며 텍스트나 배경색을 충분한 대비로 바꾸면 다시 적용됩니다.

투명도는 휴대폰을 포함한 Widget과 Embed에 적용됩니다. 전체 화면 Chat Page는 항상 불투명 배경을 사용합니다. 기기에서 투명도 줄이기를 켠 방문자는 이 설정을 웹사이트에 전달하는 Chrome과 Edge에서 Solid 스타일을 봅니다. 페이지를 흐리게 처리하지 못하는 브라우저에서는 텍스트가 잘 보이도록 Glass가 거의 불투명하게 유지됩니다.

Custom을 선택하면 Chat Page에 별도의 사이드바 색상도 제공됩니다. Sidebar background, Sidebar text, Sidebar hover, Sidebar hover text입니다. 전체 화면 Chat Page에만 적용되며 Widget 버튼이나 Embed에는 적용되지 않습니다. 텍스트 색상을 지정하지 않으면 선택한 배경에 맞춰 읽기 쉬운 색상을 자동으로 고릅니다.

말풍선, 입력란, 버튼의 둥근 정도인 corner radius와 text size도 설정할 수 있습니다. 둘 다 모든 테마에서 작동합니다.

Other Settings

• Voice Input: 방문자가 채팅창의 마이크로 음성 메시지를 녹음할 수 있습니다. 녹음은 입력란의 텍스트로 변환되어 보내기 전에 수정할 수 있으며, 2분 후 자동 중지됩니다. 유료 플랜에서 사용할 수 있습니다.
• File Attachments: 방문자가 메시지에 이미지나 문서를 첨부할 수 있습니다. 기본적으로 켜져 있으며 끄면 첨부 버튼이 사라집니다.
• Auto-open Widget: 페이지를 불러올 때 Widget을 자동으로 엽니다.
• Hide Quickchat AI Branding: ‘Powered by Quickchat AI’ 바닥글을 숨겨 자체 브랜드만 표시합니다. 화이트 라벨 기능이 포함된 플랜에서 사용할 수 있습니다.

방문자가 대화를 평가하도록 하려면 Conversations → Insights → Conversation Rating을 여세요. 설정과 결과가 같은 탭에 있습니다. Conversation Rating을 참고하세요.

Text Content

Channels → Your Website → Text Content에서 인사말과 방문자에게 표시되는 다른 문구를 수정하세요.

• Header text: 채팅창 상단에 표시되는 텍스트입니다.
• Welcome message: 매 대화가 시작될 때 AI 에이전트가 보내는 첫 메시지입니다. 예를 들어 _“안녕하세요. 도움이 필요하신가요?”_라고 작성할 수 있습니다.
• Show as a pop-up: 방문자가 클릭하기 전에 주의를 끌도록 실행 버튼 옆에 떠 있는 말풍선으로 인사말을 보여 줍니다. 티저나 실행 메시지라고도 부릅니다. 말풍선은 Welcome message 자체를 사용하므로 내용을 바꾸려면 그 필드를 수정하세요.
• Conversation starters: 방문자가 입력하기 전에 보이는 최대 3개의 예시 메시지입니다. 클릭하면 첫 메시지로 전송됩니다. “위젯을 어떻게 설치하나요?”, _“어떤 연동을 지원하나요?”_처럼 AI가 잘 답하는 주제로 안내할 수 있습니다.
• Input placeholder: 빈 메시지 입력란의 안내 문구입니다.
• Disclaimer text: 대화 뒤에 표시되는 안내로, 보통 사용자가 AI와 대화 중임을 알립니다. 명확하고 눈에 잘 띄게 유지하는 것을 권장합니다.

Pre-chat Screen 섹션은 같은 Text Content 탭에서 위 필드들 아래에 있습니다. 여기서 켜고 헤더, 버튼, 메시지 문구를 수정하세요.

언어와 번역

기본적으로 모든 방문자는 입력한 Text Content를 그대로 봅니다. 유료 플랜에서는 언어별 번역을 추가하여 방문자가 자신의 언어로 위젯을 보도록 할 수 있습니다.

1. Text Content 하위 탭의 Other languages에서 Translate를 클릭하세요. Translate widget text 패널이 열리고 각 번역 옆에 원문이 Default (source)로 표시됩니다.
2. Add language를 클릭하고 언어를 선택하세요. Quickchat AI가 현재 문구를 번역합니다. 해당 언어의 헤더, 인사말, 대화 시작 문구, 입력 안내, 채팅 전 화면, 고지 문구를 검토하고 수정하세요. 변경은 자동 저장됩니다.
3. 비워 둔 필드는 기본 문구를 사용하므로 변경할 내용만 번역하면 됩니다. 자동 번역이 실패해도 직접 입력할 수 있습니다.

추가할 수 있는 언어 수는 플랜에 따라 다릅니다.

방문자 언어를 선택하는 방식

Widget과 Embed에서 Quickchat은 다음 순서로 언어를 정합니다.

1. 로더에 설정한 명시적인 언어 지정: _quickchat("language", "de")를 _quickchat("init", ...)보다 먼저 호출합니다.
2. 페이지의 <html lang> 속성: 예를 들어 <html lang="de">는 독일어 번역을 표시합니다. 권장 방식은 각 번역 페이지의 lang을 올바르게 지정하는 것입니다. 위젯이 자동으로 따라갑니다.
3. 방문자의 브라우저 언어를 사용하고, 일치하는 것이 없으면 Default 문구를 표시합니다.

참고

방문자 언어의 번역이 없으면 항상 Default 문구가 표시됩니다. 빈칸으로 남지 않습니다.

고급 기능: 사용자 지정 매개변수

Quickchat AI Widget과 Embed는 초기화할 때 사용자 지정 매개변수를 받을 수 있습니다. 다음 용도로 사용할 수 있습니다.

• 분석을 보완합니다. Quickchat 플랫폼의 CSV 내보내기에서 사용할 수 있습니다.
• API Actions에 값을 제공하고 허용된 경우 응답을 개인화합니다. AI는 모든 매개변수가 아니라 필터링된 일부만 받습니다. 모델 컨텍스트와 권한을 참고하세요.

유용한 매개변수 예시:

• visitor_name: Mike
• customer_tier: VIP
• order_id: ord_123

visitor_name은 인식되는 연락처 키입니다. customer_tier 같은 사용자 지정 키는 저장하여 Actions에서 사용할 수 있지만, 전송만으로 AI가 응답에 사용할 것을 보장하지는 않습니다. 브라우저에서 받은 값은 검증되지 않은 입력이며 고객 계정에 접근할 권한으로 취급해서는 안 됩니다.

이런 매개변수를 추가하려면 Your Website > Install의 스크립트에 다음 호출을 넣으세요.

Widget과 Embed는 같은 호출 형식을 사용합니다.

_quickchat("custom_params", {
  "visitor_name": "Mike",
  "customer_tier": "VIP",
  "order_id": "ord_123",
});

이 속성은 새 대화마다 연결됩니다. 키 수는 몇 개 정도로 제한하는 것을 권장합니다.

팁

order_id, customer_tier 같은 snake_case 이름의 매개변수는 {{metadata_order_id}}, {{metadata_customer_tier}} 형식으로 API Actions에 바로 넣을 수 있습니다. AI Action Variables를 참고하세요.

스크립트 예시:

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("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

<div id="quickchat-embedded" style="height:600px;overflow:hidden;"></div>
<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("containerId", "quickchat-embedded");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

Embed는 떠 있는 버튼 대신 페이지 안에 채팅창으로 AI 에이전트를 배치합니다. 도움말 센터의 한 열, 연락처 페이지, 앱 내 사이드바처럼 특정 위치에 채팅이 필요할 때 사용하세요.

Embed 추가하기

1. Embed 코드를 가져오세요

   • Quickchat AI App에 로그인하세요.
   • 왼쪽 사이드바에서 Channels → Your Website로 이동하세요.
   • Install 탭을 열고 Install manually with code를 펼치세요.
   • Embed snippet을 복사하세요. <div id="quickchat-embedded"> 컨테이너와 로더 스크립트가 모두 포함됩니다.

2. 웹사이트 HTML 파일이나 사이트 빌더의 페이지를 여세요.

3. 코드를 붙여 넣으세요

   • 페이지의 <body> 안에 Embed 코드를 넣으세요.
   • 채팅창을 표시할 정확한 위치에 배치하세요. <div>가 크기를 정하므로 style="height:600px"를 레이아웃의 공간에 맞게 조정하세요.
   • 사이트 빌더에서는 원하는 위치에 코드 또는 HTML 요소를 추가하고 그 안에 붙여 넣으세요.

참고

Embed는 빌더가 코드를 페이지에 직접 넣는 경우에만 작동합니다. Wix처럼 일부 빌더는 HTML 요소를 별도 프레임에 표시하며, Embed는 프레임 안에서 로드되지 않습니다. 공개한 페이지에 채팅이 나타나지 않으면 사이트 전체 코드 설정으로 Widget을 추가하거나 Chat Page 링크를 공유하세요.