Lewati ke konten utama
ChattyBox Logo

SDK JavaScript

SDK JavaScript adalah jalur yang direkomendasikan untuk integrasi baru yang dipimpin developer. Bangun pengalaman chat Anda sendiri sementara ChattyBox menangani pengambilan, sitasi, percakapan, dan penskalaan. Jika Anda menginginkan UI siap pakai tanpa kode aplikasi, gunakan widget yang dihosting dengan dukungan penuh.

Sebelum memulai​

  1. Buat proyek dan indeks konten Anda.
  2. Uji pertanyaan yang representatif di dasbor.
  3. Buka tab Embed proyek.
  4. Buat atau pilih kunci API widget publik dan konfigurasikan asal yang diizinkan.
  5. Salin URL API widget yang ditampilkan bersama cuplikan penyematan.

Kunci API widget publik dirancang agar dapat dicantumkan dalam kode browser. Kunci tersebut mengidentifikasi proyek, tetapi bukan kredensial pengelolaan. Batasi kunci browser hanya untuk domain yang diizinkan memanggil chatbot Anda.

Instalasi​

bun add @openstaticfish/chattybox

Paket ini adalah klien ESM untuk versi Node.js terkini dan aplikasi browser yang menyediakan fetch.

Mengirim pesan​

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

Atur PUBLIC_CHATTYBOX_API_URL ke URL API widget yang persis dari tab Embed. SDK menerima root deployment atau URL yang diakhiri dengan /chat.

Respons berisi:

BidangTipeDeskripsi
messagestringJawaban yang dihasilkan.
conversationIdstringPengidentifikasi yang digunakan untuk melanjutkan percakapan ini.
sourcesstring[]URL sumber yang diambil untuk jawaban.

Melanjutkan percakapan​

Simpan ID percakapan yang dikembalikan dalam state UI Anda dan kirimkan bersama pesan berikutnya:

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

Jangan gunakan kembali satu ID percakapan untuk pengunjung yang tidak berkaitan. Buat percakapan baru dengan tidak menyertakan conversationId pada pesan pertama mereka.

Menangani kesalahan​

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 berisi status HTTP. code tersedia ketika API mengembalikan kode kesalahan terstruktur.

Kompatibilitas widget tingkat lanjut​

SDK juga mengekspos getWidgetConfig() dan getWidgetTranslations(locale). Metode ini mendukung klien yang ingin mereplikasi pengaturan proyek dan label yang dilokalkan dari widget yang dihosting. UI yang sepenuhnya khusus dapat mengabaikannya.

Langkah berikutnya​