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 uw bestaande website, documentatie, helpcentrum, CMS of kennisbank en sluit vervolgens een chatbot in die antwoord geeft op basis van uw eigen gepubliceerde inhoud in plaats van het generieke 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.
Gebruik deze controlepunten om te beslissen of ChattyBox naast uw documentplatform moet worden geplaatst, een afzonderlijke assistent moet vervangen of geïsoleerd moet blijven om te testen.
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>;
}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.
We use optional analytics and tag-management tools to understand site use. Choose whether to allow PostHog and Google Tag Manager. Turning analytics off reloads this page so the change takes effect cleanly. Essential site functionality and error monitoring are not controlled by this choice. Read our privacy policy.