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

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

임베드 코드 받기

플랫폼:

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

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

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

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

2단계: FreeMarker 템플릿에 추가 (권장)

CrafterCMS는 페이지 렌더링에 FreeMarker(.ftl) 템플릿을 사용합니다. 모든 페이지에 챗봇을 추가하는 가장 쉬운 방법은 메인 페이지 템플릿을 편집하는 것입니다:

Crafter Studio에서 Site Dashboard > Content Types로 이동하거나 템플릿으로 이동하세요
메인 페이지 템플릿을 여세요 (예: /templates/web/pages/home.ftl 또는 기본 레이아웃)
닫는 </body> 태그를 찾으세요
</body> 태그 바로 앞에 Asyntai 삽입 코드를 붙여넣으세요:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
파일을 저장하고 Crafter Studio를 통해 게시하세요

팁: 닫는 </body> 태그 앞에 스크립트를 추가하면 페이지 콘텐츠 이후에 로드되며, 이는 채팅 위젯에 권장되고 페이지 로딩 속도를 저하시키지 않습니다.

대체 방법 1: Crafter 템플릿 컴포넌트 사용

더 나은 구성을 위해 챗봇 위젯용 전용 컴포넌트 템플릿을 생성하세요:

Crafter Studio에서 /templates/web/components/asyntai-widget.ftl에 새 템플릿 파일을 생성하세요
컴포넌트 템플릿에 다음 내용을 추가하세요:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
FreeMarker include 지시문을 사용하여 메인 레이아웃 템플릿에 포함하세요:
<#include "/templates/web/components/asyntai-widget.ftl" />
또는 Crafter의 컴포넌트 렌더링 시스템을 사용하는 경우:
<@renderComponent component=contentModel.asyntaiWidget />
두 파일을 모두 저장하고 Crafter Studio를 통해 게시하세요

참고: 별도의 컴포넌트 템플릿을 사용하면 하나의 include 줄만 주석 처리하여 전체 사이트에서 챗봇을 쉽게 활성화하거나 비활성화할 수 있습니다.

대체 방법 2: Crafter의 Head/Scripts 설정 사용

CrafterCMS에서는 사이트 설정을 통해 전역적으로 스크립트를 삽입할 수 있습니다:

Crafter Studio에서 Site Config > Configuration으로 이동하세요
Engine Site Configuration 파일(site-config.xml)을 여세요
커스텀 스크립트 삽입 설정을 추가하세요:
<site>   <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
또는 기본 FreeMarker 레이아웃을 편집하여 사이트 설정에서 읽고 동적으로 스크립트를 삽입하세요:
<#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
설정 변경 사항을 저장하고 게시하세요

팁: 사이트 설정을 사용하면 템플릿 파일을 직접 수정하지 않고 챗봇 위젯을 관리할 수 있어 나중에 업데이트하거나 제거하기가 더 쉽습니다.

대체 방법 3: Groovy 컨트롤러 사용

CrafterCMS는 서버 측 로직을 위한 Groovy 스크립트를 지원합니다. 컨트롤러를 사용하여 챗봇 스크립트를 동적으로 추가할 수 있습니다:

/scripts/pages/에 Groovy 스크립트를 생성하세요 (예: /scripts/pages/home.groovy 또는 사이트 전체 컨트롤러)
스크립트 URL을 템플릿 모델에 삽입하기 위해 다음 코드를 추가하세요:
// /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
그런 다음 FreeMarker 템플릿에서 모델 변수를 참조하세요:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Groovy 스크립트와 템플릿 파일을 모두 저장하세요
Crafter Studio를 통해 변경 사항을 게시하세요

참고: Groovy 컨트롤러 방식은 조건부 로직이 필요할 때(예: 특정 사용자 역할이나 페이지 유형에서만 챗봇 활성화) 또는 외부 소스에서 설정 값을 가져오려 할 때 유용합니다.

3단계: 게시 및 확인

변경 사항을 적용한 후, Crafter Studio를 통해 게시하세요:

Crafter Studio에서 Site Dashboard로 이동하세요
My Recent Activity 또는 Pending Approval 섹션에서 변경 사항을 검토하세요
Publish를 클릭하여 변경 사항을 적용하세요
새 브라우저 탭이나 시크릿 창에서 CrafterCMS 웹사이트를 방문하세요
오른쪽 하단에 채팅 위젯 버튼이 표시되어야 합니다
클릭하여 올바르게 열리고 작동하는지 확인하세요

위젯이 보이지 않나요? Crafter Studio를 통해 변경 사항을 게시했는지 확인하세요. 페이지에서 사용하는 올바른 템플릿 파일을 편집하고 있는지 확인하세요. 브라우저 캐시를 지우거나 시크릿 창에서 확인하세요. Crafter 캐싱을 사용하는 경우, Crafter Studio 대시보드에서 Engine 캐시를 지우세요.

템플릿 위치: CrafterCMS 템플릿 위치는 프로젝트 구조에 따라 다를 수 있습니다. 일반적인 위치는 페이지 템플릿의 경우 /templates/web/pages/, 컴포넌트 템플릿의 경우 /templates/web/components/, 레이아웃 템플릿의 경우 /templates/web/입니다. 기존 템플릿에서 </body> 태그가 정의된 위치를 확인하세요.