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

SilverStripe CMS를 위한 단계별 가이드

임베드 코드 받기

플랫폼:

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

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

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

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

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

SilverStripe 사이트에 챗봇을 추가하는 가장 간단한 방법은 테마의 메인 템플릿 파일을 직접 편집하는 것입니다:

테마의 템플릿 파일을 엽니다 (예: themes/yourtheme/templates/Page.ss)
닫는 </body> 태그 바로 앞에 임베드 코드를 추가합니다:

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

파일을 저장하고 사이트 URL에 ?flush=1을 추가하여 SilverStripe 캐시를 비웁니다

팁: SilverStripe는 템플릿 상속 시스템과 함께 .ss 템플릿 파일을 사용합니다. 기본 Page.ss 템플릿에 스크립트를 배치하면 사이트의 모든 페이지에 챗봇이 표시됩니다. 테마가 Includes 폴더를 사용하는 경우, 공유 인클루드 파일에 스크립트를 배치할 수도 있습니다.

대안 방법 1: 컨트롤러에서 Requirements 클래스 사용

SilverStripe는 JavaScript 및 CSS 의존성을 프로그래밍 방식으로 관리하는 Requirements 클래스를 제공합니다. 이는 개발자에게 권장되는 방법입니다:

app/src/PageController.php (또는 페이지 컨트롤러 파일)를 엽니다
init() 메서드에서 Requirements::customScript()를 사용하여 위젯을 동적으로 로드합니다:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            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.head.appendChild(script);
        JS);
    }
}

파일을 저장하고 yourdomain.com?flush=1을 방문하여 캐시를 비웁니다

참고: Requirements 클래스는 스크립트와 스타일시트를 포함하는 SilverStripe 표준 방법입니다. Requirements::customScript()를 사용하면 인라인 JavaScript를 출력합니다. 이 방법은 PageController가 처리하는 모든 페이지에서 위젯이 로드되도록 합니다.

대안 방법 2: 템플릿에서 Requirements 사용

SilverStripe의 템플릿 구문을 사용하여 .ss 템플릿에서 직접 JavaScript 파일을 요청할 수도 있습니다:

테마의 템플릿 파일을 엽니다 (예: themes/yourtheme/templates/Page.ss)
템플릿 하단, </body> 앞에 다음을 추가합니다:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

팁: <% require %> 구문은 에셋을 포함하는 SilverStripe의 템플릿 수준 방법입니다. 이 방법은 스크립트 태그에 커스텀 data 속성 추가를 기본적으로 지원하지 않으므로, 위젯 ID를 설정하는 작은 초기화 스니펫을 추가합니다.

대안 방법 3: SilverStripe 설정 (YAML) 사용

설정 기반 방법의 경우, SilverStripe의 YAML 설정을 사용하여 전역 요구사항을 추가할 수 있습니다:

app/_config/app.yml 파일을 열거나 생성하세요
커스텀 확장 또는 컨트롤러 설정을 통해 위젯을 포함하는 설정을 추가합니다:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

확장 파일 app/src/Extensions/AsyntaiChatbotExtension.php를 생성합니다:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            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.head.appendChild(script);
        ");
    }
}

app/_config/app.yml에서 PageController에 확장을 적용합니다:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

?flush=1을 실행하여 설정 캐시를 다시 빌드하세요

참고: YAML 설정과 확장을 사용하는 것이 가장 모듈화된 SilverStripe 방법입니다. 챗봇 통합을 메인 컨트롤러 로직과 분리하고 코드를 변경하지 않고도 쉽게 활성화하거나 비활성화할 수 있습니다.

3단계: 설치 확인

코드를 추가하고 SilverStripe 캐시를 비운 후, 새 브라우저 탭에서 사이트를 엽니다. 오른쪽 하단에 채팅 위젯 버튼이 표시되어야 합니다. 클릭하여 올바르게 열리고 작동하는지 확인합니다.

위젯이 보이지 않나요? 사이트 URL에 ?flush=1을 추가하여 캐시를 비웠는지 확인하세요. YOUR_WIDGET_ID를 대시보드에서 확인한 실제 위젯 ID로 교체했는지 확인하세요. 브라우저 캐시를 지우거나 시크릿 모드에서 확인하세요. 브라우저 콘솔(F12)을 열어 JavaScript 오류가 있는지 확인하세요. Requirements 클래스를 사용하는 경우, PageController의 init() 메서드가 올바르게 호출되고 있는지 확인하세요.