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

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

임베드 코드 받기

플랫폼:

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

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

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

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

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

ProcessWire는 site/templates/ 디렉토리에 위치한 PHP 템플릿 파일을 사용합니다. 가장 쉬운 방법은 메인 템플릿 파일에 직접 임베드 코드를 추가하는 것입니다:

FTP, SSH 또는 파일 관리자를 통해 ProcessWire 설치 파일에 접근합니다
site/templates/로 이동하세요
메인 템플릿 파일을 엽니다 — 사이트 프로필에 따라 보통 _main.php 또는 basic-page.php입니다
지연 출력 전략(대부분의 사이트 프로필에서 기본값)을 사용하는 경우, _main.php를 엽니다
닫는 </body> 태그를 찾으세요
그 바로 앞에 Asyntai 임베드 코드를 붙여넣습니다:

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

팁: 닫는 </body> 태그 바로 앞에 스크립트를 배치하면 페이지 콘텐츠 이후에 챗봇이 로드되며, 이는 최적의 성능을 위해 권장되고 페이지 렌더링 속도에 영향을 주지 않습니다.

대안 방법 1: _foot.inc 또는 _main.php 추가 파일 사용

ProcessWire 사이트가 추가 파일 방식을 사용하는 경우(많은 사이트 프로필에서 일반적), 공유 푸터 인클루드에 임베드 코드를 추가할 수 있습니다:

site/templates/로 이동하세요
_foot.inc (또는 이에 해당하는 푸터 인클루드 파일)를 엽니다
닫는 </body> 태그 바로 앞에 Asyntai 임베드 코드를 붙여넣으세요
파일을 저장하세요

ProcessWire의 지연 출력 전략은 일반적으로 세 가지 핵심 파일로 작동합니다:

_init.php — 모든 템플릿 전에 실행되며 변수를 초기화합니다
템플릿 파일 (예: basic-page.php) — 콘텐츠 변수를 채웁니다
_main.php — 해당 변수를 사용하여 최종 HTML 마크업을 출력합니다

사이트가 이 방식을 사용하는 경우, </body> 앞의 _main.php에 스크립트를 추가하면 모든 페이지에 표시됩니다.

참고: 파일 이름 _init.php와 _main.php는 site/config.php에서 $config->prependTemplateFile 및 $config->appendTemplateFile 설정을 통해 구성됩니다. 파일 이름이 다른 경우 설정을 확인하세요.

대안 방법 2: $config->scripts 배열 사용

ProcessWire는 JavaScript 파일을 관리하는 데 사용할 수 있는 $config->scripts FilenameArray를 제공합니다. _init.php 또는 개별 템플릿 파일에 다음을 추가합니다:

<?php
$config->scripts->add('https://asyntai.com/static/js/chat-widget.js');
?>

그런 다음 _main.php (또는 푸터 인클루드)에서 스크립트 배열을 반복하여 출력합니다:

<?php foreach($config->scripts as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

중요: $config->scripts 방식은 스크립트의 src 속성을 처리하지만, data-asyntai-id 속성은 별도로 처리해야 합니다. 루프 출력에서 data 속성을 수동으로 추가하거나, 가장 간단한 설정을 위해 2단계의 직접 스크립트 태그 방법을 사용해야 합니다.

대안 방법 3: 훅 사용 (ready.php)

보다 고급 방법으로, ProcessWire의 훅 시스템을 사용하여 모든 페이지에 챗봇 스크립트를 자동으로 삽입할 수 있습니다. site/ready.php 파일에 다음을 추가합니다:

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

이 훅은 모든 페이지의 렌더링된 HTML 출력을 가로채고 닫는 </body> 태그 바로 앞에 Asyntai 스크립트를 자동으로 삽입합니다.

팁: ready.php 훅 방식은 템플릿 파일을 수정하지 않고 모든 페이지에 챗봇을 추가하려는 경우에 이상적입니다. 템플릿 파일 외부에 있으므로 템플릿 변경 및 테마 업데이트 시에도 유지됩니다.

3단계: 설치 확인

변경 사항을 저장한 후, 새 브라우저 탭이나 시크릿 창에서 ProcessWire 사이트를 방문합니다. 오른쪽 하단에 채팅 위젯 버튼이 표시되어야 합니다. 클릭하여 올바르게 열리고 작동하는지 확인합니다.

위젯이 보이지 않나요? 모든 수정된 파일을 저장했는지 확인하세요. 브라우저 캐시를 지우거나 시크릿 창에서 확인해 보세요. ProcessWire의 템플릿 캐시가 활성화된 경우, Modules → Core → Template Engine Cache로 이동하거나 URL에 ?nocache=1을 추가하여 캐시를 지워야 할 수 있습니다. 또한 보고 있는 페이지에서 실제로 해당 템플릿 파일이 사용되고 있는지 확인하세요.