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

Nexoply는 전용 대시보드에서 만들고 코드 한 줄로 Squarespace 사이트에 추가하는 AI 어시스턴트예요. Squarespace에는 그 한 줄만 들어가고, 나머지는 모두 Nexoply에서 코드 없이, AI 키 없이 설정해요. AI는 Nexoply가 직접 운영하기 때문이에요. 실제로는 다음과 같은 의미예요.

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

무료 플랜에는 월 대화 50건이 포함되고, 유료 플랜은 월 $19부터예요. 자세한 내용은 가격 페이지에서 확인하세요. 전체 옵션은 챗봇 기능을 참고하세요.

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

• Nexoply 계정. 무료로 가입하세요. 무료 플랜에는 월 대화 50건이 포함되고, 카드가 필요 없어요.
• Nexoply에 입력한 비즈니스 정보: 서비스와 가격, 자주 묻는 질문, 정책, 영업시간, 서비스 지역. 가장 빠른 방법은 Squarespace 사이트 주소를 입력해 Nexoply가 공개 페이지를 가져오게 하는 거예요(JavaScript로 만든 페이지도 읽어요). 제안을 검토하고, 승인하기 전에는 아무것도 추가되지 않아요.
• Code Injection이 포함된 Squarespace 플랜, 즉 Business 플랜 이상. 확실하지 않다면 아래에 설명한 Squarespace 설정을 열어 사이트에서 Code Injection을 쓸 수 있는지 확인하세요.

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

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

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

1. 1

   사이트 설정 열기

   Squarespace에 로그인하고 원하는 사이트를 연 다음 Settings(설정)를 클릭하세요.

2. 2

   Code Injection으로 이동하기

   Advanced(고급)를 연 다음 Code Injection을 여세요. 사이트 전체에 적용되는 영역이라 여기에 넣은 코드는 모든 페이지에서 실행돼요.

3. 3

   Footer에 붙여 넣기

   Nexoply 코드를 Footer 입력란에 붙여 넣으세요. Footer 영역은 각 페이지의 끝 바로 앞에 들어가며, 코드가 들어가야 할 위치가 바로 여기예요.

4. 4

   저장하기

   Save를 클릭하세요. Squarespace에서 따로 설치하거나 설정할 것은 없어요.

방문자와 같은 화면으로 보기 위해 새 시크릿 창에서 실제 사이트를 여세요. 아래쪽 모서리에 채팅 버튼이 나타나요. "채식 메뉴가 있나요?"나 "8명 테이블을 예약할 수 있나요?" 같은 실제 질문을 해 보세요(더 많은 예시는 음식점용 AI 챗봇 가이드에 있어요). 몇 초 안에 Nexoply 대시보드의 대화에 그 대화가 표시돼요. 그 뒤로는 대시보드에서 바꾼 내용이 Squarespace에 다시 들어가지 않아도 약 1분 안에 사이트에 반영돼요.

• 플랜. Code Injection이 없거나 잠겨 있다면 사이트의 플랜에 포함되지 않은 거예요. Business 플랜 이상이 필요해요.
• 잘못된 입력란. Code Injection을 다시 열고 코드가 Footer 입력란에 <script부터 </script>까지 온전하게, 바뀌지 않은 채로 들어 있는지 확인하세요.
• 저장하지 않았거나 이전 화면을 보고 있음. Save를 클릭했는지 확인한 다음, 에디터에 로그인한 상태로 확인하지 말고 시크릿 창에서 실제 사이트를 새로 고치세요.
• 허용된 도메인. 챗봇 페이지에서 이 웹사이트에서만 허용을 설정했다면 방문자가 사이트에 접속하는 모든 주소가 정확히 입력되어 있는지 확인하세요(예: mystudio.com, 하위 도메인은 *.mystudio.com).
• 챗봇이 꺼져 있거나 광고 차단기 사용. 챗봇 사용 스위치가 켜져 있는지 확인하세요. 드물게 브라우저 확장 프로그램이 채팅 위젯을 차단하니 다른 브라우저에서 시도해 보세요.

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

그다음에는 대화를 정기적으로 검토하세요. 어시스턴트가 답하지 못한 질문이 목록으로 정리되어 있고, 클릭 한 번으로 자주 묻는 질문으로 만들 수 있어요. 전체 그림은 Nexoply 작동 방식에서 확인하고, 다른 플랫폼의 사이트도 운영하고 있다면 웹사이트에 AI 챗봇을 추가하는 방법을 참고하세요.