# lovable, bolt, v0로 만든 사이트에 라이브 채팅 넣기

Lovable, Bolt, v0에 붙여넣을 프롬프트, 생성된 코드에서 채팅 스니펫이 들어가야 할 위치, 그리고 게시된 사이트에서 결과를 확인하는 방법을 정리했어요.

2026-10-28 · Kuba

사이트를 설명으로 만들었다면, 채팅도 같은 방식으로 넣으세요. 이 가이드에서는 Lovable, Bolt, v0용 프롬프트를 드리고, 생성된 코드에서 스니펫이 어디에 들어가야 하는지, 그리고 게시된 사이트에서 클릭 전에 아무것도 로드되지 않는지 확인하는 방법을 보여드려요.

## 이 도구들이 만드는 것

채팅창에서 보면 세 도구가 비슷해 보이지만, 만드는 프로젝트 종류가 달라서 script 태그 하나를 어디에 넣을지가 달라져요.

- **Lovable**은 Vite와 React 앱을 만들어요. 프로젝트 루트에 `index.html`이 있고, 모든 라우트가 이 페이지 안에 렌더링돼요.
- **Bolt**는 요청한 대로 만들어요. 대부분 `index.html`이 있는 Vite 앱이지만, Next.js나 Astro, 순수 HTML인 경우도 있어요(마지막 경우는 [순수 HTML 가이드](/ko/blog/live-chat-plain-html-site/)에서 다뤄요).
- **v0**는 App Router를 쓰는 Next.js를 만들어요. 공통 페이지는 `app/layout.tsx`예요.

채팅은 모든 페이지에 태그 하나가 필요해요. 싱글 페이지 앱이라면 `index.html`, Next.js라면 루트 레이아웃이에요. 다른 곳은 안 돼요.

## 시작하기 전에: 도메인

Spookat은 사이트를 도메인에 묶어요. 채팅은 그 도메인과 서브도메인에서만 연결되고, 그래서 아무도 여러분 스니펫을 자기 사이트에 복사해 쓸 수 없어요.

이런 도구에서는 이게 중요해요. 프로젝트가 여러 주소에 있기 때문이에요.

- 도구 안의 **미리보기**, 도구 자체 도메인 위
- 도구가 주는 **게시** 주소, 보통 도구의 서브도메인
- 연결했다면 여러분의 **커스텀 도메인**

