Pular para o conteúdo principal

Chat

O Kaleidr Chat é um painel de conversa que você adiciona a uma página que já exibe um mapa. Um visitante digita uma pergunta ("Onde posso tomar café da manhã perto da Tate Modern?"), a resposta aparece progressivamente no painel e os lugares mencionados surgem como marcadores no seu mapa enquanto a câmera se move para mostrá-los.

O painel funciona na sua página, não em um iframe. Você carrega um script, chama Kaleidr.mount com sua chave publicável e o objeto de mapa ativo, e o painel se conecta ao mapa. Sua biblioteca de mapas, seu estilo, suas camadas e seus controles continuam intactos.

O que o visitante vivencia​

  1. Uma barra de entrada com o texto Ask Kaleidr aparece no canto superior esquerdo do mapa.
  2. O visitante envia uma pergunta. A barra se expande para uma janela de chat e a resposta surge progressivamente como texto.
  3. Cada lugar mencionado na resposta vira um cartão de resultado no chat e um marcador no mapa. Para um lugar, a câmera voa até ele; para vários, ajusta o enquadramento para incluir todos.
  4. Clicar em um marcador ou resultado abre um cartão do lugar com um resumo, fotos, rotas e um campo para perguntas adicionais sobre aquele lugar.
  5. Pedir direções desenha uma linha de rota no mapa e ajusta a visualização.
  6. Os marcadores de perguntas anteriores permanecem no mapa pelo restante da conversa, em todos os mapas compatíveis e em elementos Viewer ou Tile da Kaleidr. Fechar a janela de chat encerra a conversa e remove seus marcadores e sua rota.

Em uma área de visualização com 768 px de largura ou menos, o painel aparece como uma folha inferior em vez de uma janela flutuante.

O que ele faz no seu mapa​

O que fazO que não faz
Adiciona e remove seus próprios marcadoresLer, alterar ou remover suas camadas, fontes ou marcadores
Move a câmera para um lugar ou enquadra váriosEnviar suas camadas, marcadores ou área visível para a Kaleidr
Desenha uma linha de rota e depois a removeExecutar callbacks no seu código quando algo acontece
Lê o nível de zoom atual e o envia com cada pergunta. No Mapbox GL JS e MapLibre GL JS, também lê a câmera e a fonte dos rótulos do estilo apenas na página, para posicionar e identificar seus marcadoresAssumir o controle dos controles ou gestos do mapa

O comportamento exato varia um pouco conforme a biblioteca de mapas, já que cada uma oferece funções diferentes de câmera e desenho. Mapas compatíveis traz a matriz e Recursos e limites enumera cada solicitação do painel e seus dados.

Requisitos​

RequisitoValor
PlanoFree ou superior. As perguntas consomem créditos de IA da sua organização.
ChaveUma chave publicável, kld_pk_live_…, em kaleidr.com/api-keys.
Escopoai. Todas as novas chaves já o incluem por padrão.
Origem permitidaSe a chave lista origens permitidas, a origem da página deve estar entre elas.
Biblioteca de mapasMapbox GL JS, MapLibre GL JS, Google Maps JavaScript API ou Leaflet, carregada como variável global da página antes da montagem.
PáginaServida por HTTP ou HTTPS. Um arquivo aberto diretamente do disco não tem origem utilizável.
Política de Segurança de ConteúdoSe o site definir uma, permita os hosts descritos em Política de Segurança de Conteúdo.

Obter uma chave de API explica como criar a chave e configurar as origens permitidas.

Três maneiras de usar​

O que você temO que forneceResultado
Seu próprio mapa Mapbox, MapLibre, Google ou LeafletpublishableKey e mapO painel controla seu mapa. É o caso mais comum.
Um mapa publicado pelo Kaleidr StudioNada: incorpore o mapa, com Control Tower ativo no bloco Kaleidr AI deleO mapa traz o painel, e o proprietário paga pelas perguntas. Veja Kaleidr AI em um mapa publicado.
Nenhum mapaSomente publishableKeyUm painel só de chat: respostas e cartões de lugares, sem marcadores ou movimentos da câmera.

A menor página funcional​

Esta página mostra um mapa MapLibre com o painel de chat encaixado nele. Substitua a chave, salve o arquivo e disponibilize-o em uma origem permitida pela chave, como 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 encaixa o painel dentro de #chat. Sem isso, ele fica como janela fixa no canto superior esquerdo da área visível do navegador, independentemente de onde esteja o mapa na página. Temas e layout explica as duas opções.

O que ele não faz​

Apresente estes limites à sua equipe antes de desenvolver sobre o painel:

  • Sem callbacks ou eventos. Seu código não recebe notificações quando um visitante pergunta, quando chega uma resposta ou quando alguém clica em um marcador.
  • Sem envio de contexto próprio. Não é possível passar instruções de sistema, persona, lista de lojas ou conteúdo das suas camadas ao assistente pelo painel. Responder a partir dos dados enviados pela organização é um recurso separado, dependente do plano: veja Seus dados.
  • Sem SDK móvel nativo. O painel é destinado a páginas da Web.

Você pode definir o idioma das respostas, o título do cabeçalho e o texto de exemplo do campo de entrada com as opções lang, title e placeholder. Sem lang, o painel usa o atributo <html lang> da sua página. Veja a Referência de Chat.

A lista completa está em Recursos e limites. Se precisar de controle total sobre a conversa e a interface, chame a API HTTP pelo seu backend: veja Início rápido do servidor.

Próximos passos​