Eigendom van componenten
Stel berichten, citatiekaarten, aanwijzingen, lege statussen en bedieningselementen samen vanuit uw eigen React-componenten.
Verbind React componenten met ChattyBox met @openstaticfish/chattybox. Uw team beheert de weergave en status, terwijl de beheerde infrastructuur brongebaseerde antwoorden, citaten en gesprekscontinuïteit afhandelt.
ChattyBox crawlt je bestaande documentatie, indexeert de content voor retrieval en embedt een chatbot die antwoordt vanuit je documentatie in plaats van generiek modelgeheugen.
Installeer JavaScript SDK in uw React-applicatie.
Maak één Chattybox-client buiten het renderpad van de component.
Verzend berichten vanaf een gebeurtenishandler en update de status UI met het antwoord.
Geef bronlinks weer en handel gestructureerde ChattyboxError-fouten af.
Lancering in drie stappen
Gebruik de status-, toegankelijkheids-, stijl- en ontwerpsysteempatronen die uw toepassing al volgt in plaats van zich aan te passen aan een vaste widgetshell.
Stel berichten, citatiekaarten, aanwijzingen, lege statussen en bedieningselementen samen vanuit uw eigen React-componenten.
Gebruik de lokale staat of uw bestaande staatslaag terwijl u gesprekken tussen bezoekers geïsoleerd houdt.
Beheer de focus, liveregio's, toetsenbordgedrag en foutaankondigingen binnen uw toepassing.
Houd de browserintegratie klein, terwijl ChattyBox de inhoudsindexering, het ophalen en geciteerde antwoorden afhandelt.
Maak de client één keer aan, roep deze aan vanuit een gebeurtenishandler en bewaar de gespreks-ID van elke bezoeker in de component- of applicatiestatus.
import { useState } from 'react';
import { Chattybox } from '@openstaticfish/chattybox';
const chattybox = new Chattybox({
apiKey: import.meta.env.VITE_CHATTYBOX_API_KEY,
baseUrl: import.meta.env.VITE_CHATTYBOX_API_URL,
});
export function Chat() {
const [answer, setAnswer] = useState('');
async function ask(message: string) {
const response = await chattybox.sendMessage({ message });
setAnswer(response.message);
}
return <div aria-live="polite">{answer}</div>;
}Begrijp de onderliggende client, het responsmodel en de infrastructuurgrens.
Pas de React-client toe binnen een App Router-clientgrens.
Controleer de voortzetting van het gesprek en de gestructureerde foutafhandeling.
Gebruik het onderhouden scriptgebaseerde UI in plaats van aangepaste componenten te bouwen.
Ja. De JavaScript SDK retourneert berichten, gespreks-ID's en bron-URLs, zodat uw React-toepassing een volledig aangepaste interface kan weergeven.
De SDK is opzettelijk hoofdloos. Hierdoor kunnen teams hun eigen componentenbibliotheek, toegankelijkheidsgedrag, statusbeheer en productontwerp gebruiken.
Maak het eenmalig buiten het renderpad van de component of in een stabiele applicatieprovider, in plaats van voor elke render een nieuwe client te bouwen.
Ja. Gebruik de gehoste widget-installatiegids als u een onderhouden interface wilt in plaats van aangepaste React-weergave.
Geen creditcard vereist. Je content wordt niet gebruikt voor modeltraining.
Gratis niveau. Geen kaart nodig.