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

Google Sites를 위한 단계별 가이드

임베드 코드 받기

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

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

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

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

2단계: 임베드 기능을 사용하여 코드 추가

Google Sites는 사용자 정의 HTML 및 JavaScript 코드를 추가하기 위해 임베드 기능을 사용합니다:

  1. 컴퓨터에서 Google Sites로 사이트를 여세요
  2. 챗봇을 추가할 페이지로 이동하세요
  3. 오른쪽 사이드바(또는 상단 메뉴)에서 "Insert"를 클릭하세요
  4. 옵션에서 "Embed"를 선택하세요
  5. 상단의 "Embed code" 탭을 클릭하세요
  6. 텍스트 상자에 Asyntai 임베드 코드를 붙여넣으세요
  7. "Next"를 클릭하여 어떻게 보일지 미리 확인하세요
  8. "Insert"를 클릭하여 페이지에 코드를 추가하세요
  9. 오른쪽 상단의 "Publish"를 클릭하여 변경 사항을 적용하세요

팁: Google Sites는 임베드를 iframe으로 감싸므로 챗봇은 브라우저 모서리에 고정되지 않고 임베드 영역 내부에 나타납니다. 최상의 경험을 위해 임베드 요소를 페이지 콘텐츠 맨 하단에 배치하여 챗봇 버튼을 쉽게 찾을 수 있게 하세요.

여러 페이지에 추가

Google Site의 여러 페이지에 챗봇을 추가하려면:

  1. 챗봇을 원하는 각 페이지에 대해 임베드 과정을 반복하세요
  2. 또는 템플릿이 지원하는 경우 머리글 또는 바닥글 섹션에 임베드를 추가하세요
  3. 페이지가 많은 사이트의 경우 먼저 주요 랜딩 페이지에 추가하는 것을 고려하세요

참고: 다른 일부 플랫폼과 달리 Google Sites에는 단일 "사이트 전체" 코드 삽입 지점이 없습니다. 챗봇을 표시할 각 페이지에 임베드 코드를 추가하거나 테마가 지원하는 경우 사용자 정의 머리글/바닥글을 사용해야 합니다.

Google Sites가 임베드된 코드를 처리하는 방법

Google Sites가 코드를 처리하는 방법 이해하기:

  • Google Sites는 샌드박스 환경에서 코드를 <iframe> 요소로 감쌉니다
  • JavaScript는 <script> 태그 내에 있어야 합니다 (Asyntai 코드에 이미 포함되어 있음)
  • 외부 JavaScript 파일(예: Asyntai 위젯)을 참조할 수 있습니다
  • 임베드 기능은 기존 Google Sites의 HTML Box보다 제한이 적습니다
  • 임베드된 코드는 사이트 검색에 인덱싱되지 않습니다

중요: Google Sites의 iframe 샌드박싱으로 인해 일부 고급 기능이 기존 웹사이트와 다르게 작동할 수 있습니다. Asyntai 챗봇은 이러한 제약 조건 내에서 작동하도록 설계되었습니다.

3단계: 설치 확인

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

위젯이 보이지 않나요? 사이트를 게시했는지 확인하세요 (저장만 한 것이 아닌지). 캐싱을 우회하기 위해 시크릿 창에서 확인해 보세요. 브라우저 콘솔(F12)에서 오류를 확인하세요. 페이지를 편집하고 임베드 요소를 확인하여 임베드가 올바르게 삽입되었는지 확인하세요.