웹사이트에 AI 챗봇을 추가하는 방법(모든 플랫폼, 단계별 안내)

웹사이트에 AI 챗봇을 추가하는 일은 두 부분으로 나뉘어요. 어시스턴트를 만드는 일과 사이트에 배치하는 일이에요. Nexoply에서는 첫 번째 부분을 Nexoply 대시보드에서 코드 없이, AI 키 없이 진행해요. AI는 Nexoply가 직접 운영하기 때문이에요. 두 번째 부분은 코드 한 줄이에요. 필요한 것은 다음과 같아요.

• Nexoply 계정. 무료로 가입하세요. 무료 플랜에는 월 대화 50건이 포함되고, 카드가 필요 없어요. 유료 플랜은 월 $19부터이며 가격 페이지에서 확인할 수 있어요.
• 사이트에 사용자 지정 코드를 넣을 수 있는 곳에 대한 접근 권한: 사이트 빌더의 푸터 코드 설정, 테마 파일, 또는 HTML 템플릿. 호스팅형 빌더라면 현재 플랜에서 사용자 지정 코드를 쓸 수 있는지 확인하세요.
• 약 5분, 그리고 비즈니스 정보를 검토할 시간.

소규모 비즈니스 웹사이트의 AI 챗봇은 알고 있는 정보만큼만 쓸모가 있어요. Nexoply에는 서비스와 가격, 자주 묻는 질문, 정책, 영업시간, 서비스 지역을 입력해요. 가장 빠른 방법은 웹사이트 가져오기예요. 사이트 주소를 입력하면 Nexoply가 공개 페이지를 읽고(스캔당 무료 15페이지, Starter 40페이지, Business 100페이지, Pro 200페이지), JavaScript로 만든 페이지도 포함해서 가격이 있는 서비스, 자주 묻는 질문, 정책, 영업시간, 연락처를 제안해요. 제안을 검토하고, 승인하기 전에는 아무것도 추가되지 않아요.

그 뒤로 어시스턴트는 그 정보로만 답해요. 모르는 내용은 추측하지 않고 모른다고 말하도록 지시되어 있으며, 모든 대화를 대시보드에서 검토할 수 있어요. 방문자는 12개 언어 중 어떤 언어로든 질문할 수 있고 그 언어로 답을 받아요. Nexoply는 사람이 응대하는 라이브 채팅 받은편지함이 아니고, 예약이나 결제를 직접 받지도 않아요. 버튼으로 방문자를 예약 페이지, 전화, WhatsApp으로 안내해요. 전체 그림은 Nexoply 작동 방식에서 확인하세요.

대시보드에서 챗봇 페이지를 열고(아직 만들지 않았다면 챗봇 만들기를 클릭하세요) 설치 코드를 복사하세요. 코드는 다음과 같아요.

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

YOUR-KEY 자리에는 내 챗봇의 고유 키가 들어가며, 챗봇 페이지에서 자동으로 채워 줘요. 이 키는 공개용이에요. 비밀번호가 아니고 계정에 접근할 수 있게 해 주지도 않으며, 위젯이 어느 비즈니스에 속하는지 알려 주는 역할만 해요. 사이트를 바꾸기 전에 어시스턴트를 먼저 보고 싶다면 챗봇이 있는 테스트 페이지 열기를 클릭하세요.

HTML 파일로 직접 편집하는 사이트라면 닫는 </body> 태그 바로 위에 코드를 한 줄로 붙여 넣으세요.

    <!-- …페이지 콘텐츠… -->
    <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
  </body>
</html>

1. 1

   공통 푸터 찾기

   페이지들이 푸터 템플릿이나 인클루드를 공유한다면(PHP 사이트와 정적 사이트 생성기에서 흔해요) 그곳에 코드를 한 번만 붙여 넣으세요. 그렇지 않다면 채팅 버튼을 표시할 각 페이지에 붙여 넣으세요.

2. 2

   페이지당 한 번만 붙여 넣기

   페이지마다 한 번이면 충분해요. 스크립트는 비동기로 로드되므로 페이지 끝에 두면 콘텐츠가 먼저 표시돼요.

3. 3

   업로드 또는 배포하기

   파일을 저장하고 평소 사이트를 업데이트하는 방식대로 업로드하거나 배포하세요.

사이트 빌더와 프레임워크에는 사이트 전체에 적용되는 코드를 넣는 곳이 하나씩 있어요. 그곳에 같은 코드 한 줄을 붙여 넣으면 되고, 플랫폼별 가이드에서 단계별로 안내해요.

