Przejdź do głównej treści
ChattyBox Logo

SDK JavaScript

SDK JavaScript jest zalecaną ścieżką dla nowych integracji realizowanych przez programistów. Zbuduj własny interfejs czatu, a ChattyBox zajmie się wyszukiwaniem, cytowaniami, konwersacjami i skalowaniem. Jeśli potrzebujesz gotowego interfejsu bez kodu aplikacji, użyj w pełni obsługiwanego hostowanego widżetu.

Zanim zaczniesz​

  1. Utwórz projekt i zindeksuj treści.
  2. Przetestuj reprezentatywne pytania w panelu.
  3. Otwórz kartę Embed projektu.
  4. Utwórz lub wybierz publiczny klucz API widżetu i skonfiguruj dozwolone źródła żądań.
  5. Skopiuj adres URL API widżetu wyświetlany wraz z fragmentem kodu osadzania.

Publiczne klucze API widżetu są przeznaczone do umieszczania w kodzie przeglądarki. Identyfikują projekt, ale nie są danymi uwierzytelniającymi do zarządzania nim. Ogranicz klucze przeglądarkowe do domen, które mogą wywoływać Twojego chatbota.

Instalacja​

bun add @openstaticfish/chattybox

Pakiet jest klientem ESM dla współczesnych aplikacji Node.js i aplikacji przeglądarkowych udostępniających fetch.

Wysyłanie wiadomości​

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

Ustaw PUBLIC_CHATTYBOX_API_URL na dokładny adres URL API widżetu z karty Embed. SDK akceptuje zarówno główny adres wdrożenia, jak i adres URL zakończony /chat.

Odpowiedź zawiera:

PoleTypOpis
messagestringWygenerowana odpowiedź.
conversationIdstringIdentyfikator używany do kontynuowania tej konwersacji.
sourcesstring[]Adresy URL źródeł pobranych na potrzeby odpowiedzi.

Kontynuowanie konwersacji​

Zachowaj zwrócony identyfikator konwersacji w stanie interfejsu i wyślij go z następną wiadomością:

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

Nie używaj jednego identyfikatora konwersacji dla niezwiązanych ze sobą odwiedzających. Utwórz nową konwersację, pomijając conversationId w ich pierwszej wiadomości.

Obsługa błędów​

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 zawiera status HTTP. Właściwość code jest obecna, gdy API zwraca ustrukturyzowany kod błędu.

Zaawansowana zgodność z widżetem​

SDK udostępnia również getWidgetConfig() i getWidgetTranslations(locale). Te metody są przeznaczone dla klientów, którzy chcą odwzorować ustawienia projektu i zlokalizowane etykiety hostowanego widżetu. W pełni niestandardowy interfejs może je pominąć.

Następne kroki​