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

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

임베드 코드 받기

플랫폼:

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

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

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

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

2단계: TypoScript footerData 사용 (권장)

모든 페이지에 챗봇을 추가하는 가장 쉬운 방법은 TypoScript footerData를 사용하는 것입니다:

TYPO3 Backend에 로그인하세요
Web → Template으로 이동하세요
페이지 트리에서 루트 페이지를 선택하세요
"Edit the whole template record"를 클릭하세요 (또는 "Info/Modify"를 선택한 후 "Setup"을 선택하세요)
Setup 필드에 다음 TypoScript 코드를 추가하세요:
page.footerData.99 = TEXT page.footerData.99.value = <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
대시보드에서 YOUR_WIDGET_ID를 실제 위젯 ID로 교체하세요
"Save"를 클릭하세요
TYPO3 캐시를 지우세요: Admin Tools → Maintenance → Flush TYPO3 and PHP Cache

팁: footerData를 사용하면 닫는 </body> 태그 바로 앞에 스크립트가 배치되어 페이지 로딩을 느리게 하지 않으므로 채팅 위젯에 권장됩니다.

대안: Site Package 사용 (Site Package용)

Site Package를 사용하는 경우 TypoScript 구성 파일을 통해 스크립트를 추가할 수 있습니다:

Site Package 폴더로 이동하세요: packages/your_sitepackage/Configuration/TypoScript/
setup.typoscript을 열거나 새로 만드세요
다음 코드를 추가하세요:
page.footerData { 99 = TEXT 99.value = <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> }
YOUR_WIDGET_ID를 실제 위젯 ID로 교체하세요
TYPO3 백엔드에서 캐시를 지우세요

대안: Fluid 템플릿 사용 (FooterAssets)

For sites using Fluid templates, you can use the FooterAssets section:

Fluid 템플릿 파일로 이동하세요 (보통 Resources/Private/Templates/에 위치)
레이아웃 또는 템플릿에 FooterAssets 섹션을 추가하세요:
<f:section name="FooterAssets"> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </f:section>
페이지 레이아웃이 FooterAssets 섹션을 렌더링하는지 확인하세요:
<f:render section="FooterAssets" optional="true" />
TYPO3 캐시를 지우세요

중요: FooterAssets 기능은 TYPO3 v8 이상이 필요합니다. 이전 버전의 경우 TypoScript footerData 방법을 사용하세요.

대안: AssetCollector 사용 (개발자용)

For extension developers, TYPO3 v10.3+ offers the AssetCollector API:

PHP 코드(예: 컨트롤러 또는 미들웨어)에서 AssetCollector를 주입하세요
커스텀 속성으로 스크립트를 추가하세요:
use TYPO3\CMS\Core\Page\AssetCollector; $this->assetCollector->addJavaScript( 'asyntai_chatbot', 'https://asyntai.com/static/js/chat-widget.js', ['async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID'] );

3단계: 설치 확인

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

위젯이 보이지 않나요? 모든 캐시를 지워야 합니다: Admin Tools → Maintenance → Flush TYPO3 and PHP Cache로 이동하세요. 또한 브라우저 캐시를 지우거나 시크릿 창에서 확인해 보세요. TypoScript를 사용하는 경우 템플릿이 페이지 계층 구조에 올바르게 포함되어 있는지 확인하세요.