lovable、bolt、v0で作ったサイトにライブチャットを入れる

2026年10月28日 · 著者: kuba · 10分で読めます

サイトを言葉で説明して作ったなら、チャットも同じやり方で追加しましょう。このガイドでは、Lovable、Bolt、v0向けのプロンプトを紹介し、生成されたコードのどこにスニペットが入るべきか、そして公開したサイトでクリック前に何も読み込まれないことをどう確認するかを説明します。

これらのツールが生成するもの

チャット欄から見ると3つのツールは似ていますが、書き出すプロジェクトの種類が違い、それによってscriptタグを置く場所が決まります。

LovableはViteとReactのアプリを生成します。プロジェクトのルートにindex.htmlがあり、すべてのルートはこのページの中に描画されます。
Boltは頼んだものを生成します。ほとんどはindex.htmlを持つViteアプリですが、Next.jsやAstro、素のHTMLのこともあります(最後のケースは素のHTMLのガイドで説明しています)。
v0はApp RouterのNext.jsを生成します。共通のページはapp/layout.tsxです。

チャットに必要なのは、全ページに1つのタグです。シングルページアプリならindex.html、Next.jsならルートレイアウト。それ以外の場所には置きません。

始める前に:ドメイン

Spookatはサイトをドメインに結びつけます。チャットはそのドメインとサブドメインからしか接続しません。誰もあなたのスニペットを自分のサイトにコピーして使えない理由の1つです。

こうしたツールでは、これが大事になります。プロジェクトが複数のアドレスに存在するからです。

ツール内のプレビュー(ツール自身のドメイン上)
ツールが発行する公開アドレス(たいていはツールのサブドメイン)
接続していれば、あなたの独自ドメイン

サイトは、訪問者が実際に使うアドレスで登録してください。独自ドメインならそれを使います。wwwなどのサブドメインも含まれます。ツールのサブドメインで公開するなら、ツールのメインドメインではなく、そのサブドメインを丸ごと登録してください。ツールのプレビューではランチャーは表示されますが、チャットは接続しません。テストは公開したサイトで行います。

プロンプト

まずサイトキーが必要です。Spookatのダッシュボードで正しいドメインのサイトを追加すると、インストールページにスニペットが表示されます。次に、YOUR_SITE_KEYを自分のキーに置き換えて、これをツールのチャットに貼り付けます。

Add this live chat script to every page of the site. It must be exactly one tag, loaded once, right before the closing </body> tag of the shared HTML (index.html in a Vite app, the root layout in Next.js). Keep the async attribute. Do not wrap it in a React component, do not add it to individual pages, do not preload anything.

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

このプロンプトがここまで具体的なのはわざとです。こうしたツールは気を利かせがちで、「チャットウィジェットを追加して」が新しいReactコンポーネントや独自の浮いたボタン、5ページに貼られたタグになってしまうことがあります。Spookatに必要なのは、1か所に1つのタグだけです。ボタンはランチャーが自分で描きます。

同じプロンプトでデザインも

ウィジェットのデザインはSpookatのダッシュボードで設定し、ランチャーの中に含まれるので、ツール側が知っておく必要はありません。コードで管理したい場合は、プロンプトに2行目を足します。

Above that script, add: <script>window.Spookat = { style: "clean", accent: "#2F6FEB", side: "right" };</script>

スタイルは8種類あります。accentはブランドカラーの16進数で、その上の文字色はコントラストに応じて選ばれます。すべてのキーはドキュメントに載っています。

最終的に置かれるべき場所

コードビューを開いて確認してください。Viteアプリ(Lovable、ほとんどのBoltプロジェクト)なら、index.htmlの最後はこうなっているはずです。

    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
  </body>
</html>

Next.js(v0、一部のBoltプロジェクト)では、app/layout.tsxの<body>内、{children}の後にタグが入ります。

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
      </body>
    </html>
  );
}

ツールが代わりにnext/scriptを使っていても、strategy="afterInteractive"か"lazyOnload"なら問題ありません。見たくないのは次のようなものです。

Home.tsxやapp/page.tsxのようなページコンポーネント内のタグ。チャットがそのページにしか出なくなります
scriptの要素を作るuseEffect。動きはしますが、同じタグのためにコードが増えるだけです
ツールが自分で描いたチャットのボタンやパネル。削除してください。Spookatには自前のものがあります

うまくいかなかったら、1文で伝えます。“Remove the chat code you added and put only the script tag in index.html.” 指示が具体的なら、こうしたツールはこの手の修正が得意です。

公開してから確認する

サイトを公開し、公開アドレスをプライベートウィンドウで開きます。DevToolsを開きます。

Networkで「Disable cache」にチェックを入れ、再読み込みして、フィルターにspookatと入力します。リクエストは1件のはずです。cdn.spookat.comからのランチャーで、約2 kbです。コードのwindow.Spookatで公開したものと違うスタイルを指定している場合は2件で、どちらもcdn.spookat.comからです。api.spookat.comには何も送られません。
ApplicationのCookieとLocal storage:Spookatのものは何もありません。
ランチャーをクリック。 パネルがCDNから読み込まれます。テストメッセージを書いてください。SlackかDiscordを接続していればそこに届くので、返信してウィジェットに届くのを確かめます。

