Pular para o conteúdo principal
ChattyBox Logo

SDK JavaScript

O SDK JavaScript é o caminho recomendado para novas integrações conduzidas por desenvolvedores. Crie sua própria experiência de chat enquanto o ChattyBox cuida da recuperação, das citações, das conversas e da escalabilidade. Se quiser uma interface pronta sem código de aplicativo, use o widget hospedado, que conta com suporte completo.

Antes de começar​

  1. Crie um projeto e indexe seu conteúdo.
  2. Teste perguntas representativas no painel.
  3. Abra a aba Embed do projeto.
  4. Crie ou selecione uma chave pública da API do widget e configure as origens permitidas.
  5. Copie a URL da API do widget exibida junto ao snippet de incorporação.

As chaves públicas da API do widget foram projetadas para aparecer no código do navegador. Elas identificam um projeto, mas não são credenciais de gerenciamento. Restrinja as chaves do navegador aos domínios que devem ter permissão para chamar seu chatbot.

Instalação​

bun add @openstaticfish/chattybox

O pacote é um cliente ESM para versões atuais do Node.js e aplicativos de navegador que fornecem fetch.

Enviar uma mensagem​

import { Chattybox } from '@openstaticfish/chattybox';

const chattybox = new Chattybox({
  apiKey: import.meta.env.PUBLIC_CHATTYBOX_API_KEY,
  baseUrl: import.meta.env.PUBLIC_CHATTYBOX_API_URL,
});

const answer = await chattybox.sendMessage({
  message: 'How do I get started?',
});

console.log(answer.message);
console.log(answer.sources);

Defina PUBLIC_CHATTYBOX_API_URL como a URL exata da API do widget presente na aba Embed. O SDK aceita tanto a raiz da implantação quanto uma URL terminada em /chat.

A resposta contém:

CampoTipoDescrição
messagestringA resposta gerada.
conversationIdstringIdentificador usado para continuar esta conversa.
sourcesstring[]URLs de origem recuperadas para a resposta.

Continuar uma conversa​

Mantenha o ID da conversa retornado no estado da interface e envie-o com a próxima mensagem:

const followUp = await chattybox.sendMessage({
  message: 'Can you explain the second step?',
  conversationId: answer.conversationId,
});

Não reutilize um mesmo ID de conversa entre visitantes não relacionados. Para criar uma nova conversa, omita conversationId na primeira mensagem de cada visitante.

Tratar erros​

import { Chattybox, ChattyboxError } from '@openstaticfish/chattybox';

try {
  await chattybox.sendMessage({ message: 'Where is the API reference?' });
} catch (error) {
  if (error instanceof ChattyboxError) {
    console.error(error.status, error.code, error.message);
  }
}

ChattyboxError.status contém o status HTTP. code está presente quando a API retorna um código de erro estruturado.

Compatibilidade avançada com o widget​

O SDK também expõe getWidgetConfig() e getWidgetTranslations(locale). Esses métodos são destinados a clientes que desejam reproduzir as configurações do projeto e os rótulos localizados do widget hospedado. Uma interface totalmente personalizada pode ignorá-los.

Próximos passos​