Hoppa till huvudinnehållet
ChattyBox Logo

JavaScript SDK

JavaScript SDK:t är den rekommenderade vägen för nya utvecklarledda integrationer. Bygg din egen chattupplevelse medan ChattyBox hanterar hämtning, källhänvisningar, konversationer och skalning. Om du vill ha ett färdigt gränssnitt utan programkod kan du i stället använda den fullt stödda hostade widgeten.

Innan du börjar​

  1. Skapa ett projekt och indexera ditt innehåll.
  2. Testa representativa frågor i instrumentpanelen.
  3. Öppna projektets flik Embed.
  4. Skapa eller välj en offentlig API-nyckel för widgeten och konfigurera dess tillåtna ursprung.
  5. Kopiera widgetens API-URL som visas tillsammans med inbäddningskodavsnittet.

Offentliga API-nycklar för widgeten är avsedda att visas i webbläsarkod. De identifierar ett projekt men är inte autentiseringsuppgifter för administration. Begränsa webbläsarnycklar till de domäner som ska få anropa din chattbot.

Installera​

bun add @openstaticfish/chattybox

Paketet är en ESM-klient för aktuella Node.js-versioner och webbläsarprogram som tillhandahåller fetch.

Skicka ett meddelande​

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

Ange PUBLIC_CHATTYBOX_API_URL som den exakta API-URL:en för widgeten från fliken Embed. SDK:n godtar antingen distributionens rotadress eller en URL som slutar med /chat.

Svaret innehåller:

FältTypBeskrivning
messagestringDet genererade svaret.
conversationIdstringIdentifierare som används för att fortsätta konversationen.
sourcesstring[]Käll-URL:er som hämtats för svaret.

Fortsätt en konversation​

Behåll det returnerade konversations-ID:t i gränssnittets tillstånd och skicka det med nästa meddelande:

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

Återanvänd inte samma konversations-ID för besökare som inte hör ihop. Skapa en ny konversation genom att utelämna conversationId i deras första meddelande.

Hantera fel​

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 innehåller HTTP-statusen. code finns när API:t returnerar en strukturerad felkod.

Avancerad widgetkompatibilitet​

SDK:n exponerar även getWidgetConfig() och getWidgetTranslations(locale). Dessa metoder stöder klienter som vill återskapa den hostade widgetens projektinställningar och lokaliserade etiketter. Ett helt anpassat gränssnitt kan ignorera dem.

Nästa steg​