Framer サイト向け AI チャットボット：2026 年セットアップガイド

Framer は「本当に出荷できるマーケティングサイト」を求める創業者にとってデフォルトのツールになりました。整ったタイポグラフィ、整然とした CMS コレクション、滑らかなアニメーション――React を一行も書かずに実現できます。しかし最初の訪問者が質問を抱えて来た瞬間、Framer は助けてくれなくなります。組み込みのライブチャットはなく、FAQ ウィジェットもなく、コミュニティの数少ないプラグインも単純なメールフォームかエンタープライズ価格の向こう側に閉ざされています。

このギャップは大きな問題です。B2B 購買判断の大半は営業と話す前に行われ、その調査の多くは誰も受信箱を見ていない時間帯に起こります。静的な FAQ ページは商談の墓場です――訪問者はざっと目を通し、自分のケースに合うものを見つけられずタブを閉じます。

本物の AI チャットボットはそのギャップを埋めます。2018 年の決定木型ではなく、ドキュメント、料金、ケーススタディを読み込み、出典付きで答える LLM 駆動アシスタントです。特に Framer では、正しいチャットボットには 3 つの特徴が必要です。

1. ビルドタイム依存ゼロ ― Framer プロジェクトにインストールするものはなく、カスタムコードコンポーネントも Next.js の再エクスポートも不要。1 本の埋め込みスクリプトだけで入ります。
2. Framer CMS コンテンツとの連携 ― 公開済みの Framer サイトをクロールし、新しいページを追加しても同期を保てます。
3. ビジュアルシステムへの適合 ― Framer のデザイナーはブランドに強いこだわりがあります。2019 年風のサポートバブルのようなチャットボットは即座にアンインストールされます。

Chatloom はまさにこの 3 つの制約を満たすために作られており、2026 年の Framer 創業者 Slack でこれほど頻繁に名前が挙がる理由でもあります。

最速の方法は カスタムコード埋め込みです。無料の Hobby プランを含むすべての Framer プランで利用できます。すでに Chatloom アカウントがあれば、全体の流れは 4 ステップ、3 分以内で完了します。

エージェント作成 → Framer サイトをクロール → 埋め込みをコピー → Framer のカスタムコードに貼り付け → Publish

1. エージェントを作成する。 chatloom.app にサインアップし、エージェントに名前を付け、モデルを選択します（GPT-4.1 Mini がデフォルトで、マーケティングサイトの Q&A の 95% を月数円単位のコストで処理します）。
2. Framer サイトに向ける。 Chatloom に組み込まれたクローラーが公開済みの Framer URL（yourdomain.framer.website またはカスタムドメイン）を取得し、到達可能なすべてのページをインデックス化します。典型的な 12 ページのサイトで約 90 秒です。クローラーは robots.txt とレート制限を尊重するため、Framer 自身のボット保護を発動させません。
3. 埋め込みスニペットを取得する。 エージェントのダッシュボードで Install → Custom embed を開き、3 行のスクリプトをコピーします。

<script>
  window.CHATLOOM_AGENT_ID = "agt_xxxxxxxxxxxxxxxx";
</script>
<script async src="https://chatloom.app/widget.js"></script>

1. Framer に貼り付ける。 Framer プロジェクトを開き、Site Settings → General → Custom Code に進み、スニペットを End of body フィールドに貼り付けます。保存して公開。ウィジェットはすべてのページに、将来追加するページを含めてグローバルに表示されます。

開発者としての作業はこれだけです。npm も、API ルートも、承認すべき Framer プラグインも必要ありません。ウィジェットは Chatloom の CDN 上でセルフホストされ、自動更新されるため、このコードに再度触れることはありません。

Framer のデザイナーが何より気にするのはひとつ、「チャットボットが貼り付けたように見えてはいけない」ということです。Chatloom のウィジェットビルダーはまさにその制約のために設計されました。重要な視覚プロパティはすべてコントロールであり、クラス名ではありません。

ビルダーの Widget セクションで以下を設定できます。

• ランチャーモード ― ボタン、コンパクトパネル、フルスクリーンオーバーレイ、サイドバー。フルスクリーンは Framer のランディングで美しく動作します。ヒーロービューポートを尊重し、背景をフェードさせるからです。
• ブランドカラー ― プライマリ、アクセント、サーフェス。チャット表面全体（ヘッダー、吹き出し、サジェスト、タイピングインジケーター）がリアルタイムで再テーマ化されます。
• コーナーの丸み ― Framer のデフォルトの 12px に合わせる、エディトリアルサイト向けにシャープに、遊び心のあるブランド向けに完全な丸に。
• カスタムフォント ― .woff2 をアップロードするか、Google Fonts から選択。マーケティングサイトの戦いはフォントで決まり、Framer ユーザーから最もリクエストされる機能です。
• アイコンとアバター ― ブランドマークを透過 PNG でアップロード。ランチャーボタンは透過を尊重し、Retina で鮮明にレンダリングされます。
• チャット背景 ― グラデーション、単色、または画像。Framer ヒーローと組み合わせれば、ウィジェットはサードパーティの挿入物ではなく、ページの一部のように感じられます。

