Asyntai AIチャットボットをTYPO3に追加する方法

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バックエンドにログインします
Web → テンプレートに移動します
ページツリーでルートページを選択します
"Edit the whole template record"をクリックしてください（または"Info/Modify"を選択してから"Setup"を選択）
In the Setup field, add the following TypoScript code:
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に置き換えてください
「保存」をクリックしてください
TYPO3キャッシュをクリアします：管理ツール → メンテナンス → TYPO3およびPHPキャッシュのフラッシュ

ヒント: footerDataを使用すると、閉じタグ</body>の直前にスクリプトが配置されます。これはチャットウィジェットに推奨される方法であり、ページの読み込みを遅くすることはありません。

代替方法：サイトパッケージを使用する（サイトパッケージ向け）

サイトパッケージを使用している場合は、TypoScript設定ファイルからスクリプトを追加できます：

サイトパッケージフォルダに移動します：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>
Make sure your page layout renders the FooterAssets section:
<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：インストールの確認

変更を保存してキャッシュをクリアした後、新しいブラウザタブまたはシークレットウィンドウでウェブサイトにアクセスしてください。右下にチャットウィジェットボタンが表示されます。クリックして正しく開いて動作することを確認してください。

ウィジェットが表示されませんか？ すべてのキャッシュをクリアしてください：管理ツール → メンテナンス → TYPO3およびPHPキャッシュのフラッシュに移動します。また、ブラウザのキャッシュをクリアするか、シークレットウィンドウで表示してみてください。TypoScriptを使用している場合は、テンプレートがページ階層に正しく含まれていることを確認してください。