BBPAGE JOURNAL
홈페이지에 AI 챗봇 설치하기: 비비페이지 위젯 설정부터 확인까지
비비페이지 AI 채팅 위젯은 관리자에서 홈페이지 주소를 등록하고, 발급된 설치 코드를 홈페이지에 넣어 연결합니다. 코드를 붙인 뒤에는 편집 화면이 아니라 실제 게시된 주소에서 열어 확인해야 합니다.
이 글의 내용
설치 전에 홈페이지 수정 권한과 안내 자료를 준비하세요
홈페이지에 외부 스크립트를 넣을 권한이 있어야 합니다. 직접 수정하지 못한다면 홈페이지 제작사나 운영 담당자에게 설치 코드를 전달하세요. 채팅에서 안내할 브랜드 소개, 서비스 조건, 문의 링크도 먼저 정리합니다.
블로그나 일부 프로필 서비스처럼 임의의 스크립트를 넣을 수 없는 곳에서는 위젯 대신 비비페이지의 공유 링크를 연결하는 방식을 살펴볼 수 있습니다. 설치 가능한지는 해당 홈페이지 서비스의 편집 권한과 정책에 따라 달라집니다.
링크 연결과 홈페이지 위젯 설치 중 맞는 방법을 고릅니다
직접 운영하는 홈페이지에서 HTML이나 공통 코드를 수정할 수 있다면 채팅 위젯을 설치하는 방법을 검토할 수 있습니다. 고객은 기존 홈페이지를 읽다가 같은 화면에서 질문합니다. 홈페이지 제작사에 맡겨둔 경우에는 관리자 접근 권한을 새로 공유하기보다 발급된 설치 코드와 필요한 변경 위치를 전달해 적용을 요청할 수 있습니다.
네이버 블로그나 인스타그램처럼 임의의 스크립트를 넣기 어려운 채널에서는 비비페이지의 공개 링크를 연결합니다. 블로그 글, 프로필, 매장 QR에서 링크를 열어 소개와 AI 안내로 들어오는 방식입니다. 링크를 거는 것과 해당 플랫폼 안에 위젯이 뜨는 것은 다른 연결 방식입니다.
병원·전문직 홈페이지처럼 안내 범위를 분명히 해야 하는 경우에는 설치 전에 답할 질문과 담당자에게 연결할 질문도 정합니다. 예를 들어 진료시간과 주차는 등록된 안내로 설명할 수 있지만 개인의 증상에 대한 판단은 의료진에게 이어져야 합니다. 기능을 설치하는 날과 안내 내용의 준비를 별개로 생각하지 않는 것이 좋습니다.
관리자에서 실제 홈페이지 주소를 등록합니다
비비페이지 관리자의 ‘설치·공유’에서 위젯 설치 항목을 열고 채팅을 사용할 홈페이지 주소를 등록합니다. 실제 사용 중인 https 주소를 기준으로 입력하세요. www가 붙은 주소와 붙지 않은 주소를 모두 사용한다면 각각 등록해야 합니다.
홈페이지가 다른 주소로 이동하는 경우에는 최종으로 열리는 주소도 확인하세요. 읽기 전용 멤버는 설정을 바꿀 수 없으므로 수정 권한이 있는 담당자가 저장해야 합니다.
발급된 설치 코드를 한 번만 넣습니다
관리자에서 복사한 코드를 홈페이지의 공통 하단 코드 영역 또는 HTML의 닫는 body 태그 앞에 넣습니다. 아래는 형태를 보여주는 예시입니다. YOUR_CHANNEL_ID를 그대로 쓰지 말고 관리자에서 발급된 전체 코드를 복사하세요.
아임웹은 관리자 설정의 SEO 메뉴에서 공통 코드 삽입 영역을 찾아 Footer Code에 추가하는 방식으로 설치할 수 있습니다. 기존 분석 코드 등을 지우지 말고 아래에 추가한 뒤 저장하세요. 메뉴 위치가 달라졌다면 아임웹의 최신 공식 도움말을 확인하세요.
<script src="https://www.bbpage.kr/widget.js" data-channel="YOUR_CHANNEL_ID" defer></script>버튼이 보이기 전에 안내 자료부터 시험합니다
기본 자료는 브랜드 소개, 운영시간, 위치, 서비스 조건, 문의 경로입니다. 각 항목은 실제 고객에게 보여줄 수 있는 최신 정보여야 합니다. 지점이 여러 개라면 지점 이름을 붙이고, 기간이 정해진 안내라면 시작과 종료 조건을 적습니다. 예전 이벤트 안내를 그대로 넣어두지 않도록 확인합니다.
자주 받는 질문을 다섯 개 준비하고 각각 어떤 자료에서 답을 찾을 수 있는지 적어보세요. 주차 위치가 원문에 없는데 “주차가 가능한가요?”를 시험하면 시스템이 자료 부족을 어떻게 안내하는지 볼 수 있습니다. 맞는 답을 하는지만 아니라, 자료가 없을 때 다음 행동을 알려주는지도 확인해야 합니다.
문의 링크는 실제로 눌러 확인합니다. 운영시간 밖 문의라면 연락 가능한 경로와 예상되는 확인 절차를 안내하고, 연동되지 않은 예약을 확정했다고 말하지 않도록 범위를 정합니다. 방문자가 “AI와 대화했다”에서 끝나지 않고 필요한 안내나 담당자에게 도착하는 것이 목표입니다.
게시된 사이트에서 PC와 모바일을 모두 확인합니다
설정을 저장하고 홈페이지를 게시한 뒤 실제 주소를 새로 열어보세요. 편집 화면이나 디자인 미리보기에서는 외부 스크립트가 동작하지 않을 수 있습니다. 채팅을 열어 준비한 질문을 입력하고 답변과 문의 링크를 확인합니다.
- 채팅을 열고 닫을 수 있는지 확인
- PC와 모바일에서 버튼이 잘리지 않는지 확인
- 준비한 서비스 정보를 정확히 안내하는지 확인
- 문의·예약 링크가 실제로 열리는지 확인
- 관리자 설치 화면에서 연결 상태를 다시 확인
모바일에서는 네 가지 장면을 꼭 열어보세요
첫째, 페이지를 처음 열었을 때 위젯이 소개나 구매 버튼을 가리지 않는지 봅니다. 둘째, 채팅을 펼친 뒤 입력창을 눌러 키보드가 올라와도 메시지와 전송 버튼이 보이는지 확인합니다. 셋째, 답변 속 링크를 눌렀다가 돌아와도 화면을 계속 사용할 수 있는지 봅니다. 넷째, 채팅을 접으면 원래 읽던 본문으로 자연스럽게 돌아오는지 확인합니다.
PC에서는 사이트의 고정 메뉴, 쿠키 안내, 상담 버튼과 겹치는지도 확인하세요. 같은 설치 코드를 두 번 넣으면 두 위젯이 뜨거나 동작을 이해하기 어려워질 수 있으므로 공통 코드와 개별 페이지 코드에 중복으로 들어갔는지 살펴봅니다.
기본 동작 확인은 로그아웃 상태나 새 창에서도 진행합니다. 관리자에게만 보이는 테스트 화면을 보고 설치가 끝났다고 생각하지 않기 위해서입니다. 광고 차단 확장 프로그램이나 특정 브라우저 설정이 영향을 주는지도 실제 고객 환경에서 문제가 생길 때 확인할 항목입니다.
채팅이 안 보이면 세 곳부터 확인하세요
설치가 끝나면 사이트의 기존 문의 버튼에도 채팅 열기를 연결할 수 있습니다. 기본 위젯이 먼저 정상 작동하는지 확인한 후 적용하세요. 아래 속성은 설치된 위젯을 여는 버튼 예시입니다.
| 증상 | 먼저 확인할 내용 |
|---|---|
| 아무 버튼도 안 보임 | 코드 저장·게시 여부, 실제 홈페이지 주소 |
| 특정 주소에서만 안 보임 | www·서브도메인 등 허용 주소 등록 |
| 편집 화면에서만 안 보임 | 실제 게시된 홈페이지에서 다시 확인 |
| 버튼이 두 개 보임 | 공통 코드와 페이지 코드에 중복 설치했는지 |
| 버튼은 열리지만 답변이 부족함 | 설치 문제와 안내 자료 부족을 구분해 확인 |
<button type="button" data-bbchat-open>문의하기</button>안 보일 때는 등록 주소 → 스크립트 → 실제 게시 순서로 봅니다
먼저 고객이 최종적으로 접속하는 주소가 등록된 주소와 같은지 확인합니다. www 유무나 서브도메인이 다를 수 있고, 입력한 주소가 다른 주소로 이동할 수도 있습니다. 관리자 설정을 저장할 권한이 있는 사람이 변경했는지도 확인합니다.
다음은 설치 코드입니다. 관리자에서 받은 전체 코드를 사용했는지, 예시의 채널 ID를 그대로 두지 않았는지, 홈페이지의 공통 영역에 한 번만 넣었는지 봅니다. 개발자 도구를 사용할 수 있는 담당자라면 스크립트 요청이 실패했는지와 콘솔 오류를 확인하면 원인을 좁히기 쉽습니다.
마지막으로 디자인 미리보기가 아니라 게시된 실제 사이트를 봅니다. 저장만 하고 게시하지 않았거나 캐시 때문에 이전 페이지를 보고 있을 수 있습니다. 해결되지 않으면 홈페이지 주소, 문제가 생기는 기기와 브라우저, 발생 시각, 화면을 준비해 문의하세요. 계정 비밀번호나 비공개 고객 정보를 보내는 대신 재현에 필요한 정보만 전달합니다.
설치 뒤에는 자료 변경 담당자를 정합니다
메뉴와 영업시간, 요금, 예약 경로가 바뀌면 홈페이지와 AI 안내 자료를 함께 갱신합니다. 홈페이지 문구는 새것인데 채팅은 이전 조건을 설명하면 고객은 어느 쪽을 믿어야 할지 모릅니다. 변경이 생길 때 누가 어디를 고칠지 간단한 목록을 남겨두는 것이 좋습니다.
도입 초기에는 실제 질문을 살펴 답하지 못한 항목부터 보완합니다. 질문이 많다는 이유만으로 모든 내용을 추가하기보다 현재 서비스 범위에 맞는지 확인하세요. 예외 요청이나 전문 판단이 필요한 문의는 담당자 연결을 개선하는 것이 더 적절할 수 있습니다.
위젯 설치의 완료 기준은 버튼이 뜨는 것만이 아닙니다. 정확한 자료로 답하고, 모르는 질문을 다루고, 링크로 연결하고, 모바일에서 읽고 닫을 수 있어야 합니다. 이 네 가지를 확인하면 홈페이지에 붙인 AI 안내가 실제 고객 접점으로 작동하는지 판단할 수 있습니다.
자주 묻는 질문
네이버 블로그 안에도 설치 코드를 넣으면 되나요?
임의의 스크립트 삽입을 지원하지 않는 채널에서는 공개 링크를 연결하는 방식을 사용합니다. 홈페이지 위젯 설치와 링크 공유는 구분해서 적용하세요.
아임웹에서는 어디에 코드를 넣나요?
현재 안내 기준으로 공통 코드 삽입의 Footer Code 영역을 활용하는 방식입니다. 관리자 메뉴는 변경될 수 있으므로 공식 설치 안내와 아임웹 도움말을 함께 확인하세요. 기존 분석 코드를 삭제하지 말고 발급된 코드를 한 번 추가합니다.
www가 붙은 주소와 안 붙은 주소를 둘 다 등록해야 하나요?
두 주소를 실제로 사용한다면 각각의 접근을 확인해야 합니다. 한 주소에서 다른 주소로 이동한다면 최종 주소도 확인하고 관리자에 사용할 주소를 등록하세요.
설치했는데 엉뚱한 답을 한다면 코드를 다시 넣어야 하나요?
위젯이 정상적으로 열리고 있다면 먼저 등록한 자료와 적용 조건을 봅니다. 오래된 정보나 서로 다른 상품의 설명이 섞였는지 확인하고, 같은 질문으로 수정 전후를 시험하세요. 코드 설치 문제와 안내 내용 문제를 나누는 것이 좋습니다.