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-*裡填的值，顯示前一律做轉義處理。