Korat这个按钮是什么
一个单文件脚本，贴到店铺网页上，它会在屏幕角落画一个浮动按钮（可以选左下或右下）——客人点击时，会在新标签页打开 https://koratland.com/m/<你的店铺 slug>，并且始终把当前网页的 URL 一起带过去（src 参数），好让店家知道客人是从哪一页找来的。
客人必须先登录 Korat 才能发消息——还没有账号，或者在那个浏览器里还没登录的人，会先看到登录页。这是正常的，也是有意这样设计的。客人看到登录页之后不想继续也没关系——系统不会强迫或诱导他往下走。
正因如此，按钮里还自带一个二维码（由 Korat 的服务器生成，不是这个脚本画的）：手机上已经装了 Korat 应用并保持登录的客人，扫一下就直接进到会话，不用在电脑上打任何字——在装了应用的安卓手机上，同一条链接会直接唤起应用。
它不是访客追踪工具
这个脚本在页面加载时不发出任何请求，不记录访问行为，不设置 cookie，也完全不读取访客的任何信息——唯一会发生的事是客人自己点了按钮之后，二维码面板才去 Korat 服务器取那张二维码图（一个请求、没有 cookie、除了 src 没有别的参数）。点“在 Korat 里打开聊天”时，浏览器只是打开一条普通链接去 koratland.com——按下按钮之前，后台什么都没在跑。
怎么开始——复制粘贴一行
把这段代码贴在 </body> 之前（其实放页面里哪儿都行），把 somtam-lardprao-42 换成你自己的店铺 slug（字母和数字，不是中文店名）——怎么找 slug 见下一节：
<script src="https://koratland.com/embed/korat-message.js"
data-korat="somtam-lardprao-42" defer></script>就这样——不用再装别的，没有依赖，也不会拖慢你的网站（单文件、体积小、用 defer 加载，不阻塞页面）。
去哪里找自己的店铺 slug
- 在 Korat 上打开自己的店铺主页
https://koratland.com/b/<slug>——地址栏 URL 里/b/后面那一段就是 slug。 - 聊天按钮和二维码用的是同一个 slug。
各个平台怎么贴
- Wix——Editor → 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/<slug> 里的 slug，用来生成聊天链接。 |
data-name | 同 data-korat | 二维码面板里显示的店名（纯文本，不影响 URL）。 |
data-position | br | br = 右下，bl = 左下。 |
data-label | 按语言的标准文案 | 按钮上的文字，可以自己写。 |
data-lang | th | th 或 en。 |
data-qr | 显示 | 写 data-qr="0" 隐藏二维码面板（只留打开聊天的链接）。 |
聊天 URL 和二维码图片 URL 里的 src，永远取自按钮所在页面的 location.href——脚本没有提供改成固定值的办法，因为那会让所有按钮看起来都来自同一页，正好违背这个功能的用意。
完整自定义示例：
<script src="https://koratland.com/embed/korat-message.js"
data-korat="somtam-lardprao-42"
data-name="Somtam Lardprao"
data-position="bl"
data-label="Chat with us"
data-lang="en"
defer></script>无障碍（Accessibility）
- 它是真正的按钮，可以用 Tab 键聚焦，并带
aria-label。 - 按 Esc 关闭二维码面板。
- 尊重用户设备上的“减少动态效果”设置（
prefers-reduced-motion）。 - 浅色和深色背景下对比度都够，并按新款手机的安全区域（safe-area）留出边距，不挡住屏幕底部的手势条。
为什么它对你的网站是安全的
- 界面用 Shadow DOM 绘制 ⇒ 你网站的 CSS 和按钮的 CSS 绝不会互相打架。
- 单文件，没有外部依赖，不额外加载字体或库。
- 重复加载多少次都不会画出重叠的按钮。
- 你在
data-*里填的值，显示前一律做转义处理。