모든 웹사이트에 Asyntai AI 챗봇을 추가하는 방법

HTML, 사용자 정의 사이트 및 정적 생성기를 위한 범용 가이드

임베드 코드 받기

플랫폼:

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

먼저 Asyntai 대시보드로 이동하여 "임베드 코드" 섹션까지 아래로 스크롤하십시오. 다음과 같은 형태의 고유 임베드 코드를 복사하십시오:

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

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

2단계: HTML 파일에 추가

챗봇을 추가하는 가장 간단한 방법은 HTML 파일에 직접 임베드 코드를 붙여넣는 것입니다:

텍스트 편집기에서 HTML 파일을 여세요
닫는 </body> 태그를 찾으세요
</body> 태그 바로 앞에 Asyntai 삽입 코드를 붙여넣으세요
파일을 저장하세요

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Asyntai Chatbot - Add before closing body tag -->
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

팁: 닫는 </body> 태그 앞에 스크립트를 추가하면 페이지 콘텐츠 이후에 로드되어 성능에 최적이며 페이지를 느리게 하지 않습니다.

다중 페이지 웹사이트의 경우

웹사이트에 여러 HTML 페이지가 있는 경우 몇 가지 옵션이 있습니다:

옵션 A: 각 페이지에 추가

챗봇을 표시할 각 HTML 파일에 임베드 코드를 추가하세요.

옵션 B: 공통 푸터 인클루드 사용

서버 측 인클루드(SSI), PHP 인클루드 또는 유사한 것을 사용하는 경우:

footer.html (또는 footer.php) 파일을 생성하세요
이 파일에 Asyntai 임베드 코드를 추가하세요
모든 페이지에 이 푸터 파일을 포함하세요:
 <?php include 'footer.php'; ?>

옵션 C: JavaScript 동적 로딩

모든 페이지에서 챗봇을 로드하는 단일 JavaScript 파일을 생성하세요:

asyntai-loader.js라는 파일을 생성하세요:
(function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })();
YOUR_WIDGET_ID를 실제 위젯 ID로 교체하세요
모든 페이지에 이 스크립트를 포함하세요:
<script src="/js/asyntai-loader.js"></script>

정적 사이트 생성기의 경우

정적 사이트 생성기를 사용하는 경우 기본 레이아웃이나 템플릿에 임베드 코드를 추가하세요:

Jekyll

_includes/footer.html 또는 _layouts/default.html에 추가하세요

Hugo

layouts/partials/footer.html 또는 layouts/_default/baseof.html에 추가하세요

Gatsby

Add to gatsby-browser.js or use gatsby-ssr.js

Next.js

pages/_document.js에 추가하거나 next/script 컴포넌트를 사용하세요

Nuxt.js

Add to nuxt.config.js under head.script

Eleventy (11ty)

_includes/의 기본 레이아웃에 추가하세요

Astro

src/layouts/Layout.astro에서 </body> 앞에 추가하세요

VuePress

.vuepress/config.js의 head 아래에 추가하세요

React / Vue / Angular 앱의 경우

단일 페이지 애플리케이션(SPA)의 경우 index.html에 스크립트를 추가하거나 동적으로 로드할 수 있습니다:

React (index.html 방법)

<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

React (useEffect 방법)

// In your App.js or a component
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.async = true;
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, []);

Vue (main.js 또는 App.vue에서)

// In mounted() or onMounted()
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);

Angular (index.html에서)

<!-- In src/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

3단계: 설치 확인

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

위젯이 보이지 않나요? 스크립트가 </body> 태그 앞에 올바르게 배치되었는지 확인하세요. 브라우저 콘솔에 JavaScript 오류가 없는지 확인하세요 (F12를 눌러 개발자 도구를 여세요). 브라우저 캐시를 지우거나 시크릿 창에서 확인해 보세요.

중요: 챗봇은 웹사이트가 HTTP 또는 HTTPS를 통해 제공되어야 합니다 (파일로 직접 열기가 아님). 로컬에서 테스트하는 경우 로컬 개발 서버를 사용하세요.

문서