• npm 패키지가 필요 없어요. 위젯은 언제나 같은 스크립트 태그예요. data-chatbot 속성과 widget.js가 포함된 src만 유지하면 코드에서 태그를 추가해도 작동해요.
• 싱글 페이지 앱. 앱의 루트 요소 바깥에 페이지당 한 번만 마운트되고, 방문자가 페이지를 이동해도 대화를 유지하며, URL이 바뀌면 페이지 규칙을 다시 확인해요. 두 번 로드돼도 문제없어요.
• 서버 사이드 렌더링. 브라우저에서만 실행되고 프레임워크의 마크업을 건드리지 않으므로 하이드레이션 문제가 없어요.
• Content-Security-Policy. 사이트에서 CSP를 보낸다면 script-src, connect-src, img-src에 https://nexoply.com을 허용하세요.
• 로컬 테스트. 이 웹사이트에서만 허용을 입력했다면 로컬 개발 호스트를 포트와 함께 추가하거나(예: localhost:3000), 테스트하는 동안에는 목록을 비워 두세요.

새 시크릿 창에서 실제 사이트를 여세요. 아래쪽 모서리에 채팅 버튼이 나타나요. "주말에도 긴급 출장이 되나요?"나 "어느 지역까지 오시나요?" 같은 실제 질문을 해 보세요(더 많은 예시는 배관업체용 AI 챗봇 가이드에 있어요). 몇 초 안에 Nexoply 대시보드의 대화에 그 대화가 표시돼요. 그 뒤로는 대시보드에서 바꾼 내용이 코드를 다시 수정하지 않아도 약 1분 안에 사이트에 반영돼요.

• 코드가 아직 반영되지 않음. 변경 사항을 저장하고 게시 또는 배포했는지 확인한 다음, 시크릿 창에서 실제 사이트를 새로 고치세요. 사이트 빌더의 에디터 미리 보기에서는 사용자 지정 코드가 실행되지 않는 경우가 있어요.
• 코드가 바뀌었거나 일부가 빠짐. <script부터 </script>까지 코드가 온전한지, data-chatbot과 키가 그대로인지 확인하세요.
• 사용자 지정 코드를 쓸 수 없음. 호스팅형 빌더에서는 플랜에 따라 사용자 지정 코드 사용 여부가 달라질 수 있어요(예: Wix는 연결된 도메인이 있는 프리미엄 플랜, Squarespace는 Business 플랜 이상이 필요해요).
• 허용된 도메인. 챗봇 페이지에서 이 웹사이트에서만 허용을 설정했다면 사이트의 모든 주소가 정확히 입력되어 있는지 확인하세요(예: mybusiness.com, 하위 도메인은 *.mybusiness.com).
• Content-Security-Policy. 엄격한 정책이 있으면 script-src, connect-src, img-src에 https://nexoply.com을 허용하기 전까지 스크립트가 차단돼요.
• 챗봇이 꺼져 있거나 광고 차단기 사용. 챗봇 사용 스위치가 켜져 있는지 확인하세요. 드물게 브라우저 확장 프로그램이 채팅 위젯을 차단하니 다른 브라우저에서 시도해 보세요.

디자인은 사이트 코드가 아니라 Nexoply 대시보드에서 설정해요. 챗봇 → 맞춤 설정에서 메시지 버튼의 아이콘(또는 내 이미지나 SVG), 텍스트, 모양, 크기, 색상, 테두리, 그림자, 위치를 고르거나, 대신 화면 가장자리의 사이드 탭(예: "도움말")을 사용할 수 있어요. 휴대폰에서는 다른 디자인을 설정하고, 페이지 규칙으로 특정 페이지(예: /services/*)에서 버튼을 바꾸거나 숨길 수 있어요. 채팅 창을 사이트의 글꼴과 색상에 맞추고, 로고를 추가하거나 기본 제공 템플릿에서 시작하세요. 시작 화면에는 예약, 전화, WhatsApp 같은 나만의 버튼을 표시할 수 있어요. 위젯은 Shadow DOM을 사용하므로 사이트의 CSS가 영향을 주지 않아요.

그다음에는 대화를 정기적으로 검토하세요. 어시스턴트가 답하지 못한 질문이 목록으로 정리되어 있고 클릭 한 번으로 자주 묻는 질문으로 만들 수 있으며, 인사이트에서 주제, 가장 바쁜 시간대, 채팅이 열린 페이지를 볼 수 있어요. 전체 옵션은 챗봇 기능을 참고하고, 도구를 먼저 비교하고 싶다면 소규모 비즈니스를 위한 최고의 AI 챗봇을 읽어 보세요.