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

Grav CMS를 위한 단계별 가이드

임베드 코드 받기

플랫폼:

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

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

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

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

2단계: Grav 테마 템플릿에 추가 (권장)

Grav 사이트의 모든 페이지에 챗봇을 추가하는 가장 좋은 방법은 테마의 기본 Twig 템플릿을 편집하는 것입니다:

Grav 프로젝트의 user/themes/yourtheme/templates/ 디렉토리로 이동하여 default.html.twig (또는 테마에서 사용하는 기본 템플릿)을 여세요
닫는 </body> 태그 앞에 Asyntai 임베드 코드를 추가하세요:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

파일을 저장하세요

팁: Grav는 Twig를 템플릿 엔진으로 사용합니다. 기본 템플릿은 일반적으로 테마에 따라 default.html.twig 또는 partials/base.html.twig입니다. 테마 구조를 확인하여 </body> 닫는 태그가 포함된 올바른 파일을 찾으세요.

대안 방법 1: Grav Asset Manager 사용

Grav의 내장 Asset Manager는 Twig를 통해 JavaScript 에셋을 추가하는 깔끔한 방법을 제공합니다:

테마의 기본 Twig 템플릿을 여세요 (예: user/themes/yourtheme/templates/partials/base.html.twig)
Asset Manager를 사용하여 JavaScript를 추가하세요:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

또는 기본 템플릿에서 스크립트 요소를 동적으로 생성하기 위해 인라인 JavaScript를 추가하세요:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.body.appendChild(script);
})();
</script>
</body>
</html>

참고: Asset Manager 방법은 JavaScript 에셋 관리를 위한 Grav 권장 접근 방식입니다. 에셋 파이프라이닝, 순서 지정 및 그룹화에 대한 내장 지원을 제공합니다.

대안 방법 2: Custom JS 플러그인 사용

테마 파일을 편집하지 않고 플러그인 기반 접근 방식을 선호하는 경우:

Grav 관리자 패널 또는 CLI를 통해 "Custom JS" 플러그인을 설치하세요:

bin/gpm install custom-js

Admin > Plugins > Custom JS로 이동하세요
임베드 스크립트 코드를 추가하세요:

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

플러그인 구성을 저장하세요

팁: 플러그인을 사용하여 스크립트를 삽입하면 테마 파일을 수정할 필요가 없습니다. 이렇게 하면 챗봇 통합을 잃지 않고 테마를 전환하거나 업데이트하기가 더 쉬워집니다.

대안 방법 3: 자식 템플릿에서 블록 오버라이드 사용

Grav 테마가 Twig 블록 상속을 사용하는 경우 자식 템플릿에서 하단 블록을 오버라이드할 수 있습니다:

{% block bottom %}
    {{ parent() }}
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}

테마의 기본 템플릿을 확장하는 자식 템플릿을 생성하거나 여세요
위에 표시된 블록 오버라이드를 추가하세요
parent() 호출은 블록의 모든 기존 콘텐츠가 유지되도록 합니다

참고: 이 방법은 Twig의 템플릿 상속 시스템을 사용합니다. 블록 이름(예: bottom)이 테마의 기본 템플릿에 정의된 블록과 일치하는지 확인하세요. 일반적인 블록 이름은 bottom, javascripts 또는 footer입니다.

대안 방법 4: Grav Custom Head 플러그인 사용

또 다른 플러그인 기반 옵션은 Custom Head 플러그인입니다:

CLI 또는 관리자 패널을 통해 custom-head 플러그인을 설치하세요:

bin/gpm install custom-head

Admin > Plugins > Custom Head로 이동하세요
플러그인 구성에 Asyntai 임베드 스크립트 코드를 추가하세요:

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

구성을 저장하세요

팁: Custom Head 플러그인을 사용하면 테마 파일을 건드리지 않고 사이트의 head 또는 body 섹션에 코드를 삽입할 수 있습니다. 닫는 </body> 태그 앞에 스크립트를 삽입하기 위한 올바른 배치 옵션은 플러그인 문서를 확인하세요.

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

코드를 추가한 후 Grav 캐시를 지우고 설치를 확인하세요:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

새 브라우저 탭에서 Grav 사이트를 여세요. 오른쪽 하단에 채팅 위젯 버튼이 보여야 합니다. 클릭하여 올바르게 열리고 작동하는지 확인하세요.

위젯이 보이지 않나요? bin/grav clearcache 명령으로 또는 관리자 패널에서 Grav 캐시를 지웠는지 확인하세요. 대시보드에서 YOUR_WIDGET_ID를 실제 위젯 ID로 교체했는지 확인하세요. 브라우저 캐시를 지우거나 시크릿 모드로 확인하세요. 브라우저 콘솔(F12)을 열어 JavaScript 오류가 없는지 확인하세요. 마우스 오른쪽 버튼을 클릭하고 "페이지 소스 보기"를 선택하여 스크립트가 페이지 소스에 있는지 확인하세요.