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

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

プラットフォーム:

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

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

<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：Shopifyテーマにコードを追加する

以下の手順に従って、Shopifyストアにチャットボットを追加してください：

Shopify管理画面にログインします
オンラインストア → テーマに移動します
現在のテーマを見つけて"..."ボタン（3つの点）をクリックしてください
ドロップダウンメニューから「コードを編集」を選択します
左サイドバーのLayoutセクションで、theme.liquidをクリックします
閉じ</body>タグを見つけるまでスクロールします
</body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
右上の「保存」をクリックしてください

ヒント: Ctrl+F（Windows）またはCmd+F（Mac）を使用して、theme.liquidファイル内の</body>をすばやく検索します。

代替方法：Shopifyアプリを使用する

コードを編集したくない場合は、Shopifyアプリを使用してカスタムスクリプトを追加できます：

Shopifyアプリストアに移動します
"Custom Script Injector"または"Header & Footer Scripts"を検索してください
お好みのアプリをインストールします
フッターセクションにAsyntaiの埋め込みコードを追加します

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

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

ウィジェットが表示されませんか？ Shopifyがテーマファイルをキャッシュしている場合があります。シークレット／プライベートブラウザウィンドウでストアを開くか、数分待ってからページを更新してください。

Shopify Plusユーザー

Shopify Plusをご利用の場合は、checkout.liquidファイルにスクリプトを追加して、チェックアウトページにチャットボットを表示することもできます。ただし、ほとんどのストアではメインのストアフロントページにのみ必要です。

AI 検索バーを追加する

AI 検索バーは独自のコードを持つ別のウィジェットです。チャットと一緒に追加しても、単独で追加してもかまいません。Standard 以上のプランが必要で、下位プランではバーは表示されますが結果は返りません。

script タグに data-replace 属性を追加すると、テーマにある既存の検索バーと置き換わります。 theme.liquid の閉じる body タグの直前に貼り付けてください。チャット用コードと同じファイルです。テーマの検索結果ページはそのまま残るので、Enter はこれまでどおり動作します。

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

AI 検索バーの詳しいガイドを読む