導入ガイド / Shopify
ShopifyにEmbentを導入
テーマコードにスクリプトタグを1つ追加するだけで、アプリのインストールは不要です。テーマエディタを開ければ、数分で完了します。
始める前に
- ストアのテーマコードを編集する権限(テーマはストアに購入・追加した後でなければコードを編集できません)。
- ウィジェットはShopifyのチェックアウト、サンクスページ、注文状況ページには表示されません — Shopify Plusでないストアでは、Shopifyがこれらのページでカスタムスクリプトをブロックしています。
手順
1
埋め込みスニペットをコピー
Embentのダッシュボードでボットの Overview を開き、埋め込みスニペットをコピーしてください。次のような内容です:
<script src="https://api.embent.com/widget.js" data-bot="YOUR_BOT_ID" async></script>2
テーマコードを開く
Shopify管理画面から Online Store → Themes に進みます。現在のテーマで ⋯ メニューをクリックし、Edit code を選択します。後のテーマ更新と互換性のないコード変更は自動的に削除されるため、Shopifyは事前にテーマを複製することを推奨しています。
3
theme.liquidの</body>直前に貼り付け
Layoutフォルダ内のtheme.liquidを開き、ファイル末尾付近の閉じる</body>タグまでスクロールして、その直前にスニペットを貼り付けます。Saveをクリックします。
動作確認
新しいブラウザタブでストア画面(チェックアウトではなく)を再読み込みしてください。チャットのアイコンが画面の隅に表示されます。自分のページについて質問すると、引用付きで回答するはずです。
うまくいかない場合
試してもウィジェットが表示されませんか?ほとんどのケースはこちらで解決します。
埋め込みコードを追加したのにウィジェットが表示されません — チャットのアイコンもボタンも何も出てきません「ウィジェットが表示されない」というケースのほとんどは、次の4点で解決します。まず、公開中のサイトを開いてページのソースを表示し(右クリック → ページのソースを表示)、「embent」を検索してください — スクリプトが見つからない場合、そのコードは公開済みのページに保存されていません。次に、スニペット内のdata-bot IDが、ダッシュボードのSettingsに表示されているものと一致しているか確認してください。3つ目に、サイトのページキャッシュとCDNキャッシュをクリアしてください — キャッシュされたページはウィジェットのない古いバージョンを表示し続けます。4つ目に、ダッシュボードでボットが一時停止(paused)されていないか確認してください — 一時停止中のボットは、意図的に訪問者に何も表示しません。
チャットのアイコンが表示されず、速度最適化アプリ(Booster、Hyperspeedなど)を使っています「操作があるまでJavaScriptを遅延させる」タイプの速度最適化アプリは、Embentのスクリプトを書き換えたり後回しにしたりすることがあります。ウィジェットはそれに耐えられるよう作られていますが、それでも表示されない場合は、アプリの除外リスト(どのアプリにも用意されています)に「embent」を追加し、ストア画面を再読み込みしてください。
よくある質問
チェックアウト中にウィジェットは表示されますか?いいえ。Shopify Plusでないストアでは、Shopifyがチェックアウトページでのカスタムコードを制限しているため、ウィジェットはストアの通常ページには表示されますが、チェックアウト、注文状況、サンクスページには表示されません。
テーマを更新するとスニペットは消えますか?消える可能性があります — テーマの更新時に、その更新と互換性のないコード変更はShopifyによって削除されます。カスタマイズする前にテーマを複製し、テーマ更新のたびにスニペットを再確認してください。
開発者やアプリは必要ですか?いいえ。スクリプトタグを1つ貼り付けるだけで十分です — アプリのインストールは不要で、Liquidの知識も閉じるbodyタグを見つけられる程度で構いません。
今すぐEmbentをあなたのサイトに導入しましょう。答えをでっち上げるくらいなら「わかりません」と言うAIエージェント。Freeプラン、カード登録不要 — ほとんどのサイトが2分以内に回答を始めます。
画面の隅にあるチャットのアイコンが、まさにこのページで動いているEmbent自身です — 私たちについて何でも聞いてみてください。