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

Shopify 스토어를 위한 단계별 가이드

플랫폼:

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<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단계: Shopify 테마에 코드 추가

다음 단계에 따라 Shopify 스토어에 챗봇을 추가합니다:

Shopify Admin 패널에 로그인하세요
Online Store → Themes로 이동하세요
현재 테마를 찾아 "..." 버튼(세 개의 점)을 클릭합니다
드롭다운 메뉴에서 "Edit code"를 선택하세요
왼쪽 사이드바에서 Layout 아래의 theme.liquid를 클릭합니다
아래로 스크롤하여 닫는 </body> 태그를 찾으세요
</body> 태그 바로 앞에 Asyntai 삽입 코드를 붙여넣으세요
오른쪽 상단의 "Save"를 클릭하세요

팁: Ctrl+F(Windows) 또는 Cmd+F(Mac)를 사용하여 theme.liquid 파일에서 </body>를 빠르게 검색합니다.

대안: Shopify 앱 사용

코드를 편집하지 않으려면 Shopify 앱을 사용하여 커스텀 스크립트를 추가할 수 있습니다:

Shopify App Store로 이동하세요
"Custom Script Injector" 또는 "Header & Footer Scripts"를 검색합니다
원하는 앱을 설치하세요
앱을 사용하여 푸터 섹션에 Asyntai 임베드 코드를 추가하세요

3단계: 설치 확인

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

위젯이 보이지 않나요? Shopify가 테마 파일을 캐시할 수 있습니다. 시크릿/프라이빗 브라우저 창에서 스토어를 열거나, 몇 분 기다렸다가 페이지를 새로고침해 보세요.

Shopify Plus 사용자

Shopify Plus를 사용하는 경우, checkout.liquid 파일을 통해 결제 페이지에 챗봇을 표시할 수도 있습니다. 그러나 대부분의 스토어는 메인 스토어 페이지에서만 필요합니다.

AI 검색창 추가하기

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

script 태그에 data-replace 속성을 추가하면 테마에 있던 검색창을 대신합니다. theme.liquid에서 닫는 body 태그 바로 앞에 붙여 넣으세요. 채팅 코드와 같은 파일입니다. 테마의 검색 결과 페이지는 그대로 유지되므로 Enter는 예전과 똑같이 동작합니다.

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

AI 검색창 전체 가이드 읽기