ダッシュボードに戻る

ドキュメント

Asyntaiの使い方を学ぶ

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

Volusion eコマースストア向けのステップバイステップガイド

埋め込みコードの取得

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

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

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

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

ステップ2:テーマをバックアップする

Volusionストアに変更を加える前に、バックアップを作成することが重要です:

  1. Volusion管理パネルにログインします
  2. デザイン → ファイルエディターに移動します
  3. Archive Themeをクリックしてバックアップを作成します
  4. 保管用にアーカイブのコピーをダウンロードします

重要: コードを変更する前に必ずテーマをバックアップしてください。問題が発生した場合に簡単に元に戻すことができます。

ステップ3:テンプレートにコードを追加する(推奨)

Volusionストアのすべてのページにチャットボットを追加するには:

  1. Volusion管理画面で、デザイン → テンプレートに移動します
  2. 別の方法として、デザイン → ファイルエディター → ショートカットに移動します
  3. メインテンプレートファイル(通常はtemplate_*.html)を見つけます
  4. 閉じ</body>タグを見つけるまでスクロールします
  5. </body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
  6. 保存をクリックして変更を適用します
  7. ストアをプレビューしてチャットボットが表示されることを確認します

ヒント: 閉じタグ</body>の前にコードを追加すると、最適なページ読み込みパフォーマンスが確保されます。この方法により、ストアのすべてのページにチャットボットが自動的に追加されます。

代替方法1:ヘッダー/フッターHTML挿入

Volusionでは、グローバル設定からカスタムコードを追加できます:

  1. Volusion管理パネルにログインします
  2. 設定 → デザイン設定に移動します
  3. カスタムHTMLまたはフッターコードセクションを探します
  4. このフィールドにAsyntaiの埋め込みコードを貼り付けます
  5. Saveをクリックします
  6. コードがすべてのページに自動的に追加されます

注記: カスタムHTML設定の正確な場所は、Volusionのプランやバージョンによって異なる場合があります。「Custom Code」、「Header/Footer」、または「Global HTML」に関連する設定を探してください。

代替方法2:ページ固有のインストール

特定のページにのみチャットボットを追加したい場合:

  1. デザイン → ファイルエディター → ショートカットに移動します
  2. PageName関数を使用して、ページ固有のテンプレートを作成または編集します
  3. 特定のページにのみスクリプトを含める条件付きコードを追加します:
<!-- Add to template file --> <script> if (PageName == 'home' || PageName == 'products') { // Your Asyntai embed code here var script = document.createElement('script'); script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); script.async = true; document.head.appendChild(script); } </script>

ヒント: この方法は、商品ページ、チェックアウト、サポートページなどの特定のページにのみチャットボットを表示したい場合に便利です。'home'と'products'をVolusionストアの実際のページ名に置き換えてください。

代替方法3:カスタムCSS/HTML記事

記事ブロックを通じてコードを追加することもできます:

  1. Volusion管理画面で、記事 → 記事に移動します
  2. 新しい記事を作成するか、既存の記事を編集します
  3. 記事エディターでHTMLビューに切り替えます
  4. Asyntaiの埋め込みコードを貼り付けます
  5. 記事を保存します
  6. この記事をページテンプレートまたはサイドバーに追加します
  7. チャットボットは、この記事が表示されるページに表示されます

注記: この方法はあまり一般的ではありませんが、テンプレートファイルへのアクセスが制限されている場合や、記事の表示/非表示でチャットボットのオン/オフを簡単に切り替えたい場合に便利です。

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

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

ウィジェットが表示されませんか? すべてのテンプレート変更を保存したことを確認してください。ブラウザのキャッシュをクリアするか、シークレットモードで表示してください。Volusionはテンプレートをキャッシュする場合があるため、変更が反映されるまで数分かかることがあります。ブラウザコンソール(F12)でJavaScriptエラーがないか確認してください。

お困りですか?

テンプレートファイルの編集に不安がある場合は、VolusionのカスタマーサポートチームがカスタムHTMLおよびCSSのリクエストについてサポートいたします。VolusionストアへのチャットボットのインストールについてのガイダンスはAsyntaiサポートにもお問い合わせいただけます。

プロフェッショナルサポート: テーマの変更や複雑なカスタマイズについてプロフェッショナルなサポートが必要な場合、Volusionはカスタムコーディングサービスを提供しています。