導入ガイド / HTML・独自サイト
HTMLサイトにEmbentを導入
スクリプトタグ1つだけで、ビルド工程もフレームワークも不要です。HTMLを編集できれば、1分もかからず完了します。
始める前に
- サイトが配信しているHTMLファイルまたはテンプレートを編集する権限。
手順
1
埋め込みスニペットをコピー
Embentのダッシュボードでボットの Overview を開き、埋め込みスニペットをコピーしてください。次のような内容です:
<script src="https://api.embent.com/widget.js" data-bot="YOUR_BOT_ID" async></script>2
閉じる</body>タグの直前に貼り付け
すべてのページを描画するファイルまたはテンプレートを開き — 多くの静的サイトでは共通のレイアウトやフッターのincludeファイルです — 閉じる</body>タグの直前にスニペットを貼り付けます。
3
変更を公開
編集したファイルを、いつもサイトを公開している方法でアップロードまたはデプロイします。
動作確認
サイトを再読み込みしてください。チャットのアイコンが画面の隅に表示されます。自分のページについて質問すると、引用付きで回答するはずです。
うまくいかない場合
試してもウィジェットが表示されませんか?ほとんどのケースはこちらで解決します。
埋め込みコードを追加したのにウィジェットが表示されません — チャットのアイコンもボタンも何も出てきません「ウィジェットが表示されない」というケースのほとんどは、次の4点で解決します。まず、公開中のサイトを開いてページのソースを表示し(右クリック → ページのソースを表示)、「embent」を検索してください — スクリプトが見つからない場合、そのコードは公開済みのページに保存されていません。次に、スニペット内のdata-bot IDが、ダッシュボードのSettingsに表示されているものと一致しているか確認してください。3つ目に、サイトのページキャッシュとCDNキャッシュをクリアしてください — キャッシュされたページはウィジェットのない古いバージョンを表示し続けます。4つ目に、ダッシュボードでボットが一時停止(paused)されていないか確認してください — 一時停止中のボットは、意図的に訪問者に何も表示しません。
チャットのアイコンは表示されるのに返信が届かない、またはウィジェット自体が表示されず、サイトでContent-Security-Policyを設定していますscript-src(ウィジェットのスクリプトを読み込みます)とconnect-src(チャットの返信ストリームが同じオリジンに接続します)の両方に https://api.embent.com を追加してください。script-srcにこれがないとウィジェット自体が表示されず、connect-srcにこれがないとアイコンは表示されても回答が一切ストリーミングされません。
CloudflareのRocket Loaderを使っていて、ウィジェットの動作が不安定、または表示されませんRocket Loaderは独自のローダーを通じてスクリプトを遅延実行します。ウィジェットはそれに耐えられるよう作られていますが、それでも表示されない場合は、Embentのスクリプトタグに data-cfasync="false" を追加してください — Rocket Loaderの公式なオプトアウト方法です — これでスクリプトは通常どおり読み込まれます。
よくある質問
React、Vue、Next.jsなど他のフレームワークでも使えますか?はい。ルートのHTMLテンプレート(index.htmlやルートレイアウト)に一度スニペットを貼り付けるだけです。ウィジェットはShadow DOM内で描画され、フレームワークの動作を妨げません — ラッパーコンポーネントは不要です。
サイトの表示が遅くなりますか?いいえ。スクリプトは非同期で読み込まれ、ウィジェットは独自のフレームワークを持たずgzip圧縮後50KB未満なので、ページの描画をブロックすることはありません。
すべてのページに追加する必要がありますか?複数のページで共有されているテンプレートにだけ追加すれば十分です。共通レイアウトを使わないページには、個別にスニペットを追加する必要があります。
今すぐEmbentをあなたのサイトに導入しましょう。答えをでっち上げるくらいなら「わかりません」と言うAIエージェント。Freeプラン、カード登録不要 — ほとんどのサイトが2分以内に回答を始めます。
画面の隅にあるチャットのアイコンが、まさにこのページで動いているEmbent自身です — 私たちについて何でも聞いてみてください。