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

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

플랫폼:

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단계: 설치 방법 선택

WordPress에 채팅 위젯을 추가하는 여러 가지 방법이 있습니다. 가장 적합한 방법을 선택하세요:

방법 1: 플러그인 사용 (권장)

채팅 위젯을 추가하는 가장 쉬운 방법은 "Insert Headers and Footers" 또는 "WPCode"와 같은 플러그인을 사용하는 것입니다.

Using WPCode (Free)

WordPress 관리자에서 Plugins → Add New로 이동하세요
"WPCode"를 검색하고 설치하세요
플러그인을 활성화하세요
Code Snippets → Header & Footer로 이동하세요
"Footer" 섹션에 Asyntai 삽입 코드를 붙여넣으세요
"Save Changes"를 클릭하세요

Insert Headers and Footers 사용

WordPress 관리자에서 Plugins → Add New로 이동하세요
WPBeginner의 "Insert Headers and Footers"를 검색하세요
플러그인을 설치하고 활성화하세요
Settings → Insert Headers and Footers로 이동하세요
"Scripts in Footer" 상자에 Asyntai 삽입 코드를 붙여넣으세요
"Save"를 클릭하세요

왜 플러그인을 사용하나요? 플러그인을 사용하면 WordPress 테마를 업데이트하거나 변경해도 코드가 유지됩니다.

방법 2: 테마 파일 편집

테마 파일에 직접 코드를 추가할 수 있습니다. Theme File Editor의 위치는 WordPress 버전과 테마 유형에 따라 다릅니다.

클래식 테마의 경우

WordPress 관리자에서 Appearance → Theme File Editor로 이동하세요
드롭다운에서 활성 테마를 선택하세요 (아직 선택되지 않은 경우)
오른쪽 파일 목록에서 footer.php를 찾아 클릭하세요
아래로 스크롤하여 닫는 </body> 태그를 찾으세요
</body> 태그 바로 앞에 Asyntai 삽입 코드를 붙여넣으세요
"Update File"을 클릭하세요

블록 테마 (FSE 테마)의 경우

블록 기반 테마(Twenty Twenty-Four 또는 기타 Full Site Editing 테마 등)를 사용하는 경우 Theme File Editor 위치가 변경되었습니다:

WordPress 관리자에서 Tools → Theme File Editor로 이동하세요
드롭다운에서 활성 테마를 선택하세요
파일 목록에서 footer.php 또는 footer.html을 찾으세요
닫는 </body> 태그 앞에 Asyntai 삽입 코드를 추가하세요
"Update File"을 클릭하세요

참고: 일부 블록 테마에는 footer.php 파일이 없습니다. 이 경우 모든 테마 유형에서 작동하는 플러그인 방법(WPCode)을 사용하세요.

중요: 테마 업데이트 시 변경 사항이 덮어씌워집니다. 영구적인 솔루션을 위해 자식 테마나 플러그인 방법을 사용하세요.

방법 3: Elementor 사용

Elementor를 사용하는 경우 Elementor의 커스텀 코드 기능을 통해 코드를 추가할 수 있습니다.

Elementor Pro

Elementor → Custom Code로 이동하세요
"Add New"를 클릭하세요
"Asyntai Chatbot"과 같은 이름을 지정하세요
Location을 "Before </body> End"로 설정하세요
Asyntai 임베드 코드를 붙여넣으세요
Display Conditions를 "Entire Site"로 설정하세요
"Publish"를 클릭하세요

Elementor Free

Elementor 무료 버전을 사용하는 경우 커스텀 코드 삽입에 Elementor Pro가 필요하므로 위에 설명된 플러그인 방법을 사용하세요.

3단계: 설치 확인

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

위젯이 보이지 않나요? 브라우저 캐시와 WordPress 캐싱 플러그인의 캐시를 지우세요. WP Rocket이나 W3 Total Cache와 같은 캐싱 플러그인을 사용하는 경우 코드를 추가한 후 캐시를 비우세요.

AI 검색창 추가하기

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

script 태그에 data-replace 속성을 추가하면 테마에 있던 검색창을 대신합니다. 채팅 코드에 사용한 것과 같은 헤더/푸터 플러그인(Code Snippets, Insert Headers and Footers 등)으로 추가하세요. 스크립트가 검색창 옆에 있을 필요는 없으므로 테마 파일을 수정할 필요가 없습니다.

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

AI 검색창 전체 가이드 읽기

문서