Squarespace에 Asyntai AI 챗봇을 추가하는 방법

Squarespace 웹사이트를 위한 단계별 가이드

플랫폼:

1단계: 임베드 코드 가져오기

먼저 Asyntai 대시보드로 이동하여 "Embed Code" 섹션까지 아래로 스크롤하세요. 다음과 같은 고유한 임베드 코드를 복사하세요:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

참고: 위의 코드는 예시일 뿐입니다. 개인 위젯 ID가 포함된 고유한 임베드 코드를 대시보드에서 복사해야 합니다.

2단계: Code Injection을 사용하여 코드 추가

사이트가 Squarespace Core, Plus 또는 Advanced 플랜(또는 이전 Business 또는 Commerce 플랜)을 사용하는 경우 Code Injection을 사용하여 모든 페이지에 챗봇을 한 번에 추가할 수 있습니다:

Squarespace 계정에 로그인하고 사이트를 여세요
왼쪽 패널에서 Pages를 클릭하세요
패널 하단의 Custom Code를 클릭하세요
Code Injection을 클릭하세요
Footer 섹션으로 스크롤하세요
Footer 텍스트 상자에 Asyntai 임베드 코드를 붙여넣으세요
"Save"를 클릭하세요

참고: Squarespace 7.0에서는 Code Injection이 Pages → Website Tools 아래에 있습니다.

팁: Footer 섹션에 코드를 추가하면 닫는 </body> 태그 바로 앞에 배치되며, 이는 채팅 위젯에 권장되는 위치이고 페이지 로딩 속도에 영향을 주지 않습니다.

대안: Code Block 사용

특정 페이지에만 챗봇을 추가하려면 Code Block을 사용할 수 있습니다. Code Block은 Core, Plus 또는 Advanced 플랜(또는 이전 Business 또는 Commerce 플랜)에서만 JavaScript를 실행합니다.

Squarespace 편집기에서 사이트를 여세요
챗봇을 추가할 페이지로 이동하세요
페이지에서 "Edit"을 클릭하세요
섹션에 마우스를 올리고 \"+ Add Block\"을 클릭하세요
아래로 스크롤하고 "Code"를 선택하세요
연필 아이콘을 클릭하여 코드 블록을 편집하세요
Asyntai 임베드 코드를 붙여넣으세요
블록의 Mode 메뉴가 HTML로 설정되어 있는지 확인하세요
블록 외부를 클릭하여 편집기를 닫으세요
"Save"를 클릭하세요

중요: Code Block을 사용할 때는 챗봇을 표시하려는 각 페이지에 코드를 추가해야 합니다. 사이트 전체에 설치하려면 위의 Code Injection 방법을 사용하세요.

3단계: 설치 확인

변경 사항을 저장한 후, 새 브라우저 탭이나 시크릿 창에서 웹사이트를 엽니다. 오른쪽 하단에 채팅 위젯 버튼이 표시되어야 합니다. 클릭하여 올바르게 열리고 작동하는지 확인합니다.

위젯이 보이지 않나요? 변경 사항을 저장하고 게시했는지 확인하세요. 브라우저 캐시를 지우거나 시크릿 창에서 사이트를 확인해 보세요. Squarespace에서 코드 변경 사항이 적용되는 데 몇 분이 걸릴 수 있습니다. Squarespace에 로그인한 상태에서는 코드가 실행되지 않을 때가 있으므로 비공개 창에서 사이트를 확인하세요.

AI 검색창 추가하기

AI 검색창은 자체 코드를 가진 별도의 위젯입니다. 채팅과 함께 추가하거나 단독으로 추가하세요. Standard 이상 요금제가 필요하며, 하위 요금제에서는 검색창은 보이지만 결과를 반환하지 않습니다.

script 태그에 data-replace 속성을 추가하면 테마에 있던 검색창을 대신합니다. 채팅 코드와 같은 위치인 Pages, Custom Code, Code Injection, Footer에 추가하세요. Squarespace는 Core, Plus 또는 Advanced 플랜(또는 이전 Business 또는 Commerce 플랜)에서만 Code Injection을 제공하므로, 이를 설치하려면 이 중 하나의 플랜이 필요합니다.

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>