導入ガイド / Framer
FramerにEmbentを導入
FramerのCustom Codeパネルからスニペットを追加するだけです — プラグインもコードのオーバーライドも不要です。
始める前に
- サイトのProject Settingsを編集する権限。
- Framerの無料の*.framer.appサブドメインではなく独自ドメインでウィジェットを公開したい場合のみ、有料のBasicまたはProプランが必要です — これはEmbent固有の要件ではなく、Framer一般の要件です。
手順
1
埋め込みスニペットをコピー
Embentのダッシュボードでボットの Overview を開き、埋め込みスニペットをコピーしてください。次のような内容です:
<script src="https://api.embent.com/widget.js" data-bot="YOUR_BOT_ID" async></script>2
Project SettingsでCustom Codeを開く
Project Settingsを開き、左サイドバーの Custom Code タブを選択します。Add Script をクリックします(すでに1つある場合は+アイコン)。
3
貼り付けて、毎回のアクセスで実行するよう設定し、公開
コード欄にスニペットを貼り付け、名前を付け、配置場所(headまたはbody、startまたはend — bodyのendが無難な標準設定です)を選び、すべてのページアクセスで実行するよう設定して、サイトを公開します。
動作確認
公開してから、新しいブラウザタブでサイトを再読み込みしてください。チャットのアイコンが画面の隅に表示されます。自分のページについて質問すると、引用付きで回答するはずです。
うまくいかない場合
試してもウィジェットが表示されませんか?ほとんどのケースはこちらで解決します。
埋め込みコードを追加したのにウィジェットが表示されません — チャットのアイコンもボタンも何も出てきません「ウィジェットが表示されない」というケースのほとんどは、次の4点で解決します。まず、公開中のサイトを開いてページのソースを表示し(右クリック → ページのソースを表示)、「embent」を検索してください — スクリプトが見つからない場合、そのコードは公開済みのページに保存されていません。次に、スニペット内のdata-bot IDが、ダッシュボードのSettingsに表示されているものと一致しているか確認してください。3つ目に、サイトのページキャッシュとCDNキャッシュをクリアしてください — キャッシュされたページはウィジェットのない古いバージョンを表示し続けます。4つ目に、ダッシュボードでボットが一時停止(paused)されていないか確認してください — 一時停止中のボットは、意図的に訪問者に何も表示しません。
よくある質問
Freeプランでも使えますか?はい。Custom CodeはすべてのFramerプランのProject Settingsに用意されています。framer.appサブドメインの代わりに独自ドメインを使いたい場合のみ、有料プランが必要です。
スニペットはheadとbody、どちらに配置すべきですか?bodyのendがより安全な標準設定です:ページの残りが先に描画され、その直後にスクリプトが読み込まれるため、それより上の要素をブロックしません。
サイトの表示が遅くなりますか?いいえ。スクリプトは非同期で読み込まれ、ウィジェットは独自のフレームワークを持たずgzip圧縮後50KB未満なので、ページの描画をブロックすることはありません。
今すぐEmbentをあなたのサイトに導入しましょう。答えをでっち上げるくらいなら「わかりません」と言うAIエージェント。Freeプラン、カード登録不要 — ほとんどのサイトが2分以内に回答を始めます。
画面の隅にあるチャットのアイコンが、まさにこのページで動いているEmbent自身です — 私たちについて何でも聞いてみてください。