メインコンテンツまでスキップ

Chat

Chat 製品は、すでに運用しているマップに Kaleidr Control Tower をアタッチします。 これはページ内オーバーレイとしてユーザーのマップを読み取り、応答しながら ナビゲーションを制御し、場所を特定し、独自のマップインスタンス上にルートを描画します。

動作するかどうかを決める3つのポイント​

項目内容
組み込み方式attach — パネルはページ内にマウントされ、渡されたマップの DOM オブジェクトを操作します。iframe ではありません。
必要なスコープai — キーに ai capability が必要です。
最小プランPro — Free のキーでは ai スコープを利用できません。

ブラウザが publishable key をセッショントークンと交換する前に、ページの origin が キーの origin allowlist に登録されている必要があります。設定手順については APIキーを取得 を参照してください。

各コンポーネントの場所​

1つのスニペット​

MapLibre を使用した最小構成の BYOM（bring-your-own-map）Chat attach です。 キーの origin allowlist に登録された HTTP(S) origin から配信してください — file:// は Origin を送信しないため、セッション交換は必ず失敗します。

<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 を指定すると、パネルは document.body 上に浮かぶのではなく マウント要素内に固定されます。指定しない場合、パネルがマップホストの外に出て レイアウト上で壊れて見えます。