ランチャーがまったく表示されないなら、タグが公開ビルドに入っていません。コードビューをもう一度確認してください。ランチャーは出るのにチャットが接続しないなら、ダッシュボードのドメインが今開いているアドレスと一致していません。

基本ガイドで、これらの確認をそれぞれ詳しく説明しています。

返信先をつなぐ

チャットは、あなたがいつもいる場所に届くべきです。ダッシュボードでSlackかDiscordを接続してチャンネルを選べば、訪問者ごとにスレッドができます。詳しくはSlackのガイドとDiscordのガイドをご覧ください。

なぜツールにチャットを作らせないのか

頼むこともできます。ツールは数分で、入力欄付きのきれいなパネルを作るでしょう。そこから疑問が始まります。メッセージはどこに届くのか、誰に通知するのか、タブを閉じた訪問者に返信をどう届けるのか、スパムはどうするのか、誰が動かし続けるのか。必要なのはサーバー、データベース、Slack連携、メール配信の仕組みで、どれもあなたが作っていたプロダクトではありません。

Spookatはタグ1つで、starterなら1サイトあたり月$4.99、トライアルはカード不要の14日間です。

claude codeやcursorを使う場合

プロジェクトをリポジトリにエクスポートし、コーディングエージェントにSpookatのMCPサーバーで作業させてください。サイトの色に合わせたウィジェットの調整も、キーをコピーすることなく設定もしてくれます。Claude Codeのガイドで手順を説明しています。

生成されたサイトにデザインを合わせる

こうしたツールは、見覚えのあるスタイルを作りがちです。すっきりしたサンセリフ、柔らかい影、角の丸いカード、1色のアクセント。ウィジェットは、よそのサイトから貼ったステッカーではなく、そこに元からあったように見えるべきです。

スタイル。 よくある生成サイトの見た目なら、cleanかsoftから始めましょう。暗めで技術寄りのサイトならterminalを。はっきりしたフラットな見た目ならbrutalかswissです。ダッシュボードで切り替えれば、公開前にライブプレビューでそれぞれを確認できます。
アクセント。 ボタンと同じ16進数を使ってください。ツールはたいていTailwindの設定かCSS変数に持っているので、“what is the primary color’s hex?“と聞いてみましょう。
フォント。 systemは何もダウンロードせず、たいていの生成サイトとなじみます。サイトが特定のフォントを使っていて、それを私たちがホストしているなら選んでください。クリック後にだけ読み込まれます。
位置。 ツールが右下に独自の浮いたボタン(トップへ戻る矢印、Cookie設定のアイコンなど)を置いているなら、ランチャーは左にしましょう。

訪問者に見えるもの

角にあなたの色の小さなボタンがあります。クリックするまでは何も起きません。クリックすると、あいさつ文と、人間が返信することを伝える1行が入ったパネルが開きます。訪問者が入力すると、メッセージはSlackかDiscordのスレッド、または当社のインボックスとスマホアプリに届きます。返信前に離れても、メールアドレスを残すことができ、proなら返信がそこに届きます。言語を指定しない限り、ウィジェットは訪問者のブラウザの言語(12言語のいずれか)で表示されます。

ツールが再生成したあと

こうしたツールはファイルを書き換えます。レイアウトの大きな変更(「ダッシュボードにして」「ダークモードに切り替えて」)で、index.htmlやルートレイアウトからタグが黙って消えることがあります。大きく再生成したあとは、公開サイトを開いてランチャーが残っているか確認してください。消えていたら、同じプロンプトで戻せます。

複数のプロジェクト

こうしたツールなら、2つ目、3つ目のサイトも気軽に始められます。Spookatではそれぞれが独立したサイトで、キー、ドメイン、デザイン、チャンネルがそれぞれ別なので、チャットが別プロジェクトのスレッドに紛れ込むことはありません。アカウントの最初のサイトは通常料金で、同じアカウントでSpookat経由で払う2つ目以降のサイトは、どのプランでも30%引きです。同じ人たちが返信するなら、複数のサイトで1つのSlackやDiscordのチャンネルを共有することもできます。ただしカードに表示されるのはページのパスだけで、どのサイトから来たチャットかは表示されません。見分ける必要があるなら、サイトごとにチャンネルを分けてください。

チェックリスト

訪問者が使うアドレスでサイトを登録した。
index.htmlかルートレイアウトに、async付きのタグが1つ。
ツールが自作したチャットのボタンやコンポーネントがない。
プレビューではなく、公開したサイトでテストした。
クリック前のリクエストは1件(公開していないスタイルをコードで指定している場合は2件、どちらもcdn.spookat.comから)、Cookieなし。
SlackかDiscordを接続した。

説明して、公開して、確認する。そして最初の質問に、スレッドから答えましょう。