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

プラットフォーム:

PrestaShop

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：カスタムコードモジュールを使用（推奨）

チャットボットを追加する最も簡単な方法は、PrestaShop Addonsマーケットプレイスの無料"Custom Code"モジュールを使用することです：

1. PrestaShopバックオフィスにログインしてください
2. Modules → Module Managerに移動してください
3. 「モジュールをアップロード」をクリックするか、マーケットプレイスで「Custom Code」または「Header Footer Scripts」を検索します
4. 「Custom JS and CSS」または同様のモジュールをインストールしてください
5. インストール後、モジュールの設定に移動してください
6. "Footer Scripts"または"Before </body>"セクションを見つけてください
7. Asyntaiの埋め込みコードを貼り付けます
8. 「保存」をクリックしてください

代替方法：テーマテンプレートを編集（PrestaShop 1.7以降/8）

テーマのフッターテンプレートにコードを直接追加できます：

1. FTPまたはファイルマネージャーでPrestaShopファイルにアクセスしてください
2. テーマフォルダに移動してください：themes/your_theme/templates/_partials/
3. ファイルfooter.tplを開いてください（一部のテーマではtemplates/layouts/layout-both-columns.tplを確認してください）
4. 閉じ</body>タグまたは{block name='javascript_bottom'}セクションを見つけてください
5. 閉じ</body>タグの直前にAsyntai埋め込みコードを貼り付けてください
6. ファイルを保存します
7. PrestaShopキャッシュをクリアしてください：Advanced Parameters → Performance → Clear cache

代替方法：テーマのカスタムJavaScriptファイルを使用

多くのPrestaShopテーマには、独自のスクリプト用のcustom.jsファイルが含まれています：

1. 次のパスに移動してください：themes/your_theme/assets/js/
2. custom.jsという名前のファイルを探してください（存在しない場合は作成してください）
3. チャットボットを動的に読み込むために、以下のコードを追加してください：
   (function() {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
})();
4. YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
5. PrestaShopキャッシュをクリアしてください

代替方法：シンプルなモジュールを作成（開発者向け）

開発者向けに、displayFooterフックを使用してシンプルなモジュールを作成できます：

1. フォルダを作成してください：modules/asyntaichatbot/
2. 以下のコードでasyntaichatbot.phpを作成してください：
   <?php
class AsyntaiChatbot extends Module {
  public function __construct() {
    $this->name = 'asyntaichatbot';
    $this->version = '1.0.0';
    $this->author = 'Your Name';
    parent::__construct();
    $this->displayName = 'Asyntai Chatbot';
  }
  public function install() {
    return parent::install() && $this->registerHook('displayFooter');
  }
  public function hookDisplayFooter($params) {
    return '<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>';
  }
}
3. YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
4. Modules → Module Manager経由でモジュールをインストールしてください

ステップ3：インストールの確認

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