KoratWhat this button does
A single script you drop into your page draws a floating button in a corner of the screen (bottom-right or bottom-left, your choice). When a customer taps it, a new tab opens to https://koratland.com/m/<your shop's slug>, carrying the current page's URL along as a src parameter every time, so your shop can see which page a customer messaged you from.
The customer always has to sign in to Korat first. If they don't have an account yet, or aren't signed in on that browser, they'll land on a sign-in screen — that's expected and intentional. If a visitor hits the sign-in screen and doesn't go any further, that's fine; nothing here tries to force or trick them into continuing.
That's exactly why the button also carries a QR code (rendered by Korat's own server, not by this script): a customer who already has the Korat app on their phone (and is signed in there) can scan it and land straight in the chat, without typing anything on the computer — and on Android with the app installed, the same link opens the app directly.
Not a tracker
This script makes no request at all when the page loads. It doesn't collect visitor behaviour, doesn't set a cookie, and doesn't read anything about the visitor. The only thing that ever happens is: when the customer presses the button themselves, the QR panel then loads its QR image from Korat's server (one request, no cookie, no query parameter beyond src), and pressing "Open chat on Korat" opens one ordinary link to koratland.com. Nothing runs in the background before the button is pressed.
Getting started — copy one line
Paste this before the closing </body> tag (or anywhere on the page), replacing somtam-lardprao-42 with your shop's slug (letters/numbers, not your shop's display name) — see the next section for where to find it:
<script src="https://koratland.com/embed/korat-message.js"
data-korat="somtam-lardprao-42" defer></script>That's it — nothing else to install, no dependency, no impact on your site's speed (a single small file, loaded with defer so it never blocks page rendering).
Where to find your shop's slug
- Open your shop's page on Korat at
https://koratland.com/b/<slug>— the slug is whatever comes after/b/in that address bar - The same slug is used for both the chat button and the QR code
Adding it on each platform
- Wix — Editor → Add → Embed Code → Custom Embeds → HTML iframe → paste the code above
- Webflow — Add panel → Embed → Embed an HTML Code → paste the code → Publish
- Shopify — Online Store → Themes → Edit code → open
theme.liquid→ paste the code before</body> - WordPress — if your site runs WordPress, use the dedicated Korat plugin instead (see the docs hub), which has an admin settings screen and needs no code editing — this script still works fine there too if you'd rather paste it yourself
- Hand-coded / agency-built sites — paste the
<script>tag directly into your HTML before the closing</body>
Customisation options (data-*)
| Attribute | Default | Meaning |
|---|---|---|
data-korat | — | Required. The /b/<slug> slug for your shop page, used to build the chat link |
data-name | same as data-korat | Shop name shown in the QR panel (display text only, does not affect the URL) |
data-position | br | br = bottom-right, bl = bottom-left |
data-label | a standard label per language | Custom button text |
data-lang | th | th or en |
data-qr | shown | Set data-qr="0" to hide the QR panel (keeps just the "open chat" link) |
The src value on both the chat URL and the QR image URL always comes from location.href of the page the button is embedded on — there is no option to hardcode it instead, because that would make every button look like it came from the same page, which defeats the point of the feature.
Full customisation example:
<script src="https://koratland.com/embed/korat-message.js"
data-korat="somtam-lardprao-42"
data-name="My Shop"
data-position="bl"
data-label="Chat with us"
data-lang="en"
defer></script>Accessibility
- The button is a real, keyboard-focusable element with an
aria-label - Esc closes the QR panel
- Respects the device's "reduce motion" setting (
prefers-reduced-motion) - Contrast holds up in both light and dark backgrounds, and it keeps clear of modern phones' safe-area / gesture bar
Why it's safe to add to your site
- UI is rendered inside a Shadow DOM — your site's CSS and the button's CSS can never collide
- One file, no external dependency, no extra fonts or libraries loaded
- Loading it more than once never draws a duplicate button
- Anything you put in
data-*is always escaped before it's rendered