Webflow에 AI 챗봇을 추가하는 방법(5분이면 충분해요)

Nexoply는 전용 대시보드에서 만들고 스크립트 태그 하나로 Webflow 사이트에 추가하는 AI 어시스턴트예요. Webflow에는 그 한 줄만 들어가고, 어시스턴트의 지식, 디자인, 동작은 Nexoply에서 코드 없이, AI 키 없이 관리해요. AI는 Nexoply가 직접 운영하기 때문이에요. 실제로는 다음과 같은 의미예요.

• 비즈니스를 알아요. 서비스와 가격, 자주 묻는 질문, 정책, 영업시간, 서비스 지역을 추가하거나 Webflow 사이트의 공개 페이지에서 가져오세요(무료 플랜은 스캔당 15페이지). 승인하기 전에는 아무것도 추가되지 않아요.
• 그 정보로만 답해요. 모르는 내용은 추측하지 않고 모른다고 말하도록 지시되어 있으며, 모든 대화를 대시보드에서 검토할 수 있어요.
• 디자인에 맞춰요. 메시지 버튼이나 사이드 탭, 색상, 글꼴, 로고, 기본 제공 템플릿, 휴대폰용 별도 디자인, 특정 페이지용 페이지 규칙, 예약, 전화, WhatsApp 같은 시작 화면 버튼을 설정해요.
• 12개 언어로 답해요. 지원하는 다른 언어로 쓰는 방문자는 그 언어로 답을 받아요.
• 이런 것은 아니에요. 사람이 응대하는 라이브 채팅 받은편지함이 아니고, 예약이나 결제를 직접 받지도 않아요. 버튼으로 방문자를 예약 페이지, 전화, WhatsApp으로 안내해요.

무료 플랜에는 월 대화 50건이 포함되고, 유료 플랜은 월 $19부터예요. 자세한 내용은 가격 페이지에서 확인하세요. 고객의 Webflow 사이트를 제작하고 있나요? 비즈니스마다 자체 Nexoply 계정과 챗봇 하나를 가지므로, 고객의 정보로 설정하세요. 전체 옵션은 챗봇 기능을 참고하세요.

먼저 다음 세 가지를 확인하세요.

• Nexoply 계정. 무료로 가입하세요. 무료 플랜에는 월 대화 50건이 포함되고, 카드가 필요 없어요.
• Nexoply에 입력한 비즈니스 정보: 서비스와 가격, 자주 묻는 질문, 정책, 영업시간, 서비스 지역. 가장 빠른 방법은 Webflow 사이트 주소를 입력해 Nexoply가 공개 페이지를 가져오게 하는 거예요(JavaScript로 만든 페이지도 읽어요). 제안을 검토하고, 승인하기 전에는 아무것도 추가되지 않아요.
• Webflow 프로젝트 설정에 대한 접근 권한과 사용자 지정 코드를 허용하는 플랜. Custom code 설정을 쓸 수 없다면 플랜을 확인하거나 사이트 소유자에게 문의하세요.

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

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

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

1. 1

   Project settings 열기

   Webflow에서 해당 프로젝트의 Project settings(프로젝트 설정)를 여세요.

2. 2

   Custom code로 이동하기

   Custom code(사용자 지정 코드) 섹션을 여세요. 여기에 넣은 코드는 사이트 전체에 적용되어 프로젝트의 모든 페이지에서 실행돼요.

3. 3

   Footer code에 붙여 넣기

   Nexoply 코드를 Footer code에 붙여 넣으세요. Footer code는 각 페이지의 끝 바로 앞에 들어가며, 스크립트가 들어가야 할 위치가 바로 여기예요.

4. 4

   저장하기

   Project settings에서 변경 사항을 저장하세요.

5. 5

   게시하기

   사이트를 게시하세요. 사용자 지정 코드는 게시된 사이트에만 추가되므로, 이 단계를 거쳐야 채팅 버튼이 나타나요.

방문자와 같은 화면으로 보기 위해 새 시크릿 창에서 게시된 사이트를 여세요. 아래쪽 모서리에 채팅 버튼이 나타나요. "신규 환자도 받나요?"나 "첫 진료 때 무엇을 가져가야 하나요?" 같은 실제 질문을 해 보세요(더 많은 예시는 병원·클리닉용 AI 챗봇 가이드에 있어요). 몇 초 안에 Nexoply 대시보드의 대화에 그 대화가 표시돼요. 그 뒤로는 대시보드에서 바꾼 내용이 Webflow에서 다시 게시하지 않아도 약 1분 안에 사이트에 반영돼요.

• 게시하지 않음. Project settings를 저장하는 것만으로는 충분하지 않아요. 사이트를 게시한 다음 새로 고치세요.
• Designer에서 확인함. Designer가 아니라 시크릿 창에서 게시된 사이트를 확인하세요.
• 잘못된 입력란이거나 코드 일부가 빠짐. Custom code를 다시 열고 코드가 Footer code에 <script부터 </script>까지 온전하게, 바뀌지 않은 채로 들어 있는지 확인하세요.
• 플랜 또는 권한. 사용자 지정 코드를 저장할 수 없다면 Webflow 플랜에서 허용되는지, 프로젝트에서 내 역할로 Project settings를 편집할 수 있는지 확인하세요.
• 허용된 도메인. 챗봇 페이지에서 이 웹사이트에서만 허용을 설정했다면 사이트가 게시되는 모든 주소를 입력하세요(예: myclinic.com, 하위 도메인은 *.myclinic.com).
• Content-Security-Policy. 사이트에서 Content-Security-Policy를 보낸다면 script-src, connect-src, img-src에 https://nexoply.com을 허용하세요.
• 챗봇이 꺼져 있거나 광고 차단기 사용. 챗봇 사용 스위치가 켜져 있는지 확인하세요. 드물게 브라우저 확장 프로그램이 채팅 위젯을 차단하니 다른 브라우저에서 시도해 보세요.

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

Webflow의 내 버튼으로 채팅을 열려면 짧은 스크립트에서 window.dispatchEvent(new Event("nexoply:open-chat"))를 호출하면 되고, 페이지가 로드되자마자 열려면 스크립트 태그에 data-open="true"를 추가하세요. 그다음에는 대화를 정기적으로 검토하세요. 어시스턴트가 답하지 못한 질문이 목록으로 정리되어 있고, 클릭 한 번으로 자주 묻는 질문으로 만들 수 있어요. 전체 그림은 Nexoply 작동 방식에서 확인하고, 다른 플랫폼은 웹사이트에 AI 챗봇을 추가하는 방법을 참고하세요.