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

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

임베드 코드 받기

플랫폼:

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

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

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

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

2단계: Kirby 스니펫에 추가 (권장)

Kirby는 재사용 가능한 템플릿 부분에 스니펫을 사용하는 플랫 파일 PHP CMS입니다. 챗봇을 위한 전용 스니펫을 만드는 것이 권장됩니다:

site/snippets/asyntai-widget.php에 새 스니펫 파일을 만드세요
파일에 임베드 코드를 붙여넣으세요:

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

그런 다음 메인 템플릿(예: site/templates/default.php) 또는 레이아웃에서 닫는 </body> 태그 바로 앞에 스니펫을 포함하세요:

<?php snippet('asyntai-widget') ?>
</body>
</html>

팁: 공유 레이아웃이나 푸터 스니펫을 사용하는 경우 거기에 스니펫 호출을 추가하면 모든 페이지에 자동으로 표시됩니다. 예를 들어, </body> 바로 앞에 있는 푸터 스니펫에 추가하세요.

대체 방법 1: 푸터 스니펫에 추가

Kirby 사이트에서 푸터 스니펫을 사용하는 경우 거기에 직접 임베드 코드를 추가할 수 있습니다:

site/snippets/footer.php를 여세요 (없으면 만드세요)
닫는 </body> 태그 앞에 삽입 코드를 추가하세요:

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

템플릿에 푸터 스니펫이 포함되어 있는지 확인하세요:

<?php snippet('footer') ?>

참고: 푸터 스니펫이 이미 모든 템플릿에 포함되어 있으면 여기에 챗봇을 추가하면 개별 템플릿 파일을 수정하지 않고도 모든 페이지에 표시됩니다.

대체 방법 2: Kirby 플러그인 사용

템플릿을 수정하지 않고 모든 페이지에 챗봇 스크립트를 자동으로 삽입하는 Kirby 플러그인을 만들 수 있습니다:

site/plugins/asyntai/index.php에 플러그인 디렉토리와 파일을 만드세요
Kirby의 훅을 사용하여 스크립트를 삽입하는 다음 코드를 추가하세요:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

팁: 플러그인 접근 방식은 템플릿이나 스니펫 파일을 편집하지 않고 모든 페이지에 자동으로 챗봇을 로드하려는 경우 이상적입니다. 또한 챗봇 통합을 모듈화하여 활성화 또는 비활성화하기 쉽게 만들어 줍니다.

대체 방법 3: Kirby의 js() 헬퍼 사용

Kirby는 JavaScript 파일을 로드하기 위한 내장 js() 헬퍼를 제공합니다. 템플릿이나 스니펫에서 사용할 수 있습니다:

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

또는 템플릿 PHP 파일에서 </body> 앞에 직접 스크립트를 추가하세요:

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

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

참고: js() 헬퍼를 사용하는 경우 챗봇이 올바르게 로드되도록 템플릿의 <body> 섹션 안에 배치해야 합니다.

3단계: 설치 확인

Kirby 사이트에 임베드 코드를 추가한 후, 새 브라우저 탭이나 시크릿 창에서 웹사이트를 방문하세요. 오른쪽 하단에 채팅 위젯 버튼이 표시되어야 합니다. 클릭하여 올바르게 열리고 작동하는지 확인하세요.

위젯이 보이지 않나요? 대시보드에서 YOUR_WIDGET_ID를 실제 위젯 ID로 교체했는지 확인하세요. 스니펫이나 플러그인 파일이 올바른 디렉토리에 저장되었는지 확인하세요. 플러그인 방법을 사용하는 경우 플러그인 디렉토리 구조가 site/plugins/asyntai/index.php인지 확인하세요. 브라우저 캐시를 지우거나 시크릿 모드에서 테스트하세요. 브라우저의 개발자 콘솔(F12)에서 오류가 있는지 확인하세요.