サイトにチャットボタン設置無料 1行のコードで完了

このボタンは何か

店舗のウェブページに貼るだけの単一のスクリプトで、画面の隅（左下か右下を選べます）に浮かぶボタンを描きます。お客さまが押すと、新しいタブで https://koratland.com/m/<店舗のスラッグ> が開き、現在のページの URL が必ず一緒に渡されます（src パラメーター）。お客さまがどのページから話しかけてきたのかを店舗が分かるようにするためです。

お客さまがメッセージを送るには、必ず Korat にログインしている必要があります。アカウントがない、またはそのブラウザーでログインしていない場合は、先にログイン画面が表示されます。これは通常の動作で、意図してそうしています。お客さまがログイン画面を見てそこで止めても構いません。システムは無理に進ませたり、うまく誘導しようとしたりはしません。

そのため、ボタンにはQRコードも付いています（このスクリプトではなく、Korat のサーバー自身が描きます）。すでにスマートフォンに Korat アプリを入れていて（ログイン済みで）いるお客さまは、読み取るだけでパソコンで何も入力せずにチャットルームへ入れます。アプリを入れた Android のスマートフォンでは、同じリンクがアプリを直接開きます。

訪問者を追跡するツール（トラッカー）ではありません

このスクリプトはページの読み込み時にいっさいリクエストを送りません。閲覧の行動を記録せず、クッキーも設定せず、訪問者について何も読み取りません。起きることは1つだけで、お客さまが自分でボタンを押したときにはじめて、QRのパネルが Korat のサーバーから QR 画像を読み込みます（リクエスト1件、クッキーなし、src 以外のクエリーなし）。そして「Korat でチャットを開く」のリンクを押すと、ブラウザーが koratland.com への普通のリンクを1つ開きます。ボタンを押す前に、裏側で動いているものは何もありません。

始め方——1行をコピーして貼る

次のコードを </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>

ボタンは本物のボタンで、Tab キーで到達でき、aria-label が付いています
Esc キーで QR パネルを閉じられます
利用者の端末の「視差効果を減らす」設定（prefers-reduced-motion）を尊重します
明るい背景でも暗い背景でも十分なコントラストがあり、最近のスマートフォンのセーフエリアに合わせて画面の端から余白を取るため、画面下のジェスチャーバーを覆いません

店舗のサイトにとって安全である理由

UI を Shadow DOM で描くため、店舗サイトの CSS とボタンの CSS が衝突することはありません
単一ファイルで外部の依存関係がなく、フォントやライブラリを追加で読み込みません
何度読み込んでも、ボタンが重なって描かれることはありません
data-* に入力した値は、表示する前に必ずエスケープされます

店舗のウェブサイトにチャットボタンを設置する