Chat
El producto Chat adjunta Kaleidr Control Tower a un mapa que ya utilizas. Es una superposición dentro de la página que lee el mapa del usuario y responde sobre él — controlando la navegación, resolviendo lugares y dibujando rutas en tu propia instancia del mapa.
Los tres factores que determinan si funcionará
| Factor | Respuesta |
|---|---|
| Método de integración | attach — el panel se monta dentro de tu página y controla el objeto DOM del mapa que le proporcionas. No es un iframe. |
| Ámbito requerido | ai — la clave debe incluir la capacidad ai. |
| Plan mínimo | Pro — las claves del nivel Free no permiten el ámbito ai. |
El origen de tu página debe estar incluido en la lista de orígenes permitidos de la clave antes de que el navegador pueda intercambiar la clave publicable por un token de sesión. Consulta Obtener una clave API para configurar la lista de orígenes.
Dónde se encuentra cada componente
- Referencia del SDK — Chat attach — atributos, opciones de montaje
y matriz de handles (
destroy,setTheme). - Guías — una por proveedor de mapas, cada una con una página funcional completa:
- Contrato de comunicación — SSE wire contract — los eventos transmitidos desde la plataforma. Los clientes deben ignorar los nombres de eventos desconocidos.
El único fragmento
Una integración Chat BYOM (bring-your-own-map) mínima con MapLibre. Sirve
esta página desde un origen HTTP(S) incluido en la lista de orígenes permitidos de la clave —
file:// no envía Origin, por lo que el intercambio de sesión siempre falla.
<link rel="stylesheet"
href="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.css">
<div id="mapHost" style="height:520px;position:relative">
<div id="map" style="position:absolute;inset:0"></div>
<div id="chat" style="position:absolute;inset:0;z-index:1;pointer-events:none"></div>
</div>
<script src="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.js"></script>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json',
center: [-0.12, 51.5],
zoom: 11,
});
Kaleidr.mount('#chat', {
product: 'chat',
publishableKey: 'kld_pk_live_…',
map,
contained: true,
});
</script>
contained: true acopla el panel dentro del elemento de montaje en lugar de dejarlo flotando
sobre document.body. Sin esta opción, el panel sale del contenedor del mapa y parece
estar roto sobre el diseño de la página.