Chat
O produto Chat anexa o Kaleidr Control Tower a um mapa que você já utiliza. Ele funciona como uma sobreposição dentro da página que lê o mapa do usuário e interage com ele — controlando a navegação, identificando lugares e desenhando rotas na sua própria instância do mapa.
Os três fatores que determinam se ele funcionará
| Fator | Resposta |
|---|---|
| Forma de integração | attach — o painel é montado dentro da sua página e controla o objeto DOM do mapa que você fornece. Não é um iframe. |
| Escopo necessário | ai — a chave deve incluir a capacidade ai. |
| Plano mínimo | Pro — chaves do plano Free não permitem o escopo ai. |
A origem da sua página deve estar na lista de origens permitidas da chave antes que o navegador possa trocar a chave publishable por um token de sessão. Consulte Obter uma chave de API para configurar a lista de origens.
Onde ficam os componentes
- Referência do SDK — Chat attach — atributos, opções de montagem
e matriz de handles (
destroy,setTheme). - Guias — um para cada fornecedor de mapas, cada um com uma página funcional completa:
- Contrato de comunicação — SSE wire contract — os eventos transmitidos de volta pela plataforma. Os clientes devem ignorar nomes de eventos desconhecidos.
O único snippet
Um Chat attach BYOM (bring-your-own-map) mínimo com MapLibre. Sirva
esta página a partir de uma origem HTTP(S) incluída na lista de origens permitidas da chave —
file:// não envia Origin, portanto a troca de sessão sempre falha.
<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 fixa o painel dentro do elemento de montagem em vez de deixá-lo flutuando
sobre document.body. Sem essa opção, o painel sai do contêiner do mapa e parece
quebrado sobre o layout.