Zum Hauptinhalt springen
ChattyBox Logo

JavaScript-SDK

Das JavaScript-SDK ist der empfohlene Weg für neue, von Entwicklern umgesetzte Integrationen. Entwickeln Sie Ihr eigenes Chat-Erlebnis, während ChattyBox Suche, Quellenangaben, Konversationen und Skalierung übernimmt. Wenn Sie eine fertige Benutzeroberfläche ohne Anwendungscode wünschen, verwenden Sie stattdessen das vollständig unterstützte gehostete Widget.

Bevor Sie beginnen​

  1. Erstellen Sie ein Projekt und indexieren Sie Ihre Inhalte.
  2. Testen Sie repräsentative Fragen im Dashboard.
  3. Öffnen Sie im Projekt die Registerkarte Embed.
  4. Erstellen oder wählen Sie einen öffentlichen Widget-API-Schlüssel und konfigurieren Sie die zulässigen Ursprünge.
  5. Kopieren Sie die Widget-API-URL, die zusammen mit dem Einbettungs-Snippet angezeigt wird.

Öffentliche Widget-API-Schlüssel sind dafür vorgesehen, im Browsercode sichtbar zu sein. Sie identifizieren ein Projekt, sind jedoch keine Zugangsdaten für dessen Verwaltung. Beschränken Sie Browser-Schlüssel auf die Domains, die Ihren Chatbot aufrufen dürfen.

Installation​

bun add @openstaticfish/chattybox

Das Paket ist ein ESM-Client für aktuelle Node.js- und Browseranwendungen, die fetch bereitstellen.

Nachricht senden​

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

Setzen Sie PUBLIC_CHATTYBOX_API_URL auf die exakte Widget-API-URL aus der Registerkarte Embed. Das SDK akzeptiert sowohl das Stammverzeichnis der Bereitstellung als auch eine URL, die mit /chat endet.

Die Antwort enthält:

FeldTypBeschreibung
messagestringDie generierte Antwort.
conversationIdstringDie Kennung, mit der diese Konversation fortgesetzt wird.
sourcesstring[]Die für die Antwort abgerufenen Quell-URLs.

Konversation fortsetzen​

Speichern Sie die zurückgegebene Konversations-ID im Zustand Ihrer Benutzeroberfläche und senden Sie sie mit der nächsten Nachricht:

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

Verwenden Sie eine Konversations-ID nicht für voneinander unabhängige Besucher. Erstellen Sie eine neue Konversation, indem Sie bei der ersten Nachricht conversationId weglassen.

Fehler behandeln​

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 enthält den HTTP-Status. code ist vorhanden, wenn die API einen strukturierten Fehlercode zurückgibt.

Erweiterte Widget-Kompatibilität​

Das SDK stellt außerdem getWidgetConfig() und getWidgetTranslations(locale) bereit. Diese Methoden unterstützen Clients, die die Projekteinstellungen und lokalisierten Beschriftungen des gehosteten Widgets nachbilden möchten. Eine vollständig eigene Benutzeroberfläche kann sie ignorieren.

Nächste Schritte​