導入ガイド / Webflow
WebflowにEmbentを導入
WebflowのCustom codeパネルからスニペットを追加するだけです — アプリも、Designerに埋め込み要素を配置する必要もありません。
始める前に
- 導入先のサイトに有料のSiteプランがあること、またはCore、Growth、Agency、FreelancerいずれかのWorkspaceプランであること。無料のStarter Siteプランではカスタムコードを保存できません。
- カスタムコードは公開して初めて反映されます。Designerで保存しただけでは、公開中のサイトには反映されません。
手順
1
埋め込みスニペットをコピー
Embentのダッシュボードでボットの Overview を開き、埋め込みスニペットをコピーしてください。次のような内容です:
<script src="https://api.embent.com/widget.js" data-bot="YOUR_BOT_ID" async></script>2
Site settings → Custom code を開く
Designerで Site settings を開き、左サイドバーの Custom code タブをクリックします。
3
Footer Codeに貼り付けて公開
Footer Code欄にスニペットを貼り付けます。Webflowはこれを、閉じるbodyタグの直前にすべてのページで読み込みます。保存してからサイトを公開してください — カスタムコードの変更は公開して初めて反映されます。
動作確認
サイトを公開してから、新しいブラウザタブで再読み込みしてください。チャットのアイコンが画面の隅に表示されます。自分のページについて質問すると、引用付きで回答するはずです。
うまくいかない場合
試してもウィジェットが表示されませんか?ほとんどのケースはこちらで解決します。
埋め込みコードを追加したのにウィジェットが表示されません — チャットのアイコンもボタンも何も出てきません「ウィジェットが表示されない」というケースのほとんどは、次の4点で解決します。まず、公開中のサイトを開いてページのソースを表示し(右クリック → ページのソースを表示)、「embent」を検索してください — スクリプトが見つからない場合、そのコードは公開済みのページに保存されていません。次に、スニペット内のdata-bot IDが、ダッシュボードのSettingsに表示されているものと一致しているか確認してください。3つ目に、サイトのページキャッシュとCDNキャッシュをクリアしてください — キャッシュされたページはウィジェットのない古いバージョンを表示し続けます。4つ目に、ダッシュボードでボットが一時停止(paused)されていないか確認してください — 一時停止中のボットは、意図的に訪問者に何も表示しません。
よくある質問
無料のStarterプランで、カスタムコードを保存できません。カスタムコードには有料のSiteプラン、またはCore、Growth、Agency、FreelancerいずれかのWorkspaceプランが必要です。サイトのプラン(またはそのWorkspaceのプラン)をアップグレードすると利用できるようになります。
スニペットを保存しましたが、ウィジェットがまだ表示されません。カスタムコードは公開済みのサイトでのみ動作し、Designerやプレビューでは動作しません。保存した後にサイトを公開し、公開中のURLを再読み込みしてください。
サイトの表示が遅くなりますか?いいえ。スクリプトは非同期で読み込まれ、ウィジェットは独自のフレームワークを持たずgzip圧縮後50KB未満なので、ページの描画をブロックすることはありません。
今すぐEmbentをあなたのサイトに導入しましょう。答えをでっち上げるくらいなら「わかりません」と言うAIエージェント。Freeプラン、カード登録不要 — ほとんどのサイトが2分以内に回答を始めます。
画面の隅にあるチャットのアイコンが、まさにこのページで動いているEmbent自身です — 私たちについて何でも聞いてみてください。