스크립트 설치
설치는 페이지 head의 스크립트 태그 한 줄입니다. 비동기로 로드되어 화면 표시를 막지 않고, 방문자의 기기에 아무것도 저장하지 않습니다.
스크립트 태그
연동 화면에서 태그를 복사합니다. 태그에는 공개 키가 들어 있습니다. 공개되어도 되는 키이며 내 도메인에서만 동작합니다.
<script async src="https://…/l.js" data-loop="pk_live_…"></script>플랫폼별 넣는 위치
| 플랫폼 | 위치 |
|---|---|
| 워드프레스 | 외모 → 테마 파일 편집기 → header.php, 또는 헤더 스크립트 플러그인 |
| Ghost | 설정 → Code injection → Site header |
| 티스토리 | 스킨 편집 → HTML → <head> 안 |
| Webflow | 사이트 설정 → Custom code → Head code |
| Squarespace | 설정 → 고급 → Code Injection → Header |
| Wix | 설정 → Custom code → Head |
| Shopify | 온라인 스토어 → 테마 → 코드 편집 → theme.liquid |
AI로 설치
연동 → AI로 설치에서 Claude Code, Cursor, Codex용 지시문을 받습니다. 추가할 태그, 프레임워크에서의 위치, 건드리면 안 되는 것, 확인 방법이 정확히 적혀 있습니다. 검토를 마친 고정 문장으로 조립되며 공개 키만 들어 있습니다.
React와 Next.js
스크립트와 슬롯을 감싼 컴포넌트가 SDK 패키지에 있습니다. 패키지는 아직 npm에 올라가 있지 않으므로 대부분은 스크립트 태그를 쓰는 것이 좋습니다. Next.js App Router에서는 app/layout.tsx에 넣거나 next/script에 같은 속성을 주면 됩니다.
Content-Security-Policy
사이트가 Content-Security-Policy 헤더를 보낸다면, 스크립트의 출처를 script-src와 connect-src 양쪽에 허용해 주세요.
인증이 이루어지는 방식
올릴 파일도, 넣을 DNS 레코드도 없습니다. 내 도메인의 페이지에서 스크립트가 저희를 호출하는 것이 곧 사이트를 통제한다는 증거입니다. 가장 먼저 그렇게 한 계정이 그 도메인을 갖습니다. 그 전에는 누구든 인증되지 않은 초안을 가질 수 있고, 인증되지 않은 사이트는 교환에 참여하지 않습니다.
자주 묻는 질문
- 스크립트 크기는 얼마인가요?
- 압축 기준 3KB 미만입니다.
- 쿠키를 심나요?
- 아니요. 쿠키, localStorage를 포함해 방문자 기기의 어떤 저장소에도 쓰지 않습니다.
- 태그 매니저로 넣어도 되나요?
- 네, data-loop 속성만 유지되면 됩니다. head에 직접 넣으면 인증이 더 빨리 됩니다.