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

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

임베드 코드 받기

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

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

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

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

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

Backdrop CMS는 테마에서 .tpl.php 템플릿 파일을 사용합니다. 권장 방법은 활성 테마의 페이지 템플릿에 직접 임베드 코드를 추가하는 것입니다:

  1. FTP 또는 파일 관리자를 통해 Backdrop CMS 설치에 접근하세요
  2. 활성 테마의 디렉토리로 이동하세요: themes/yourtheme/
  3. page.tpl.php 파일을 여세요 (테마에 따라 layout.tpl.php일 수 있음)
  4. 닫는 </body> 태그 또는 <?php print $page_bottom; ?> 줄을 찾으세요
  5. 해당 줄 바로 앞에 Asyntai 임베드 코드를 붙여넣으세요
  6. 파일을 저장하세요
<!-- Asyntai AI Chatbot -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
<?php print $page_bottom; ?>
</body>

팁: <?php print $page_bottom; ?> 또는 닫는 </body> 태그 바로 앞에 코드를 배치하면 페이지 콘텐츠 이후에 챗봇이 로드되어 더 나은 페이지 로드 성능을 제공합니다. 이 방법은 이 테마를 사용하는 모든 페이지에 자동으로 챗봇을 추가합니다.

대체 방법 1: 사용자 정의 모듈 사용

backdrop_add_js()를 사용하여 챗봇 스크립트를 주입하는 간단한 Backdrop CMS 모듈을 만들 수 있습니다:

  1. 모듈 디렉토리를 만드세요: modules/custom/asyntai_widget/
  2. 다음 코드로 모듈 파일 asyntai_widget.module을 만드세요:
    // modules/custom/asyntai_widget/asyntai_widget.module
    function asyntai_widget_init() {
      backdrop_add_js('https://asyntai.com/static/js/chat-widget.js', array(
        'type' => 'external',
        'scope' => 'footer',
        'attributes' => array('async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID'),
      ));
    }
  3. asyntai_widget.info 파일을 만드세요:
    name = Asyntai AI Chatbot Widget
    description = Adds the Asyntai AI chatbot widget to all pages.
    backdrop = 1.x
    package = Custom
    type = module
  4. Backdrop 관리 패널에서 기능(admin/modules)으로 이동하세요
  5. Custom 패키지에서 "Asyntai AI Chatbot Widget"을 찾아 활성화하세요
  6. "설정 저장"을 클릭하세요

참고: 모듈 코드의 YOUR_WIDGET_IDAsyntai 대시보드에서 가져온 실제 위젯 ID로 교체하세요. 사용자 정의 모듈 접근 방식은 업그레이드에 안전하며 테마를 업데이트할 때 덮어쓰이지 않습니다.

대체 방법 2: Backdrop의 "Add to Head" 모듈 사용

제공된 "Add to Head" 모듈은 코드를 편집하지 않고 스크립트를 주입하는 쉬운 방법을 제공합니다:

  1. Backdrop CMS 웹사이트에서 "Add to Head" 기여 모듈을 다운로드하고 설치하세요
  2. 구성 > 개발 > Add to Head로 이동하세요
  3. 푸터 섹션에 Asyntai 임베드 코드를 추가하세요
  4. "설정 저장"을 클릭하세요

팁: "Add to Head" 모듈을 사용하는 것은 테마 파일을 편집하거나 사용자 정의 모듈을 만들지 않으려는 경우 가장 쉬운 방법입니다. 주입된 스크립트를 관리하기 위한 간단한 관리자 인터페이스를 제공합니다.

대체 방법 3: 블록 시스템 사용

Backdrop CMS의 레이아웃 및 블록 시스템을 사용하여 챗봇을 추가할 수도 있습니다:

  1. Backdrop CMS 관리 패널에 로그인하세요
  2. 구조 > 레이아웃으로 이동하세요
  3. 편집할 레이아웃을 선택하세요 (예: 기본 레이아웃)
  4. 푸터 영역에서 "블록 추가"를 클릭하세요
  5. "사용자 정의 블록"을 선택하세요
  6. 블록 형식을 "Full HTML" 또는 "Raw HTML"로 설정하세요
  7. 블록 본문에 Asyntai 임베드 코드를 붙여넣으세요
  8. 블록에 제목을 지정하고 (예: "Asyntai Chatbot") 선택적으로 "제목 숨기기"를 체크하세요
  9. "블록 저장"을 클릭한 다음 "레이아웃 저장"을 클릭하세요

중요: 스크립트 태그가 제거되지 않도록 텍스트 형식을 "Full HTML" 또는 "Raw HTML"로 설정하세요. 기본 "Filtered HTML" 형식은 보안상의 이유로 스크립트 태그를 제거합니다.

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

변경 사항을 적용한 후 Backdrop CMS의 캐시를 지우고 설치를 확인하세요:

  1. 관리자 패널에서 구성 > 성능으로 이동하세요
  2. \"모든 캐시 지우기\"를 클릭하세요
  3. 새 브라우저 탭이나 시크릿 창에서 웹사이트를 여세요
  4. 오른쪽 하단에 채팅 위젯 버튼이 표시되어야 합니다
  5. 클릭하여 올바르게 열리고 작동하는지 확인하세요

위젯이 보이지 않나요? 구성 > 성능에서 Backdrop CMS의 캐시를 지웠는지 확인하세요. 시크릿 창에서 사이트를 보거나 브라우저 캐시를 지워보세요. 브라우저 콘솔(F12)을 열어 JavaScript 오류가 있는지 확인하세요. 커스텀 모듈 방법을 사용한 경우, 기능에서 모듈이 활성화되어 있는지 확인하세요.