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

BigCommerceストア向けステップバイステップガイド

プラットフォーム:

ステップ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:

<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>

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

ステップ2：インストール方法を選択する

BigCommerceにチャットウィジェットを追加する方法はいくつかあります。最適な方法を選択してください：

方法1：スクリプトマネージャーを使用する（推奨）

スクリプトマネージャーは、BigCommerceストアにカスタムスクリプトを追加する最も簡単で推奨される方法です。コーディングの知識が不要で、テーマの変更後も維持されます。

BigCommerceコントロールパネルにログインします
ストアフロント → スクリプトマネージャーに移動します
「スクリプトを作成」ボタンをクリックしてください
以下の設定でスクリプトを構成します：
- 名前： Asyntai AI Chatbot
- 説明： AI搭載チャットウィジェット（任意）
- 配置： フッター
- 場所： すべてのページ
- スクリプトカテゴリ： 機能
- スクリプトタイプ： スクリプト
「スクリプトの内容」ボックスにAsyntaiの埋め込みコードを貼り付けてください
「保存」をクリックしてください

スクリプトマネージャーを使う理由 スクリプトマネージャーで追加されたスクリプトはテーマとは別に管理されます。ストアのテーマを更新または変更しても影響を受けません。

方法2：ページビルダーを使用する

BigCommerceのページビルダーを使用して、HTML要素でチャットウィジェットを追加できます。ウィジェットの表示場所をより細かく制御したい場合に便利です。

BigCommerceコントロールパネルにログインします
ストアフロント → マイテーマに移動します
アクティブなテーマの「カスタマイズ」ボタンをクリックしてください
ページビルダーの左サイドバーで「HTML」要素を見つけてください
HTML要素をページテンプレートのフッターエリアにドラッグ＆ドロップします
HTML要素をクリックし、「HTMLを編集」を選択します
Asyntaiの埋め込みコードを貼り付けます
「HTMLを保存」をクリックしてください
「公開」をクリックして、ライブストアに変更を適用します

注記: すべてのページにチャットボットを表示したい場合は、フッターなどのグローバルリージョンに追加する必要があります。サイト全体のインストールにはスクリプトマネージャー方式の方が簡単です。

方法3：テーマファイルを編集する（Stencilテーマ）

Stencilテーマを使用する開発者は、テーマファイルに直接コードを追加できます。テーマのソースファイルへのアクセスが必要です。

BigCommerceコントロールパネルを使用する

ストアフロント → マイテーマに移動します
アクティブなテーマの「詳細」をクリックしてください
「テーマファイルを編集」を選択してください
templates → components → commonに移動します
footer.htmlを開きます
ファイルの最下部までスクロールします
閉じタグの直前にAsyntaiの埋め込みコードを貼り付けます
「ファイルを保存して適用」をクリックしてください

Stencil CLI（ローカル開発）を使用する

Stencil CLIでローカル開発を行っている場合：

テーマのローカルファイルを開きます
templates/components/common/footer.htmlに移動します
閉じタグの前にAsyntaiの埋め込みコードを追加します
stencil pushで変更をプッシュします

重要: テーマファイルの変更はテーマの更新時に上書きされる場合があります。テーマ更新後も維持される恒久的な方法として、スクリプトマネージャー方式をご利用ください。

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

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

ウィジェットが表示されませんか？ ブラウザのキャッシュをクリアして再試行してください。テーマエディターで変更を行った場合は、「公開」をクリックしてライブストアに変更を適用したことを確認してください。

ドキュメント