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

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

플랫폼:

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단계: Site Settings를 통해 코드 추가 (전체 페이지)

Webflow 사이트의 모든 페이지에 챗봇을 한꺼번에 추가하려면:

Webflow 계정에 로그인하고 프로젝트를 선택하세요
왼쪽 사이드바에서 톱니바퀴 아이콘(Site Settings)을 클릭하세요
설정 메뉴에서 "Custom Code"를 클릭하세요
"Footer Code" 섹션까지 아래로 스크롤하세요 (</body> 태그 앞)
Asyntai 임베드 코드를 붙여넣으세요
"Save Changes"를 클릭하세요
변경 사항을 적용하려면 사이트를 Publish하세요

팁: Footer 섹션에 코드를 추가하면 닫는 </body> 태그 바로 앞에 배치되어 페이지 로딩을 느리게 하지 않으므로 채팅 위젯에 권장됩니다.

대안: 페이지별 커스텀 코드

특정 페이지에만 챗봇을 원하는 경우:

Webflow Designer에서 프로젝트를 여세요
왼쪽 사이드바에서 Pages 패널(폴더 아이콘)을 클릭하세요
편집하려는 페이지 위에 마우스를 올리고 톱니바퀴 아이콘을 클릭하세요
"Custom Code"까지 아래로 스크롤하세요
"Before </body> tag" 섹션에 Asyntai 삽입 코드를 붙여넣으세요
"Save"를 클릭하세요
사이트를 Publish하세요

대안: Embed 요소 사용

페이지 어디에서나 Embed 요소를 사용하여 챗봇을 추가할 수도 있습니다:

Webflow Designer에서 프로젝트를 여세요
"+" 버튼을 클릭하여 Add 패널을 여세요
"Embed"를 검색하거나 Components에서 찾으세요
Embed 요소를 페이지로 드래그하세요
코드 편집기에 Asyntai 임베드 코드를 붙여넣으세요
"Save & Close"를 클릭하세요
사이트를 Publish하세요

중요: Embed 요소를 사용할 때는 챗봇을 원하는 각 페이지에 추가해야 합니다. 사이트 전체 설치를 위해서는 위의 Site Settings 방법을 사용하세요.

3단계: 설치 확인

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

위젯이 보이지 않나요? 코드를 추가한 후 사이트를 게시했는지 확인하세요. 커스텀 코드는 Designer 미리보기가 아닌 라이브 사이트에서만 나타납니다. 브라우저 캐시를 지우거나 시크릿 창에서 확인해 보세요.

AI 검색창 추가하기

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

script 태그에 data-replace 속성을 추가하면 테마에 있던 검색창을 대신합니다. Site Settings, Custom Code, Footer에 추가하세요. 채팅 코드와 같은 위치이며, 닫는 body 태그 바로 앞에 들어갑니다.

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

AI 검색창 전체 가이드 읽기