ドキュメント
Asyntaiの使い方を学ぶ
Asyntai AIチャットボットをShopifyに追加する方法
Shopifyストア向けのステップバイステップガイド
Weebly
ステップ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: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>