Chat
Le produit Chat ajoute Kaleidr Control Tower à une carte que vous utilisez déjà. Il s’agit d’une superposition dans la page qui lit la carte de l’utilisateur et interagit avec elle — en pilotant la navigation, en identifiant des lieux et en traçant des itinéraires sur votre propre instance de carte.
Les trois éléments qui déterminent si cela fonctionnera
| Élément | Réponse |
|---|---|
| Mode d’intégration | attach — le panneau est monté dans votre page et pilote l’objet DOM de la carte que vous lui transmettez. Ce n’est pas un iframe. |
| Portée requise | ai — la clé doit disposer de la capacité ai. |
| Forfait minimum | Pro — les clés Free n’autorisent pas la portée ai. |
L’origine de votre page doit figurer dans la liste des origines autorisées de la clé avant que le navigateur puisse échanger la clé publishable contre un jeton de session. Consultez Obtenir une clé API pour l’étape de configuration de la liste.
Où trouver les différents éléments
- Référence SDK — Chat attach — attributs, options de montage
et matrice des handles (
destroy,setTheme). - Guides — un pour chaque fournisseur de cartes, chacun sous forme de page complète et fonctionnelle :
- Contrat de communication — SSE wire contract — les événements renvoyés en streaming par la plateforme. Les clients doivent ignorer les noms d’événements inconnus.
L’unique extrait
Un Chat attach BYOM (bring-your-own-map) minimal avec MapLibre. Servez
cette page depuis une origine HTTP(S) figurant dans la liste des origines autorisées de la clé —
file:// n’envoie aucun Origin, l’échange de session échoue donc toujours.
<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 ancre le panneau dans l’élément de montage plutôt que de le laisser flotter
sur document.body. Sans cette option, le panneau sort de l’hôte de la carte et semble
cassé au-dessus de votre mise en page.