KoratQué es este botón
Un script de un solo archivo que pegas en tu página y que dibuja un botón flotante en una esquina de la pantalla (puedes elegir abajo a la izquierda o abajo a la derecha) — cuando el cliente lo pulsa, se abre https://koratland.com/m/<tu-slug> en una pestaña nueva, siempre con la URL de la página actual adjunta (el parámetro src), para que el negocio vea desde qué página te escribieron.
El cliente siempre tiene que iniciar sesión en Korat antes de poder escribir — si todavía no tiene cuenta o no inició sesión en ese navegador, verá primero la pantalla de acceso. Eso es normal y está hecho a propósito. Si el cliente ve la pantalla de acceso y no sigue, no pasa nada — el sistema no intenta forzarlo ni engancharlo para que continúe.
Por eso el botón trae además un QR code integrado (lo dibuja el propio servidor de Korat, no este script): el cliente que ya tiene la app de Korat en el celular (y la sesión abierta) lo escanea y entra a la conversación al instante, sin escribir nada en la computadora — y en un Android con la app instalada, ese mismo enlace abre la app directamente.
No es una herramienta de seguimiento de visitantes (no es un tracker)
Este script no hace ninguna petición al cargar la página: no guarda el comportamiento de navegación, no pone cookies y no lee nada del visitante. Lo único que ocurre es quecuando el cliente pulsa el botón, apenas entonces el panel del QR carga la imagen desde el servidor de Korat (una sola petición, sin cookies, sin más parámetros que src), y si pulsa el enlace de abrir el chat, el navegador abre un enlace normal hacia koratland.com — antes de pulsar el botón no hay nada corriendo por detrás.
Cómo empezar — copiar y pegar 1 línea
Pega este código antes de cerrar </body> (o donde sea de la página) y cambia taqueria-el-sol-42 porel slug de tu negocio (letras y números, no el nombre del negocio con acentos ni espacios) — cómo encontrar tu slug, en la siguiente sección:
<script src="https://koratland.com/embed/korat-message.js"
data-korat="taqueria-el-sol-42" defer></script>Con eso ya está — no hay que instalar nada más, no tiene dependencias y no afecta la velocidad de tu sitio (un solo archivo, pequeño, cargado con defer, sin bloquear la página).
Dónde encuentro el slug de mi negocio
- Abre la página de tu negocio en Korat, en
https://koratland.com/b/<slug>— el slug es justamente la parte que va después de/b/en la URL de la barra de direcciones - Ese mismo slug sirve tanto para el botón de chat como para el QR
Cómo pegarlo en cada plataforma
- Wix — Editor → Add → Embed Code → Custom Embeds → HTML iframe → pega el código de arriba
- Webflow — Add panel → Embed → Embed an HTML Code → pega el código → Publish
- Shopify — Online Store → Themes → Edit code → abre el archivo
theme.liquid→ pega el código antes de</body> - WordPress — si tu sitio es WordPress, usa mejor el plugin de Korat (lo encuentras en la documentación), que trae un asistente de configuración en el menú de administración y no exige tocar código — aunque el script de esta página también funciona si prefieres pegarlo tú
- Sitio hecho a mano o por encargo — pon la etiqueta
<script>directamente en el archivo HTML, antes de cerrar</body>
Opciones de personalización (data-*)
| Atributo | Valor por defecto | Qué significa |
|---|---|---|
data-korat | — | Obligatorio el slug de la página del negocio /b/<slug> con el que se arma el enlace del chat |
data-name | igual que data-korat | El nombre del negocio que se muestra en el panel del QR (texto plano, no afecta la URL) |
data-position | br | br = abajo a la derecha, bl = abajo a la izquierda |
data-label | El texto estándar del idioma | El texto del botón; lo puedes escribir tú |
data-lang | th | th o en |
data-qr | Se muestra | Pon data-qr="0" para esconder el panel del QR (queda solo el enlace para abrir el chat) |
src en la URL del chat y en la URL de la imagen del QR sale siempre de location.href de la página donde está el botón — el script no permite fijarlo a un valor constante, porque entonces todos los botones parecerían venir de la misma página, que es justo lo contrario de para qué sirve.
Ejemplo completo de personalización:
<script src="https://koratland.com/embed/korat-message.js" data-korat="taqueria-el-sol-42" data-name="Taquería El Sol" data-position="bl" data-label="Escríbenos" data-lang="en" defer></script>Accesibilidad
- El botón es un botón de verdad: se alcanza con Tab y tiene
aria-label - Con Esc se cierra el panel del QR
- Respeta la preferencia de "reducir movimiento" (
prefers-reduced-motion) del dispositivo - Tiene suficiente contraste tanto en fondo claro como oscuro, y respeta el área segura del borde de la pantalla en los celulares actuales, sin tapar la barra de gestos de abajo
Por qué es seguro para el sitio de tu negocio
- Dibuja la interfaz con Shadow DOM ⇒ el CSS de tu sitio y el del botón no chocan nunca
- Un solo archivo, sin dependencias externas, sin cargar fuentes ni librerías adicionales
- Aunque se cargue varias veces, no dibuja botones encima de otros
- Lo que escribas en los
data-*siempre se escapa antes de mostrarse