Bouton de chat gratuit pour site web : une ligne de code

Ce qu’est ce bouton

Un script d’un seul fichier, à coller dans les pages de votre site, qui dessine un bouton flottant dans un coin de l’écran (en bas à gauche ou en bas à droite, au choix) — quand le client le touche, la page https://koratland.com/m/<le-slug-de-votre-commerce> s’ouvre dans un nouvel onglet, en emportant toujours l’URL de la page en cours (paramètre src), pour que le commerce sache depuis quelle page le client a écrit.

Le client doit toujours être connecté à Korat pour pouvoir écrire — s’il n’a pas de compte ou n’est pas connecté dans ce navigateur, il verra d’abord la page de connexion : c’est normal et voulu. Et s’il s’arrête là, tant pis — rien n’est fait pour le forcer ni l’appâter.

C’est aussi pour cela que le bouton embarque un QR code (dessiné par le serveur de Korat, pas par ce script) : un client qui a déjà l’app Korat sur son téléphone (et y reste connecté) le scanne et entre directement dans la conversation, sans rien taper sur son ordinateur — et sur un Android où l’app est installée, ce même lien ouvre l’app directement.

Ce n’est pas un outil de suivi des visiteurs (pas un tracker)

Ce script n’émet aucune requête au chargement de la page : il n’enregistre aucun comportement de navigation, ne pose aucun cookie et ne lit rien sur le visiteur — la seule chose qui se produit, c’est que lorsque le client touche le bouton lui-même, le panneau QR charge alors l’image du QR depuis le serveur Korat (une seule requête, sans cookie, sans autre paramètre que src) ; et s’il suit le lien « Ouvrir la conversation dans Korat », le navigateur ouvre un lien ordinaire vers koratland.com. Rien ne tourne en arrière-plan avant l’appui sur le bouton.

Par où commencer — une ligne à copier-coller

Collez ce code juste avant la fermeture de </body> (ou n’importe où dans la page), en remplaçant somtam-lardprao-42 par le slug de votre commerce (lettres et chiffres, pas le nom en toutes lettres) — la section suivante explique où le trouver :

<script src="https://koratland.com/embed/korat-message.js"
        data-korat="somtam-lardprao-42" defer></script>

C’est tout — rien d’autre à installer, aucune dépendance, aucun effet sur la vitesse de votre site (un seul fichier, très léger, chargé en defer : il ne bloque pas l’affichage).

Où trouver le slug de votre commerce

Ouvrez la page de votre commerce sur Korat, à l’adresse https://koratland.com/b/<slug> — le slug est précisément ce qui suit /b/ dans la barre d’adresse
Ce même slug sert au bouton de chat comme au QR

Comment le coller selon la plateforme

Wix — Éditeur → Ajouter un élément (Add) → Embed Code → Custom Embeds → HTML iframe → collez le code ci-dessus
Webflow — panneau Add → Embed → Embed an HTML Code → collez le code → Publish
Shopify — Online Store → Themes → Edit code → ouvrez theme.liquid → collez le code avant </body>
WordPress — si votre site tourne sous WordPress, utilisez plutôt l’extension Korat dédiée (voir la documentation), qui offre un écran de réglage dans l’administration, sans toucher au code — le script de cette page fonctionne tout aussi bien si vous préférez le coller vous-même
Site écrit à la main ou par un prestataire — placez la balise <script> directement dans le fichier HTML, avant la fermeture de </body>

Options de personnalisation (data-*)

Attribut	Valeur par défaut	Signification
`data-korat`	—	Obligatoire : le slug de la page du commerce `/b/<slug>`, qui sert à construire le lien de conversation
`data-name`	identique à `data-korat`	Le nom du commerce affiché dans le panneau QR (texte simple, sans effet sur l’URL)
`data-position`	`br`	`br` = en bas à droite, `bl` = en bas à gauche
`data-label`	texte standard selon la langue	Le texte du bouton, libre
`data-lang`	`th`	`th` ou `en`
`data-qr`	affiché	Mettez `data-qr="0"` pour masquer le panneau QR (il ne reste que le lien vers la conversation)

Le src présent dans l’URL de conversation et dans celle de l’image QR vient toujours du location.href de la page où le bouton est installé — le script ne permet pas de le fixer à une valeur constante, sinon tous les boutons sembleraient venir de la même page, ce qui irait contre l’objectif même de cette fonction.

Exemple complet avec personnalisation :

<script src="https://koratland.com/embed/korat-message.js"
        data-korat="somtam-lardprao-42"
        data-name="Som Tam Lardprao"
        data-position="bl"
        data-label="Écrivez-nous"
        data-lang="en"
        defer></script>

Le bouton est un vrai bouton, atteignable à la touche Tab, et porte un aria-label
La touche Échap ferme le panneau QR
Le réglage « réduire les animations » de l’appareil (prefers-reduced-motion) est respecté
Le contraste est suffisant sur fond clair comme sur fond sombre, et l’écart avec le bord de l’écran suit la zone de sécurité (safe-area) des téléphones récents : la barre de gestes du bas n’est jamais masquée

Pourquoi c’est sans risque pour votre site

L’interface est dessinée dans un Shadow DOM ⇒ le CSS de votre site et celui du bouton ne peuvent pas entrer en conflit
Un seul fichier, aucune dépendance externe, aucune police ni bibliothèque supplémentaire chargée
Chargé plusieurs fois, il ne dessine jamais deux boutons superposés
Les valeurs que vous mettez dans les data-* sont toujours échappées avant affichage

Installer le bouton de chat sur votre site