asyntai/agent-skills

Asyntai로 AI 챗봇 추가하기

Asyntai는 웹사이트에 AI 지원 에이전트를 추가합니다. 사이트 자체 콘텐츠를 기반으로 80개 이상의 언어로 방문자에게 답변하고, 필요 시 사람에게 전환합니다. 채팅은 하나의 스크립트 태그로 실행되므로 설치가 아주 간단합니다.

1단계: 위젯 ID 확인

모든 설치는 사이트의 위젯 ID가 필요합니다. 위젯 ID는 asyntai_ 뒤에 12자의 문자와 숫자가 오는 형태입니다(예: asyntai_1a2b3c4d5e6f).

1. 사용자가 이미 제공했거나 프로젝트에 이미 있는 ID가 있는지 확인합니다(코드에서 data-asyntai-id 검색). 사이트에 이미 스니펫이 있다면 두 번째를 추가하지 마세요.
2. Asyntai MCP 서버가 연결되어 있다면 list_websites를 호출합니다. 각 웹사이트에는 widget_id가 있습니다.
3. 그렇지 않으면 사용자에게 물어보세요. 위치를 알려주세요: https://asyntai.com/dashboard 에 로그인하고 Install 페이지를 열어 스니펫에서 data-asyntai-id 값을 복사합니다.
4. 사용자에게 계정이 없다면 https://asyntai.com/auth/ 에서 무료로 만들 수 있습니다. Free 플랜으로 챗봇을 사용해볼 수 있습니다.

위젯 ID를 절대 임의로 만들지 마세요. ID가 없으면 코드에 YOUR_WIDGET_ID라는 플레이스홀더를 넣고 사용자에게 직접 교체하라고 알리세요.

2단계: 사이트가 무엇으로 만들어졌는지 확인

• 호스팅 빌더 또는 CMS (WordPress, Shopify, Wix, Webflow, Squarespace, HubSpot, Ghost, Moodle 등): 사용자는 코드가 아닌 해당 플랫폼의 관리자 화면에서 위젯을 설치합니다. references/platforms.md에서 해당 플랫폼을 찾아 사용자에게 해당 가이드 링크와 간단한 단계를 제공하세요.
• 코드베이스: package.json, 설정 파일, 폴더 구조를 확인한 후 references/frameworks.md를 따르세요. 각 스택에 대한 정확한 편집 방법과 정적 사이트 및 문서 도구용 Asyntai 패키지가 있습니다.

3단계: 스니펫 추가

다음은 공식 스니펫입니다. 정확히 이대로 유지하고 YOUR_WIDGET_ID만 변경하세요:

<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>

이 스크립트는 페이지 load 이벤트를 기다리므로 페이지 로딩 속도를 늦추지 않습니다. 모든 페이지에서 사용하는 공통 레이아웃에 한 번만 넣으세요(</body> 앞이나 <head> 내부). 하나의 페이지 컴포넌트에만 넣지 마세요. 그러면 해당 페이지에서만 채팅이 표시됩니다.

4단계: 결과 확인

1. 사이트를 실행(또는 빌드)하고 페이지를 엽니다.
2. 채팅 버튼이 하단 모서리에 나타납니다. 위젯은 #asyntai-widget-host-<위젯 ID> 요소 안에 그려집니다. 브라우저 콘솔에서 document.querySelectorAll('script[data-asyntai-id]').length가 1이어야 합니다.
3. 버튼이 나타나지 않으면:

   • 브라우저 콘솔에서 Asyntai Widget: 오류를 확인하세요.

   • 사이트가 Content Security Policy를 보낸다면 다음 출처를 허용해야 합니다:

     지시자	출처
     script-src	https://widget.asyntai.com https://asyntai.com (스니펫의 경우 'unsafe-inline'도 추가하거나 references/frameworks.md의 약식 사용)
     connect-src	https://asyntai.com
     style-src	'unsafe-inline'
     img-src	data: https://flagcdn.com

5단계: 다음 단계 안내

위젯은 사용자가 Asyntai 대시보드(https://asyntai.com/dashboard)에서 추가한 콘텐츠를 기반으로 답변합니다. 사용자에게 다음을 알리세요:

• 웹사이트 페이지, 파일 또는 텍스트를 지식으로 추가하고,
• 대시보드에서 에이전트 이름, 색상, 인사말을 설정하고,
• 전체 가이드(https://asyntai.com/documentation/installation/)를 읽으라고 안내하세요.

Asyntai MCP 서버가 연결되어 있다면 이 설정을 대신 처리할 수 있습니다. manage-ai-support-agent 스킬을 참조하세요.