Framer サイトにチャットボットを追加する方法 ― 5 分ウォークスルー

Framer に何かを貼り付ける前に、3 つのものを準備しておきましょう。

• 公開済みの Framer サイト。 ドラフトプロジェクトにスクリプトを埋め込むことはできますが、ウィジェットは公開 URL でしか動作しません。まだ Publish を押していなければ、まずそれからです。
• Chatloom アカウント。 無料ティアで十分です。chatloom.app でサインアップし、メールを確認すると、「Create your first agent」のプロンプトがある空のダッシュボードに到達します。
• 訓練用の短いテキスト。 製品に関する 200 語程度でも、最初のテストメッセージで本物の応答を得るには十分です。ヒーローセクションと About ページから抜き出しましょう。

必要条件はこれだけです。Framer Pro プラン、カスタムドメイン、Zapier シート、待機中の開発者は不要です。

Chatloom のダッシュボードで Create new agent をクリックします。名前を付け（会社名で十分です）、言語を選び（Chatloom は 95 以上の言語をサポートし、うち 10 言語でネイティブ応答を提供）、パーソナリティプリセット Support、Sales、Custom のいずれかを選びます。

Framer のマーケティングサイトでは、Sales がほぼ常に正しいデフォルトです。リードの資格付け、デモ予約への誘導、料金質問への自信ある回答向けに調整されており、コンタクトフォームに誘導するのではなく正面から答えます。

エージェントが作成されるとビルダーに到達します。まだ他には触らないでください――ブランディングはウィジェットが公開されてから設定します。今は埋め込みスニペットを取得するだけです：Install → Custom embed。両方のスクリプトタグをクリップボードにコピーします。

Framer でプロジェクトを開き、上部のギアアイコン（Site Settings）をクリックします。General → Custom Code までスクロールします。3 つのテキストエリアが表示されます。

• Start of head ― 早期に実行する必要のある検証タグ、プリロード、アナリティクスのスニペット用。
• End of body ― ページがレンダリングされた後に実行するスクリプト用。Chatloom はここに入ります。
• End of head ― CSS オーバーライドとメタタグ用。

ステップ 1 の 2 つのスクリプトタグを End of body フィールドに貼り付けます。保存します。次に右上の Publish をクリックします。Publish が完了してから 10 秒以内に、ウィジェットは公開 URL でライブになります。

公開されたサイトをシークレットウィンドウで開きます。右下に Chatloom のランチャーが見えるはずです。クリックするとチャットパネルが開きます。質問を入力します。おめでとうございます――Framer サイトに AI チャットボットが入りました。

ウィジェットは存在しますが、まだ製品について何も知りません。これはほとんどのガイドがスキップするステップです。

Chatloom に戻り、Knowledge base → Add source を開きます。4 つの選択肢があります。

• Crawl website ― Framer ドメインを貼り付けます。クローラーはサイトマップを走査し、各ページからレンダリング済みテキストを取得します。ほとんどの Framer サイトにとって正しい選択で、2 分未満で完了します。
• Upload files ― ピッチデッキ PDF、ワンページャー、料金シートをドロップします。
• Paste text ― まだサイトにない短い FAQ、料金詳細、「もし...の場合」の回答に対応します。
• Sitemap URL ― Framer サイトにパスワード保護があるか、インデックスされていないページをボットに知らせたい場合に使います。

典型的な Framer マーケティングサイトでは、Crawl + Paste text の組み合わせが勝ちパターンです。クロールはすでにサイトにあるすべてをカバーし、貼り付けフィールドはコピーに入らなかった機微をカバーします。

訓練をトリガーします。無料ティアでは約 60 秒です。ナレッジベースがクエリ可能になると、ダッシュボードは「Ready」と表示します。

これは、2019 年風のサポートバブルに見えるチャットボットと、Framer デザインにネイティブに感じられるチャットボットを分けるステップです。ビルダーで Widget セクションを開きます。

まず Launcher mode から始めます。Button は安全なデフォルト（右下に浮遊する円）ですが、ランディングページでは Fullscreen を試す価値があります――ビューポート全体が薄暗くなり、チャットが中央に立ち、ヒーロー CTA にとってはるかに強力なコンバージョンパターンになります。

次に Brand colors。Chatloom はプライマリ、アクセント、サーフェスを公開しています。Framer のパレットと一致させてください。右側には即座に更新されるライブプレビューがあります。

タイポグラフィ。 使用している Framer フォントの .woff2 をアップロードする（または Google Fonts ピッカーから選ぶ）と、チャット表面、サジェストチップ、ヘッダーが新しいフォントで再レンダリングされます。Retina ディスプレイでは、ウィジェットとネイティブ Framer コンポーネントの違いはわかりません。

コーナーの丸み。 Framer はほとんどのコンポーネントで 12px をデフォルトにしています。これに合わせるとウィジェットがデザインに溶け込みます。

ロゴとアバター。 透過 PNG をアップロードします。ランチャーボタンは PNG を尊重し、AI アバターは各ボットメッセージの隣に表示されます。

保存してシークレットウィンドウで Framer サイトを再度開きます。ウィジェットはデザインのネイティブな一部と区別がつかなくなります。

これで終わりと言う前に、最後の仕上げを 2 つ。

ウィジェットのスコープ設定。 Chatloom はデフォルトで Framer サイトのすべてのページに表示されます。料金ページから外したい場合（営業チームを代わりに見せたいエンタープライズディールではよくあります）、ウィジェットの Visibility rules を使用します：/pricing、/contact など任意のパターンに一致する URL を除外します。

挨拶を設定する。 ビルダーの Messages セクションに短いウェルカム行（「こんにちは ― Framer 統合、料金、始め方に関する質問に答えられます。今何に取り組んでいますか？」）と 3〜5 つのサジェストプロンプトを書きます。サジェストプロンプトはウィジェット全体で最も高いレバレッジのコンバージョン要素で、人々は入力するよりも頻繁にクリックします。

テスト。 シークレットウィンドウでサイトを開き、異なる入口ページから完全な会話を通し、ドキュメントにまだない質問を特に尋ねます。ボットが「わかりません」をどう扱うかを観察してください――ハルシネーションを起こした場合は、不足している回答をナレッジベースに追加して再テストします。ここで 5 分費やせば、1 週間分の悪い会話を予防できます。

これが完全なワークフローです。ほとんどの Framer 創業者はこのシーケンス全体を 15 分未満で完了し、その後埋め込みスクリプトに触ることはありません。