ダッシュボードに戻る

ドキュメント

Asyntaiの使い方を学ぶ

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

PrestaShopウェブサイトのステップバイステップガイド

埋め込みコードの取得

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

まず、Asyntaiダッシュボードに移動し、「埋め込みコード」セクションまでスクロールしてください。次のような固有の埋め込みコードをコピーしてください:

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

注意: 上記のコードは一例です。個人のウィジェットIDが含まれているため、ダッシュボードから固有の埋め込みコードをコピーしてください。

ステップ2:カスタムコードモジュールを使用(推奨)

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

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

ヒント: この目的で人気のある無料モジュールには、"Custom JS and CSS Pro"、\"Custom Code"、"Header and Footer Scripts"があります。これらのモジュールはテーマやPrestaShopの更新後も維持されます。

代替方法:テーマテンプレートを編集(PrestaShop 1.7以降/8)

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

  1. Access your PrestaShop files via FTP or file manager
  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ファイルを使用

Many PrestaShop themes include a custom.js file for your own scripts:

  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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
      }
    }
  3. YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
  4. Install the module via Modules → Module Manager

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

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

ウィジェットが表示されませんか? PrestaShopのキャッシュをクリアしてください:Advanced Parameters → Performance → Clear cacheに移動してください。また、ブラウザのキャッシュをクリアするか、シークレットウィンドウで表示してみてください。カスタムモジュールを使用している場合は、Module Managerで有効になっていることを確認してください。