Zum Hauptinhalt springen

Chat

Kaleidr Chat ist ein Chatfenster für eine Seite, die bereits eine Karte anzeigt. Ein Besucher gibt eine Frage ein („Wo kann ich in der Nähe der Tate Modern frühstücken?“). Die Antwort wird nach und nach eingeblendet, und die darin genannten Orte erscheinen als Markierungen auf Ihrer Karte. Die Kamera bewegt sich, um sie zu zeigen.

Das Fenster läuft direkt auf Ihrer Seite, nicht in einem iframe. Sie laden ein Skript, rufen Kaleidr.mount mit Ihrem veröffentlichbaren Schlüssel und dem aktiven Kartenobjekt auf, und das Fenster verbindet sich mit der Karte. Ihre Kartenbibliothek, der Stil, die Ebenen und die Bedienelemente bleiben erhalten.

Das Besuchererlebnis​

  1. Links oben auf der Karte liegt ein Eingabefeld mit der Beschriftung Ask Kaleidr.
  2. Der Besucher stellt eine Frage. Das Eingabefeld öffnet sich zum Chatfenster, und die Antwort erscheint fortlaufend als Text.
  3. Jeder genannte Ort wird als Ergebniskarte im Chat und als Markierung auf der Karte dargestellt. Bei einem Ort fliegt die Kamera dorthin; bei mehreren passt sie den Ausschnitt an, um alle zu zeigen.
  4. Ein Klick auf eine Markierung oder ein Ergebnis öffnet eine Ortskarte mit Kurzbeschreibung, Fotos, Wegbeschreibung und einem Feld für Anschlussfragen.
  5. Eine Wegbeschreibung zeichnet eine Route auf die Karte und passt den Ausschnitt an.
  6. Markierungen aus früheren Fragen bleiben während der gesamten Unterhaltung auf allen unterstützten Karten sowie Kaleidr-Viewer- und Tile-Elementen erhalten. Wenn das Chatfenster geschlossen wird, endet die Unterhaltung und ihre Markierungen und Route werden entfernt.

Bei einer Ansichtsbreite von höchstens 768 px erscheint das Chatfenster als Leiste am unteren Bildschirmrand statt als schwebendes Fenster.

Was der Chat auf Ihrer Karte tut​

Das tut erDas tut er nicht
Eigene Markierungen hinzufügen und entfernenIhre Ebenen, Datenquellen oder Markierungen lesen, ändern oder entfernen
Die Kamera zu einem Ort bewegen oder mehrere Orte einrahmenIhre Ebenen, Markierungen oder den sichtbaren Kartenbereich an Kaleidr senden
Eine Route zeichnen und wieder entfernenBei Ereignissen Ihren Code aufrufen
Den aktuellen Zoomwert auslesen und mit jeder Frage senden. Bei Mapbox GL JS und MapLibre GL JS liest er außerdem Kamera und Beschriftungsschrift der Karte nur auf der Seite aus, um Markierungen zu platzieren und zu beschriftenDie Kartensteuerung oder Gesten übernehmen

Das genaue Verhalten unterscheidet sich je nach Kartenbibliothek, da jede andere Kamera- und Zeichenfunktionen anbietet. Unterstützte Karten zeigt die Übersicht; Funktionen und Grenzen beschreibt alle Anfragen des Chatfensters und die übertragenen Daten.

Voraussetzungen​

VoraussetzungWert
TarifFree oder höher. Fragen verbrauchen KI-Guthaben Ihrer Organisation.
SchlüsselEin veröffentlichbarer Schlüssel kld_pk_live_… von kaleidr.com/api-keys.
Berechtigungai. Jeder neue Schlüssel besitzt sie standardmäßig.
Zugelassener UrsprungWenn der Schlüssel erlaubte Ursprünge auflistet, muss der Seitenursprung dazugehören.
KartenbibliothekMapbox GL JS, MapLibre GL JS, Google Maps JavaScript API oder Leaflet, vor dem Einbinden als globale Variable geladen.
SeiteÜber HTTP oder HTTPS bereitgestellt. Eine lokal geöffnete Datei hat keinen gültigen Ursprung.
Content Security PolicyWenn Ihre Website eine solche Richtlinie verwendet, müssen die Hosts aus Content Security Policy zugelassen sein.

API-Schlüssel erstellen erläutert das Erstellen des Schlüssels und das Einrichten erlaubter Ursprünge.

Drei Einsatzmöglichkeiten​

VorhandenAngegebenErgebnis
Ihre eigene Mapbox-, MapLibre-, Google- oder Leaflet-KartepublishableKey und mapDas Chatfenster steuert Ihre Karte. Das ist der typische Fall.
Eine aus Kaleidr Studio veröffentlichte KarteNichts: die Karte einbetten, mit aktiviertem Control Tower in ihrer Kachel Kaleidr AIDie Karte bringt das Fenster mit; der Eigentümer bezahlt die Fragen. Siehe Kaleidr AI auf einer veröffentlichten Karte.
Keine KarteNur publishableKeyEin reines Chatfenster mit Antworten und Ortskarten, ohne Markierungen oder Kamerabewegungen.

Kleinste funktionierende Seite​

Diese Seite zeigt eine MapLibre-Karte mit einem darin angedockten Chatfenster. Ersetzen Sie den Schlüssel, speichern Sie die Datei und stellen Sie sie von einem zugelassenen Ursprung bereit, zum Beispiel 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 dockt das Fenster in #chat an. Andernfalls ist es ein fest positioniertes Fenster links oben im Browserfenster, unabhängig davon, wo sich die Karte auf der Seite befindet. Design und Layout erklärt beide Varianten.

Was der Chat nicht tut​

Erklären Sie Ihrem Team diese Einschränkungen, bevor Sie auf dem Chatfenster aufbauen:

  • Keine Callbacks oder Ereignisse. Ihr Code wird nicht benachrichtigt, wenn Besucher fragen, Antworten eintreffen oder Markierungen angeklickt werden.
  • Kein eigener Kontext. Über das Chatfenster lassen sich keine Systemanweisungen, Personas, Filiallisten oder Ebeneninhalte an den Assistenten übergeben. Antworten aus hochgeladenen Organisationsdaten sind eine getrennte, tarifgebundene Funktion: siehe Ihre Daten.
  • Kein natives mobiles SDK. Das Fenster ist für Webseiten bestimmt.

Mit lang, title und placeholder stellen Sie Antwortsprache, Überschrift des Chatfensters und Platzhaltertext des Eingabefelds ein. Ohne lang verwendet das Fenster das Attribut <html lang> Ihrer Seite. Siehe Chat-Referenz.

Die vollständige Liste steht unter Funktionen und Grenzen. Wenn Sie Unterhaltung und Benutzeroberfläche vollständig steuern möchten, rufen Sie stattdessen die HTTP-API über Ihr Backend auf: siehe Server-Schnellstart.

Nächste Schritte​