ビルダーの各セクションには、シミュレートされたビューポートで実際のウィジェットを開く Test Live ボタンがあります。Test Live の目視チェックを通過しないものは出荷しないでください。

ナレッジベースが空のチャットボットは、チャットボットがないよりも悪いものです――答えをでっち上げて訪問者を怖がらせます。Framer サイトは訓練しやすく、コンテンツがすでに構造化されているためです。ヒーローセクションには明確な見出しがあり、CMS アイテムには一貫したフィールドがあり、料金表は Framer 自身のコンポーネントに存在します。

Chatloom は 4 つの取り込みパスを提供しており、どれも Framer プロジェクトで機能します。

1. クロール ― Framer ドメインを一度貼り付けるだけで、Chatloom がサイトマップを走査し、メインコンテンツを抽出し、Framer の UI クローム（ナビバー、クッキーバナー、フッター）を取り除き、残りを RAG 用にチャンク化します。これだけでマーケティング Q&A の 80% をカバーします。
2. サイトマップアップロード ― サイトがパスワード保護されているか、サブセットだけ訓練したい場合、sitemap.xml をアップロードして対象 URL を選択できます。
3. PDF とドキュメントのアップロード ― ピッチデッキ、ワンページャー、料金 PDF、オンボーディング資料をドロップします。Chatloom はクロールと同じ埋め込みパイプラインで解析します。
4. 手動テキスト ― まだサイトにない微妙な回答（「トライアル途中でキャンセルするとどうなりますか」など）は、直接ナレッジベースに入力します。これらはファーストクラスのチャンクになり、訪問者がその正確な質問をしたときにクロール結果を上回ります。

下層のハイブリッド検索エンジン（デンスベクター + BM25 + RRF + Cohere リランカー）のおかげで、キーワードの一致を考える必要はありません。「ダウングレードの方法は」と打った訪問者は、ドキュメントが「プラン変更」と書いていても正しい答えを得ます。

AI は Framer サイトの全てではありません。ボットが本気の購買者と出会った瞬間、道を空ける必要があります。Chatloom は 3 つのエスカレーションパスを組み込みで提供します。

人間への引き継ぎ。 任意の会話を Chatloom の受信トレイで人間のオペレーターが引き継げます。オペレーターは完全なトランスクリプト、訪問者のページパス（つまり Framer サイトのどのセクションがチャットを誘発したか）、AI が出していた信頼度スコアを確認できます。Framer の創業者は通常最初の月に自分で対応し、その後フリーランサーや契約 SDR に引き継ぎます。

リードキャプチャ。 ボットは自然な会話の中で名前、メール、1〜2 個の条件質問を収集し、Webhook、Zapier、HubSpot/Pipedrive 直結で CRM にリードをプッシュできます。フォーム不要です。

カレンダー予約。 Cal.com または Calendly のリンクをボットのシステムプロンプトに入れておくと、購買者が「デモを見られますか」「どう始めればいいですか」と言ったときにボットが予約 URL を渡します。ハイインテントセールスでは、ナビゲーションにある静的な「デモ予約」ボタンよりも劇的に高いコンバージョンを出します。

3 つのパスはすべて同じ会話レコードを共有します。AI が最初の 3 メッセージに答え、人間が 4 通目に引き継いだ場合、CRM は完全な履歴を受け取ります――「ボットに言ったことをもう一度教えてくれますか」という瞬間はありません。

ここは Framer の創業者が Intercom の見積もりを覚悟する場所です。今や経済は完全に異なります。

Chatloom Free（月 0 ドル）は月 100 件の AI メッセージ、無制限のページクロール、ブランドカスタマイズ、埋め込みスクリプトをカバーします。ウェイトリストを立ち上げる Framer ランディングページには本当にこれで十分です。

Chatloom Starter（月 29 ドル）は 2,000 メッセージ、ライブチャット引き継ぎ、アナリティクス、CRM Webhook を解禁し、「Powered by Chatloom」バッジを削除します。実トラフィックが発生すると、ほとんどの創業者はこのティアに落ち着きます。

Chatloom Pro（月 99 ドル）はカスタムモデルルーティング、優先サポート、高いメッセージ上限、マルチシートアクセスを追加します――契約 SDR やパートタイムのサポート担当者が受信トレイを共有するようになったときに便利です。

既存の主要プレイヤーと比較すると:

Framer で作ったマーケティングサイトにとって、これらの既存価格はトラフィックに対して完全に不釣り合いです。損益分岐点の計算も期待以上にフレンドリーです――Starter 価格では、月 2 通のメールを時給 75 ドルのフリーランス VA から逸らせばチャットボットは元を取ります。実際の比率は 40 対 1 に近いです。