Chat

Kaleidr Chat est un panneau de discussion que vous ajoutez à une page affichant déjà une carte. Un visiteur saisit une question (« Où prendre un petit-déjeuner près de la Tate Modern ? »), la réponse s’affiche progressivement dans le panneau et les lieux cités apparaissent comme repères sur votre carte tandis que la caméra se déplace pour les montrer.

Le panneau fonctionne dans votre page, pas dans une iframe. Chargez un seul script, appelez Kaleidr.mount avec votre clé publiable et votre objet carte actif ; le panneau se connecte alors à cette carte. Vous conservez votre bibliothèque cartographique, votre style, vos couches et vos contrôles.

Expérience du visiteur

Une barre de saisie portant le texte Ask Kaleidr apparaît en haut à gauche de la carte.
Le visiteur pose une question. La barre s’agrandit en fenêtre de chat et la réponse s’affiche progressivement.
Chaque lieu mentionné dans la réponse devient une fiche de résultat et un repère sur la carte. Pour un seul lieu, la caméra s’y déplace ; pour plusieurs, elle ajuste le cadrage pour tous les montrer.
Cliquer sur un repère ou un résultat ouvre une fiche présentant un résumé du lieu, des photos, un itinéraire et un champ pour poser une question complémentaire.
Demander un itinéraire trace une ligne sur la carte et ajuste le cadrage.
Les repères des questions précédentes restent sur la carte pendant toute la conversation, sur chaque carte compatible et sur les éléments Viewer ou Tile de Kaleidr. Fermer la fenêtre met fin à la conversation et supprime ses repères et son itinéraire.

Pour une largeur d’affichage de 768 px ou moins, le panneau prend la forme d’un volet inférieur plutôt que d’une fenêtre flottante.

Effets sur votre carte

Ce qu’il fait	Ce qu’il ne fait pas
Ajoute et supprime ses propres repères	Lire, modifier ou supprimer vos couches, sources ou marqueurs
Déplace la caméra vers un lieu ou cadre plusieurs lieux	Envoyer vos couches, marqueurs ou zone visible à Kaleidr
Trace un itinéraire, puis le supprime	Exécuter des rappels dans votre code lors d’une action
Lit le niveau de zoom actuel et l’envoie avec chaque question. Avec Mapbox GL JS et MapLibre GL JS, il lit également la caméra et la police des libellés du style, uniquement dans la page, pour placer et légender ses repères	Prendre le contrôle des commandes ou des gestes de votre carte

Le comportement précis varie légèrement selon la bibliothèque cartographique, chacune proposant ses propres fonctions de caméra et de dessin. Cartes compatibles présente une matrice, et Fonctionnalités et limites détaille toutes les requêtes du panneau et les données qu’elles transportent.

Prérequis

Prérequis	Valeur
Offre	Free ou supérieure. Les questions consomment les crédits IA de votre organisation.
Clé	Une clé publiable, `kld_pk_live_…`, créée sur kaleidr.com/api-keys.
Portée	`ai`. Toutes les nouvelles clés l’incluent par défaut.
Origine autorisée	Si la clé définit des origines autorisées, l’origine de la page doit y figurer.
Bibliothèque cartographique	Mapbox GL JS, MapLibre GL JS, Google Maps JavaScript API ou Leaflet, chargée comme variable globale avant le montage.
Page	Servie en HTTP ou HTTPS. Un fichier ouvert depuis le disque n’a pas d’origine utilisable.
Politique de sécurité du contenu	Si votre site en utilise une, autorisez les hôtes indiqués dans Politique de sécurité du contenu.

Obtenir une clé API explique la création de la clé et la configuration des origines autorisées.

Trois façons de l’utiliser

Ce que vous avez	Ce que vous fournissez	Résultat
Votre propre carte Mapbox, MapLibre, Google ou Leaflet	`publishableKey` et `map`	Le panneau pilote votre carte. C’est le cas courant.
Une carte publiée depuis Kaleidr Studio	Rien : intégrez la carte, avec Control Tower activé dans sa tuile Kaleidr AI	La carte porte le panneau et son propriétaire paie les questions. Voir Kaleidr AI sur une carte publiée.
Aucune carte	`publishableKey` seulement	Un panneau de chat autonome : réponses et fiches de lieux, sans repères ni mouvements de caméra.

Exemple minimal fonctionnel

Cette page affiche une carte MapLibre avec un panneau de chat ancré à l’intérieur. Remplacez la clé, enregistrez le fichier et servez-le depuis une origine autorisée par la clé, par exemple http://localhost:8080.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Kaleidr Chat on MapLibre</title>
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.css" />
  </head>
  <body>
    <div id="mapHost" style="position:relative; height:520px">
      <div id="map" style="position:absolute; inset:0; z-index: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>
  </body>
</html>

contained: true ancre le panneau dans #chat. Sans cette option, le panneau est une fenêtre fixe en haut à gauche de la zone d’affichage du navigateur, quel que soit l’emplacement de la carte sur la page. Thèmes et mise en page explique ces deux configurations.

Ce qu’il ne fait pas

Présentez ces limites à votre équipe avant de développer avec le panneau :

Aucun rappel ni événement. Votre code n’est pas informé lorsqu’un visiteur pose une question, qu’une réponse arrive ou qu’un repère est sélectionné.
Impossible d’ajouter votre propre contexte. Vous ne pouvez pas transmettre au panneau des instructions système, un personnage, une liste de magasins ou le contenu de vos couches. Les réponses fondées sur les données importées par votre organisation relèvent d’une fonction distincte soumise à l’offre : voir Vos données.
Pas de SDK mobile natif. Le panneau est destiné aux pages web.

Vous pouvez définir la langue des réponses, le titre de l’en-tête du panneau et le texte indicatif du champ de saisie avec les options lang, title et placeholder. Sans lang, le panneau utilise l’attribut <html lang> de votre page. Voir la Référence Chat.

La liste complète figure dans Fonctionnalités et limites. Pour contrôler totalement la conversation et l’interface, appelez plutôt l’API HTTP depuis votre serveur : voir Démarrage rapide côté serveur.

Pour aller plus loin

Développer : Mapbox · MapLibre · Google Maps · Leaflet
Comprendre : Fonctionnalités et limites · Cartes compatibles
Adapter à votre page : Thèmes et mise en page
Consulter la référence : Référence Chat
Déployer : Liste de vérification de production · Dépannage

Expérience du visiteur​

Effets sur votre carte​

Prérequis​

Trois façons de l’utiliser​

Exemple minimal fonctionnel​

Ce qu’il ne fait pas​

Pour aller plus loin​