Korat이 버튼은 무엇인가
가게 웹페이지에 붙이는 스크립트 파일 하나이며, 화면 모서리에 플로팅 버튼을 그립니다(왼쪽 아래와 오른쪽 아래 중에서 고를 수 있습니다) — 손님이 누르면 새 탭에서 https://koratland.com/m/<가게 슬러그>가 열리고, 지금 보고 있던 웹페이지의 URL이 언제나 함께 실려 갑니다(src 파라미터). 손님이 어느 페이지에서 말을 걸었는지 가게가 알 수 있게 하기 위해서입니다.
손님은 언제나 Korat에 로그인해야 말을 걸 수 있습니다 — 손님에게 계정이 없거나 그 브라우저에서 로그인하지 않았다면 먼저 로그인 화면을 만납니다. 이는 정상이고 일부러 그렇게 만든 것입니다. 손님이 로그인 화면을 보고 그만두어도 괜찮습니다 — 시스템은 계속하도록 몰아붙이거나 꾀지 않습니다.
그래서 버튼에는 QR 코드도 함께 들어 있습니다(이 스크립트가 아니라 Korat 서버가 그립니다): 휴대폰에 Korat 앱이 이미 있고 로그인해 둔 손님은 스캔만 하면 컴퓨터에서 아무것도 입력하지 않고 곧바로 채팅방에 들어갑니다 — 앱이 깔린 안드로이드 휴대폰에서는 같은 링크가 앱을 바로 엽니다.
방문자 추적 도구가 아닙니다(트래커가 아닙니다)
이 스크립트는 페이지가 열릴 때 어떤 요청도 보내지 않습니다. 방문 행동을 모으지 않고, 쿠키를 두지 않고, 방문자에 대해 아무것도 읽지 않습니다 — 일어나는 일은 오직 손님이 스스로 버튼을 눌렀을 때, 그제서야 QR 패널이 Korat 서버에서 QR 이미지를 불러오는 것뿐입니다(요청 하나, 쿠키 없음, src 말고 다른 쿼리 없음). 그리고 "Korat에서 채팅 열기" 링크를 누르면 브라우저가 koratland.com으로 가는 평범한 링크 하나를 엽니다 — 버튼을 누르기 전에는 뒤에서 도는 것이 아무것도 없습니다
어떻게 시작하나 — 한 줄 복사해 붙이기
이 코드를 </body>를 닫기 전에(또는 페이지 어디에든) 붙이고, somtam-lardprao-42를 여러분 가게의 슬러그로 바꾸세요(가게 이름이 아니라 영문·숫자입니다) — 슬러그를 찾는 법은 다음 항목에 있습니다.
<script src="https://koratland.com/embed/korat-message.js"
data-korat="somtam-lardprao-42" defer></script>이것으로 끝입니다 — 더 설치할 것도, 의존성도 없고, 가게 웹사이트 속도에 영향을 주지 않습니다(파일 하나, 작은 용량, defer로 불러와 페이지를 막지 않습니다).
가게 슬러그는 어디서 찾나
- Korat에서 여러분 가게 페이지
https://koratland.com/b/<슬러그>를 여세요 — 슬러그는 주소창 URL의/b/뒤에 오는 그 부분입니다 - 이 같은 슬러그를 채팅 버튼과 QR 양쪽에 씁니다
플랫폼마다 붙이는 법
- Wix — 에디터 → 요소 추가(Add) → Embed Code → Custom Embeds → HTML iframe → 위 코드를 붙여 넣기
- Webflow — Add panel → Embed → Embed an HTML Code → 코드 붙여 넣기 → Publish
- Shopify — Online Store → Themes → Edit code →
theme.liquid파일을 열고 →</body>앞에 코드 붙여 넣기 - WordPress — 웹사이트가 WordPress라면 전용 Korat 플러그인을 대신 쓰세요(문서 모음 참고). 관리자 메뉴에 설정 도우미가 있어 코드를 직접 고칠 필요가 없습니다 — 직접 붙이고 싶다면 이 화면의 스크립트도 똑같이 씁니다
- 직접 짠 / 맡겨 짠 웹사이트 —
<script>태그를 HTML 파일의</body>닫기 전에 그대로 두세요
사용자 설정 항목 (data-*)
| 속성 | 기본값 | 뜻 |
|---|---|---|
data-korat | — | 필수. 채팅 링크를 만드는 데 쓰는 가게 페이지 /b/<슬러그>의 슬러그 |
data-name | data-korat와 같음 | QR 패널에 보이는 가게 이름(글자일 뿐이며 URL에 영향을 주지 않습니다) |
data-position | br | br = 오른쪽 아래, bl = 왼쪽 아래 |
data-label | 언어에 따른 표준 문구 | 버튼에 적히는 글이며 직접 쓸 수 있습니다 |
data-lang | th | th 또는 en |
data-qr | 표시함 | data-qr="0"을 넣으면 QR 패널을 감춥니다(채팅 열기 링크만 남습니다) |
채팅 URL과 QR 이미지 URL의 src는 언제나 버튼이 심긴 페이지의 location.href에서 옵니다 — 스크립트에는 이를 고정 값으로 바꾸는 방법이 없습니다. 그렇게 하면 모든 버튼이 같은 페이지에서 온 것처럼 보여, 이 기능의 목적과 어긋나기 때문입니다.
모든 항목을 쓴 예:
<script src="https://koratland.com/embed/korat-message.js"
data-korat="somtam-lardprao-42"
data-name="쏨땀 랏프라오"
data-position="bl"
data-label="채팅하기"
data-lang="th"
defer></script>접근성 (Accessibility)
- 버튼은 Tab으로 닿을 수 있는 진짜 버튼이며
aria-label이 붙어 있습니다 - Esc를 누르면 QR 패널이 닫힙니다
- 사용자 기기의 "동작 줄이기"(
prefers-reduced-motion) 설정을 존중합니다 - 밝은 배경과 어두운 배경 모두에서 대비가 충분하고, 요즘 휴대폰의 안전 영역(safe-area)만큼 화면 가장자리에서 띄워 아래쪽 제스처 바를 가리지 않습니다
가게 웹사이트에 안전한 이유
- UI를 Shadow DOM으로 그립니다 ⇒ 가게 웹사이트의 CSS와 버튼의 CSS가 절대 충돌하지 않습니다
- 파일 하나이며 외부 의존성이 없고, 폰트나 라이브러리를 더 불러오지 않습니다
- 몇 번을 다시 불러와도 버튼이 겹쳐 그려지지 않습니다
data-*에 넣은 값은 화면에 보이기 전에 언제나 이스케이프됩니다