ADTO.AI 상담 챗봇을 쇼핑몰 사이트에 임베드하는 단계별 가이드 (소요시간 약 30분)
쇼핑몰 운영자가 여름 성수기에 가장 먼저 체감하는 병목은 CS(고객 상담)다. 휴가 시즌이 겹치면 문의량은 늘고 응대 인력은 오히려 줄어드는 역설이 생긴다. 상담 챗봇을 사이트에 직접 심어두면 반복 문의의 상당 부분을 자동으로 처리할 수 있다. 이 글은 ADTO.AI 챗봇을 쇼핑몰에 임베드하는 과정을 3단계로 나눠 설명한다. 코딩 경험이 없어도 따라올 수 있도록 구성했으며, 처음부터 끝까지 약 30분 안에 완료할 수 있다.
시작 전 준비물 확인
본격적인 설치에 앞서 아래 항목을 미리 갖춰두면 중간에 멈추는 일이 없다.
| 준비 항목 | 확인 방법 | 비고 |
|---|---|---|
| ADTO.AI 계정 | adto.ai 로그인 | 무료 플랜도 임베드 가능 |
| 쇼핑몰 관리자 접근 권한 | 카페24·고도몰·자체 CMS 관리자 페이지 | HTML 편집 권한 필요 |
| 챗봇 시나리오 초안 | 메모장 또는 스프레드시트 | 3~5개 FAQ 정도면 충분 |
| 브랜드 색상 코드(HEX) | 기존 로고 파일 또는 디자이너 문의 | 없으면 기본 테마 사용 |
준비가 됐다면 단계별로 진행한다.
1단계: ADTO.AI 대시보드에서 챗봇 생성 및 기본 설정 (약 10분)
ADTO.AI에 로그인한 뒤 좌측 메뉴에서 [챗봇 관리] → [새 챗봇 만들기] 를 선택한다.
챗봇 이름과 용도 설정
챗봇 이름은 내부 관리용이므로 고객에게 노출되지 않는다. 예를 들어 여름세일_CS봇_2026 처럼 시즌과 용도를 조합하면 나중에 여러 챗봇을 관리할 때 구분하기 쉽다.
인사말(Welcome Message) 예시
인사말은 챗봇이 처음 열릴 때 고객에게 보여주는 첫 문장이다. 너무 딱딱하거나 너무 가볍지 않게 쓰는 것이 일반적이다.
- 안 좋은 예: "안녕하세요. 무엇을 도와드릴까요?"
- 좋은 예 A: "안녕하세요! 주문·배송·교환 관련 문의는 여기서 바로 확인하실 수 있어요."
- 좋은 예 B: "여름 세일 관련 문의가 많아요. 배송 일정, 사이즈 교환, 할인 쿠폰 중 어떤 내용이 궁금하신가요?"
좋은 예 B처럼 현재 시즌에 맞는 키워드를 인사말에 넣으면 고객이 챗봇을 더 자연스럽게 사용하는 경향이 있다.
FAQ 시나리오 입력
[시나리오 편집기]에서 자주 묻는 질문 3~5개를 먼저 등록한다. 여름 시즌 쇼핑몰 기준 우선순위가 높은 FAQ는 다음과 같다.
- 배송 소요 기간 (예: "주문 후 평균 2~3 영업일 내 출고됩니다.")
- 교환·반품 신청 방법
- 여름 세일 쿠폰 적용 조건
- 사이즈 가이드 링크
- 재고 문의 처리 방법 ("재고 확인은 상품 페이지 하단 '재입고 알림' 버튼을 이용해 주세요.")
FAQ를 모두 입력했으면 [저장] 을 누른다.
2단계: 위젯 디자인 커스터마이징 및 임베드 코드 발급 (약 10분)
위젯 디자인 설정
[위젯 설정] 탭으로 이동하면 챗봇 버튼의 위치, 색상, 아이콘을 조정할 수 있다.
| 설정 항목 | 권장값 | 이유 |
|---|---|---|
| 버튼 위치 | 우측 하단 | 대부분의 쇼핑몰 레이아웃과 충돌이 적음 |
| 버튼 색상 | 브랜드 메인 컬러 | 이질감 없이 사이트에 녹아듦 |
| 챗봇 창 너비 | 360px (기본값) | 모바일·PC 모두 가독성 양호 |
| 자동 팝업 지연 | 15~20초 | 너무 빠르면 이탈률 증가 가능 |
자동 팝업(Auto-open) 기능은 켜두는 것이 일반적이지만, 지연 시간을 15초 이상으로 설정하는 것이 좋다. 페이지 진입 즉시 팝업이 뜨면 오히려 방해가 된다는 사용성 연구 결과가 여럿 있다.
임베드 코드 발급
디자인 설정을 저장하면 [임베드 코드] 탭에 아래와 같은 형태의 스크립트가 생성된다.
(실제 코드는 ADTO.AI 대시보드에서 자동 생성됩니다)코드 옆의 [복사] 버튼을 눌러 클립보드에 저장해둔다.
3단계: 쇼핑몰 CMS에 스크립트 삽입 (약 10분)
플랫폼별로 삽입 위치가 조금씩 다르다. 공통 원칙은 </body> 태그 바로 앞에 스크립트를 붙여넣는 것이다.
카페24 기준 삽입 방법
- 카페24 관리자 → [디자인] → [디자인 편집]
- 현재 사용 중인 스킨 선택 → [HTML 편집]
layout_main.html또는index.html파일 열기</body>태그를 검색(Ctrl+F)해서 찾은 뒤, 그 바로 위에 복사한 스크립트 붙여넣기- [저장] 후 실제 쇼핑몰 페이지에서 챗봇 버튼이 나타나는지 확인
고도몰 기준 삽입 방법
- 고도몰 관리자 → [디자인] → [레이아웃 관리]
- 공통 레이아웃(하단 영역) 편집
- 동일하게
</body>앞에 스크립트 삽입 후 저장
자체 개발 쇼핑몰(React·Next.js 등)
_document.js 또는 index.html의 <body> 최하단에 스크립트를 추가하거나, useEffect 훅 안에서 동적으로 스크립트를 로드하는 방식을 사용하는 것이 일반적이다.
흔한 실수와 설치 후 체크리스트
설치를 마쳤다면 아래 항목을 하나씩 점검한다. 실제로 많은 분들이 설치 직후 이 단계를 건너뛰다가 나중에 문제를 발견하는 경우가 있다.
- PC 브라우저에서 챗봇 버튼이 정상 노출되는지 확인
- 모바일(스마트폰)에서 챗봇 창이 화면을 벗어나지 않는지 확인
- 인사말 문구가 의도한 대로 표시되는지 확인
- FAQ 3개 이상 직접 입력해 응답이 정확히 나오는지 테스트
- 자동 팝업 지연 시간이 15초 이상으로 설정되어 있는지 확인
- 챗봇 미응답(fallback) 메시지가 설정되어 있는지 확인 (예: "담당자에게 연결 중입니다. 잠시만 기다려 주세요.")
- Google Analytics 또는 네이버 애널리틱스와 이벤트 연동 여부 확인 (선택)
자주 발생하는 실수 3가지
- 스크립트를
<head>안에 삽입하는 경우: 챗봇 스크립트는 페이지 렌더링을 방해하지 않도록</body>직전에 넣는 것이 원칙이다.<head>안에 넣으면 페이지 로딩 속도에 영향을 줄 수 있다. - 같은 스크립트를 여러 파일에 중복 삽입하는 경우: 챗봇 버튼이 두 개 겹쳐 보이거나 오작동할 수 있다. 공통 레이아웃 파일 한 곳에만 삽입한다.
- FAQ를 1~2개만 등록하고 운영하는 경우: 챗봇이 응답하지 못하는 질문이 많아지면 고객 경험이 오히려 나빠진다. 최소 5개 이상의 시나리오를 등록한 뒤 오픈하는 것이 일반적이다.
마치며
챗봇 임베드 자체는 30분 안에 끝나는 작업이지만, 실제 효과는 시나리오의 품질에서 갈린다. 설치 후 첫 1~2주 동안은 챗봇이 응답하지 못한 질문 로그를 주기적으로 확인하고, 자주 등장하는 패턴을 FAQ에 추가하는 것이 중요하다. 여름 성수기처럼 문의가 집중되는 시기일수록 이 반복 개선 사이클이 CS 부담을 실질적으로 줄여준다.