사이트는 방문자가 실제로 쓸 주소로 등록하세요. 커스텀 도메인이라면 그걸 쓰면 되고, `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 컴포넌트, 자체 플로팅 버튼, 다섯 페이지에 붙여넣은 태그로 변할 수 있어요. Spookat에 필요한 건 한 곳에 태그 하나뿐이에요. 버튼은 런처가 알아서 그려요.

### 같은 프롬프트로 디자인까지

위젯 디자인은 Spookat 대시보드에서 정하고 런처 안에 담겨 오니까, 도구는 몰라도 돼요. 코드에 두고 싶다면 프롬프트에 두 번째 줄을 추가하세요.

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

스타일은 8가지예요. `accent`는 16진수 브랜드 색상이고, 그 위의 글자색은 대비에 맞춰 골라져요. 모든 키는 [문서](/ko/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은 자기 것을 가져와요

잘못됐다면 한 문장으로 말하세요. "Remove the chat code you added and put only the script tag in index.html." 지시가 구체적이면 이런 도구는 이런 수정을 잘해요.

## 게시한 다음 확인하기

사이트를 게시하고 게시된 주소를 시크릿 창에서 여세요. DevTools를 여세요.

1. **Network**에서 "Disable cache"를 체크하고 새로고침한 뒤 필터에 `spookat`을 입력하세요. 요청은 하나여야 해요. `cdn.spookat.com`에서 오는 런처, 약 2 kb예요. 코드가 `window.Spookat`에서 게시한 것과 다른 스타일을 지정하면 두 개이고, 둘 다 `cdn.spookat.com`에서 와요. `api.spookat.com`으로는 아무것도 가지 않아요.
2. **Application**의 쿠키와 local storage: Spookat 것은 없어요.
3. **런처를 클릭하세요.** 패널이 CDN에서 로드돼요. 테스트 메시지를 써 보세요. Slack이나 Discord가 연결돼 있으면 거기에 나타나요. 답장하고 위젯에 도착하는지 보세요.

런처가 아예 안 보인다면 태그가 게시된 빌드에 들어가지 않은 거예요. 코드 보기를 다시 확인하세요. 런처는 보이는데 채팅이 연결되지 않는다면, 대시보드의 도메인이 지금 보고 있는 주소와 맞지 않는 거예요.

[기본 가이드](/ko/blog/add-live-chat-to-your-website/)에서 이 확인 항목을 하나하나 더 자세히 설명해요.

## 답장을 연결하세요

채팅은 여러분이 이미 있는 곳으로 와야 해요. 대시보드에서 Slack이나 Discord를 연결하고 채널을 고르면, 방문자마다 스레드가 따로 생겨요. 자세한 내용은 [Slack 가이드](/ko/blog/answer-website-chat-from-slack/)와 [Discord 가이드](/ko/blog/answer-website-chat-from-discord/)에 있어요.

## 왜 도구에게 채팅을 만들게 하지 않을까

부탁할 수는 있어요. 도구는 몇 분 만에 입력칸이 있는 예쁜 패널을 만들어 줄 거예요. 그다음부터 질문이 시작돼요. 메시지는 어디로 가지, 누구에게 알림이 가지, 탭을 닫은 방문자에게 답장은 어떻게 전하지, 스팸은 어떻게 하지, 누가 계속 돌아가게 관리하지. 서버, 데이터베이스, Slack 연동, 이메일 발송 파이프라인이 필요하고, 그중 어느 것도 여러분이 만들던 제품이 아니에요.

Spookat은 태그 하나이고, starter 기준 사이트당 월 $4.99이며, 체험 기간은 카드 없이 14일이에요.

## claude code나 cursor를 쓴다면

프로젝트를 저장소로 내보내고, 코딩 에이전트가 Spookat MCP 서버로 작업하게 하세요. 위젯을 사이트 색상에 맞추고, 키를 복사하지 않아도 전부 설정해 줄 수 있어요. [Claude Code 가이드](/ko/blog/claude-code-live-chat/)에서 과정을 보여드려요.

## 생성된 사이트에 디자인 맞추기

이런 도구는 알아보기 쉬운 스타일을 만드는 경향이 있어요. 깔끔한 산세리프, 부드러운 그림자, 둥근 카드, 강조색 하나. 위젯은 다른 사이트에서 떼어 온 스티커가 아니라 원래 거기 있던 것처럼 보여야 해요.

- **스타일.** 흔한 생성 사이트 느낌이라면 `clean`이나 `soft`로 시작하세요. 더 어둡고 기술적인 사이트라면 `terminal`을, 과감하고 플랫한 느낌이라면 `brutal`이나 `swiss`를 써 보세요. 대시보드에서 바꿔 가며, 게시하기 전에 라이브 미리보기로 하나씩 볼 수 있어요.
- **강조색.** 버튼과 같은 16진수 값을 쓰세요. 도구는 보통 Tailwind 설정이나 CSS 변수에 그 값을 갖고 있으니 "what is the primary color's hex?"라고 물어보세요.
- **폰트.** `system`은 아무것도 다운로드하지 않고, 대부분의 생성 사이트와 충분히 잘 어울려요. 사이트가 특정 폰트를 쓰고 저희가 그 폰트를 호스팅한다면 고르세요. 클릭 후에만 로드돼요.
- **위치.** 도구가 오른쪽 아래에 자체 플로팅 버튼(맨 위로 가기 화살표, 쿠키 설정 아이콘)을 두었다면 런처는 왼쪽에 두세요.

## 방문자가 보는 것

구석에 여러분 색깔의 작은 버튼이 있어요. 클릭하기 전엔 아무 일도 일어나지 않아요. 클릭하면 인사말과 사람이 답한다는 안내 한 줄이 담긴 패널이 열려요. 방문자가 입력하면 메시지는 Slack이나 Discord 스레드, 또는 저희 인박스와 휴대폰 앱으로 가요. 답하기 전에 떠나더라도 이메일을 남길 수 있고, pro에서는 답장이 그 이메일로 따라가요. 언어를 지정하지 않으면 위젯은 방문자 브라우저의 언어(12개 중 하나)로 말해요.

## 도구가 다시 생성한 뒤에는

이런 도구는 파일을 다시 써요. 레이아웃을 크게 바꾸면("대시보드로 만들어 줘", "다크 모드로 바꿔 줘") `index.html`이나 루트 레이아웃에서 태그가 조용히 사라질 수 있어요. 크게 다시 생성한 뒤에는 게시된 사이트를 열어 런처가 아직 있는지 확인하세요. 사라졌다면 같은 프롬프트로 다시 넣으면 돼요.

## 프로젝트가 여러 개라면

이런 도구로는 두 번째, 세 번째 사이트도 쉽게 시작할 수 있어요. Spookat에서는 각각이 별도의 사이트로, 키, 도메인, 디자인, 채널이 따로라서 채팅이 엉뚱한 프로젝트 스레드로 가는 일이 없어요. 계정의 첫 사이트는 정가를 내고, 같은 계정에서 Spookat으로 결제하는 다른 사이트는 모든 요금제에서 30% 할인돼요. 같은 사람들이 답한다면 여러 사이트가 Slack이나 Discord 채널 하나를 함께 쓸 수도 있어요. 다만 카드에는 페이지 경로만 나오고, 어느 사이트에서 온 채팅인지는 나오지 않아요. 구분해야 한다면 사이트마다 채널을 따로 두세요.

## 체크리스트

- 방문자가 쓰는 주소로 사이트를 등록했다.
- `index.html`이나 루트 레이아웃에 `async` 태그 하나.
- 도구가 직접 만든 채팅 버튼이나 컴포넌트가 없다.
- 미리보기가 아니라 게시된 사이트에서 테스트했다.
- 클릭 전 요청 하나(코드에서 게시하지 않은 스타일을 지정했다면 두 개, 둘 다 `cdn.spookat.com`에서), 쿠키 없음.
- Slack이나 Discord를 연결했다.

설명하고, 게시하고, 확인하세요. 그리고 첫 질문에 스레드에서 답하세요.

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