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

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

임베드 코드 받기

플랫폼:

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

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

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

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

2단계: 설치 방법 선택

Statamic은 Antlers와 Blade 템플릿을 모두 지원합니다. 사용 중인 템플릿 엔진에 따라 방법을 선택하세요:

방법 1: Antlers 레이아웃 (권장)

챗봇을 추가하는 가장 쉬운 방법은 메인 레이아웃 파일에 포함하는 것입니다. Statamic은 Antlers를 기본 템플릿 엔진으로 사용합니다.

Statamic 프로젝트의 resources/views 디렉토리로 이동합니다
레이아웃 파일을 엽니다 (보통 layout.antlers.html)
닫는 </body> 태그를 찾으세요
</body> 태그 바로 앞에 Asyntai 삽입 코드를 붙여넣으세요
파일을 저장하세요

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

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

팁: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

방법 2: Blade 레이아웃

Antlers 대신 Blade 템플릿을 사용하는 경우, 다음 단계를 따르세요:

Statamic 프로젝트의 resources/views 디렉토리로 이동합니다
Blade 레이아웃 파일을 엽니다 (예: layout.blade.php)
닫는 </body> 태그를 찾으세요
</body> 태그 바로 앞에 Asyntai 삽입 코드를 붙여넣으세요
파일을 저장하세요

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

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

참고: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

방법 3: 파셜 사용

더 나은 구성을 위해, 챗봇용 재사용 가능한 파셜을 만들 수 있습니다:

1단계: 파셜 생성

resources/views/partials/_chatbot.antlers.html에 새 파일을 생성합니다
이 파일에 Asyntai 삽입 코드를 추가하세요:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

2단계: 레이아웃에 포함

레이아웃 파일을 엽니다 (layout.antlers.html)
</body> 앞에 파셜 태그를 추가합니다:
{{ partial:chatbot }} </body>

파셜을 사용하는 이유는? 파셜을 사용하면 외부 스크립트를 한 곳에서 쉽게 관리할 수 있습니다. 챗봇 코드를 업데이트해야 할 경우, 하나의 파일만 편집하면 됩니다.

여러 레이아웃 사용

Statamic 사이트가 여러 레이아웃을 사용하는 경우(예: 블로그 게시물, 랜딩 페이지 등을 위한 다른 레이아웃), 위젯이 표시될 각 레이아웃 파일에 챗봇 스크립트를 추가하세요.

페이지가 사용하는 레이아웃을 여러 방법으로 설정할 수 있습니다:

항목에서: front matter에 layout: your_layout을 추가합니다
컬렉션에서: 컬렉션의 설정 YAML 파일에서 기본 레이아웃을 설정합니다
블루프린트에서: 편집자가 선택할 수 있는 레이아웃 필드를 추가합니다

Statamic 스타터 키트의 경우

Statamic 스타터 키트를 사용하는 경우, 레이아웃 위치가 다를 수 있습니다. 일반적인 위치는 다음과 같습니다:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html (파셜은 resources/views/snippets/에 위치)

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

3단계: 캐시 지우기 및 확인

코드를 추가한 후, 변경 사항이 적용되도록 Statamic 캐시를 지웁니다:

php artisan cache:clear
php please stache:refresh

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

위젯이 보이지 않나요? Laravel 캐시와 Statamic의 Stache를 모두 지웠는지 확인하세요. 정적 캐싱을 사용하는 경우, php please static:clear도 실행하세요. 브라우저 콘솔(F12)에서 JavaScript 오류를 확인하세요.

중요: Statamic의 정적 사이트 생성기(ssg)를 사용하는 경우, 챗봇 스크립트를 추가한 후 php please ssg:generate를 실행하여 정적 파일을 다시 생성하세요.

문서