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

プラットフォーム:

TYPO3

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

ステップ1：埋め込みコードを取得する

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

ステップ2：TypoScript footerDataを使用する（推奨）

すべてのページにチャットボットを追加する最も簡単な方法は、TypoScript footerDataを使用することです：

1. TYPO3バックエンドにログインします
2. Web → テンプレートに移動します
3. ページツリーでルートページを選択します
4. "Edit the whole template record"をクリックしてください（または"Info/Modify"を選択してから"Setup"を選択）
5. Setupフィールドに、次のTypoScriptコードを追加します：
   page.footerData.99 = TEXT
page.footerData.99.value = <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
6. YOUR_WIDGET_IDをダッシュボードから取得した実際のウィジェットIDに置き換えてください
7. 「保存」をクリックしてください
8. TYPO3キャッシュをクリアします：管理ツール → メンテナンス → TYPO3およびPHPキャッシュのフラッシュ

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

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

1. サイトパッケージフォルダに移動します：packages/your_sitepackage/Configuration/TypoScript/
2. setup.typoscriptを開くか作成します
3. 以下のコードを追加します：
   page.footerData {
  99 = TEXT
  99.value = <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
}
4. YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
5. TYPO3バックエンドでキャッシュをクリアします

代替方法：Fluidテンプレートを使用する（FooterAssets）

Fluidテンプレートを使用しているサイトでは、FooterAssetsセクションを使用できます：

1. Fluidテンプレートファイル（通常はResources/Private/Templates/内）に移動します
2. レイアウトまたはテンプレートにFooterAssetsセクションを追加します：
   <f:section name="FooterAssets">
  <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
</f:section>
3. ページレイアウトがFooterAssetsセクションをレンダリングすることを確認してください：
   <f:render section="FooterAssets" optional="true" />
4. TYPO3キャッシュをクリアします

代替方法：AssetCollectorを使用する（開発者向け）

拡張機能の開発者向けに、TYPO3 v10.3+はAssetCollector APIを提供しています：

1. PHPコード（例：コントローラーやミドルウェア）で、AssetCollectorをインジェクトします
2. カスタム属性を使用してスクリプトを追加します：
   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：インストールの確認

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