Chat

Das Produkt Chat hängt den Kaleidr Control Tower an eine Karte an, die du bereits verwendest. Es ist ein In-Page-Overlay, das die Karte des Nutzers liest und darauf reagiert — es steuert Navigation, löst Orte auf und zeichnet Routen in deine eigene Karteninstanz.

Die drei Fakten, die entscheiden, ob es funktioniert

Fakt	Antwort
Einbindung	attach — das Panel wird innerhalb deiner Seite eingebunden und steuert das Map-DOM-Objekt, das du übergibst. Kein iframe.
Erforderlicher Scope	ai — der Schlüssel muss die ai-Fähigkeit besitzen.
Mindestplan	Pro — Free-Schlüssel erlauben den ai-Scope nicht.

Der Origin deiner Seite muss in der Origin-Allowlist des Schlüssels enthalten sein, bevor der Browser den Publishable Key gegen ein Session-Token austauschen kann. Siehe API-Schlüssel erhalten für den Allowlist-Schritt.

Wo die Komponenten zu finden sind

• SDK-Referenz — Chat attach — Attribute, Mount- Optionen und Handle-Matrix (destroy, setTheme).
• Anleitungen — eine pro Kartenanbieter, jeweils als vollständige funktionierende Seite:
  • AI an Mapbox anhängen
  • AI an Google Maps anhängen
  • AI an MapLibre anhängen
• Wire-Contract — SSE wire contract — die von der Plattform zurückgestreamten Events. Clients müssen unbekannte Event-Namen ignorieren.

Das eine Snippet

Ein minimales BYOM-(bring-your-own-map)-Chat-Attach mit MapLibre. Stelle dies von einem HTTP(S)-Origin bereit, der in der Origin-Allowlist des Schlüssels enthalten ist — file:// sendet keinen Origin, daher schlägt der Session-Austausch immer fehl.

<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 dockt das Panel innerhalb des Mount-Elements an, statt es auf document.body schweben zu lassen. Ohne diese Option verlässt das Panel den Karten-Host und wirkt über deinem Layout fehlerhaft.