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

Lovable、Bolt、v0に貼るプロンプト、生成されたコードのどこにチャットのスニペットを置くべきか、公開したサイトでの確認方法をまとめました。

2026-10-28 · Kuba

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

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

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

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

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

## 始める前に:ドメイン

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

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

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

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

## プロンプト

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

```text
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行目を足します。

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

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

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

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

```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}`の後にタグが入ります。

```tsx
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を開きます。

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

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

[基本ガイド](/ja/blog/add-live-chat-to-your-website/)で、これらの確認をそれぞれ詳しく説明しています。

## 返信先をつなぐ

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

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

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

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

## claude codeやcursorを使う場合

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

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

こうしたツールは、見覚えのあるスタイルを作りがちです。すっきりしたサンセリフ、柔らかい影、角の丸いカード、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を接続した。

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

---
source: https://spookat.com/ja/blog/live-chat-lovable-bolt-v0/