Ga naar de hoofdinhoud
ChattyBox Logo

JavaScript-SDK

De JavaScript-SDK is de aanbevolen keuze voor nieuwe integraties onder leiding van ontwikkelaars. Bouw je eigen chatervaring terwijl ChattyBox het ophalen, de bronvermeldingen, gesprekken en schaalbaarheid afhandelt. Wil je een kant-en-klare interface zonder applicatiecode toe te voegen, gebruik dan de volledig ondersteunde gehoste widget.

Voordat je begint​

  1. Maak een project en indexeer je inhoud.
  2. Test representatieve vragen in het dashboard.
  3. Open het tabblad Insluiten van het project.
  4. Maak of selecteer een openbare widget-API-sleutel en configureer de toegestane oorsprongen.
  5. Kopieer de widget-API-URL die bij het insluitfragment wordt weergegeven.

Openbare widget-API-sleutels zijn bedoeld om in browsercode te worden opgenomen. Ze identificeren een project, maar zijn geen beheerreferenties. Beperk browsersleutels tot de domeinen die je chatbot mogen aanroepen.

Installeren​

bun add @openstaticfish/chattybox

Het pakket is een ESM-client voor actuele Node.js- en browserapplicaties die fetch aanbieden.

Een bericht versturen​

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);

Stel PUBLIC_CHATTYBOX_API_URL in op de exacte widget-API-URL uit het tabblad Insluiten. De SDK accepteert zowel de hoofd-URL van de deployment als een URL die eindigt op /chat.

Het antwoord bevat:

VeldTypeBeschrijving
messagestringHet gegenereerde antwoord.
conversationIdstringIdentificatie die wordt gebruikt om dit gesprek voort te zetten.
sourcesstring[]Bron-URL's die voor het antwoord zijn opgehaald.

Een gesprek voortzetten​

Bewaar de geretourneerde gespreks-ID in de status van je interface en stuur deze mee met het volgende bericht:

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

Gebruik één gespreks-ID niet opnieuw voor afzonderlijke, niet-gerelateerde bezoekers. Maak een nieuw gesprek door conversationId bij hun eerste bericht weg te laten.

Fouten afhandelen​

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 bevat de HTTP-status. code is aanwezig wanneer de API een gestructureerde foutcode retourneert.

Geavanceerde widgetcompatibiliteit​

De SDK biedt ook getWidgetConfig() en getWidgetTranslations(locale). Deze methoden ondersteunen clients die de projectinstellingen en gelokaliseerde labels van de gehoste widget willen reproduceren. Een volledig aangepaste interface kan ze negeren.

Volgende stappen​