JavaScript SDK

npm-pakett on ChattyBoxi integreerimiseks soovitatav viis. Importige oma rakendusse üks klient, seadistage selle avalik võti ja API URL ning laadige hallatav kasutajaliides sinna, kus rakendus seda vajab, või kasutage peata meetodeid oma komponentidega.

Kiire alustamine

bun add @openstaticfish/chattybox

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 widget = chattybox.mountWidget();

// Call this from your component's cleanup lifecycle when appropriate.
// widget.remove();

Kutsuge mountWidget() brauserikoodis sellest komponendist või paigutusest, kus hallatav kasutajaliides peab saadaval olema. Marsruudipõhise lokaadi määramiseks võite edastada { locale: 'fr' }.

Hankige avalik konfiguratsioon

1. Looge projekt ja indekseerige oma sisu.
2. Testige juhtpaneelil tüüpilisi küsimusi.
3. Avage Public Keys, looge brauserivõti ja piirake selle lubatud origin’e.
4. Avage Embed, valige see võti ning kopeerige loodud koodilõigu juures kuvatav vidina API URL.

Avalikud vidina API-võtmed on mõeldud brauserikoodis kasutamiseks. Need tuvastavad projekti, kuid ei ole haldusmandaadid. Piirake brauserivõtmed domeenidega, millel peab olema lubatud teie vestlusrobotit kutsuda. Pakett on ESM-klient tänapäevastele Node.js-i ja brauserirakendustele, mis pakuvad fetch-i.

Laadige hostitud vidin koodist

Kasutage seda, kui soovite ChattyBoxi hallatavat kasutajaliidest, kuid tahate rakendusekoodist juhtida, kuhu see laaditakse:

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 widget = chattybox.mountWidget();

// Optional cleanup for a component lifecycle:
widget.remove();

See laadib hallatava kasutajaliidese ühe korra ega ole serveripoolse renderduse ajal saadaval.

Looge oma kasutajaliides

Kasutage allolevaid peata meetodeid, kui teie rakendus haldab sõnumiloendit, sisendit, laadimis- ja veaseisundeid, allikaviiteid ning juurdepääsetavust.

Sõnumi saatmine

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

Seadke PUBLIC_CHATTYBOX_API_URL Embed-kaardil kuvatud täpseks vidina API URL-iks. SDK aktsepteerib nii juurutuse juur-URL-i kui ka /chat-iga lõppevat URL-i.

Vastus sisaldab järgmist:

Väli	Tüüp	Kirjeldus
message	string	Genereeritud vastus.
conversationId	string	Selle vestluse jätkamiseks kasutatav identifikaator.
sources	string[]	Vastuse jaoks hangitud allikate URL-id.

Vestluse jätkamine

Hoidke tagastatud vestluse ID-d oma kasutajaliidese olekus ja saatke see järgmise sõnumiga:

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

Ärge kasutage sama vestluse ID-d omavahel mitteseotud külastajate puhul. Looge uus vestlus, jättes nende esimese sõnumi juures conversationId välja.

Vigade käsitlemine

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 sisaldab HTTP olekut. code on olemas siis, kui API tagastab struktureeritud veakoodi.

Projekti seadete ja tõlgete taaskasutamine

SDK pakub ka meetodeid getWidgetConfig() ja getWidgetTranslations(locale). Need toetavad kliente, kes soovivad hostitud vidina projekti seadeid ja lokaliseeritud silte taasesitada:

const [config, labels] = await Promise.all([
  chattybox.getWidgetConfig(),
  chattybox.getWidgetTranslations('en'),
]);

Täielikult kohandatud kasutajaliides võib neid eirata. Hoidke iga külastaja conversationId-i tema brauseris või seansi olekus; ärge jagage kunagi üht globaalset vestluse ID-d.

Järgmised sammud

• Eelistate hallatavat ehituseta kasutajaliidest? Installige widget.js.
• Kohandage hostitud kasutajaliidest jaotises Hostitud vidina kohandamine.
• Testige enne käivitamist origin’i piiranguid, varuvastuseid, allikaviiteid ja mobiilikäitumist käivituseelse kontrollnimekirja abil.