Ga naar de hoofdinhoud
SDK voor React-chatbots

Bouw je eigen React-chatbotinterface

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.

Crawlt gepubliceerde documentpagina'sBronvermelde antwoordenIngesloten met één scriptGeen documentmigratie vereistGeen creditcard vereistJe content blijft van jou
Vraag ChattyBox
x
Waar moet ik beginnen als ik een betrouwbaar antwoord van deze site nodig heb?
Begin door uw website-URL aan ChattyBox toe te voegen. Het crawlt uw content, beantwoordt vragen vanuit de pagina's die het vindt en toont bezoekers de bronnen achter elk antwoord.
iBronnen3^
React-integratie gids
chattybox.ai
Analyse
chattybox.ai
Startpagina
chattybox.ai
Stel een vraag...
Aangedreven door ChattyBox
Gebouwd voor React productteams

Start een chatbot met bronvermeldingen zonder uw website-stack opnieuw op te bouwen

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.

Maak aangepaste bericht-, citatie-, laad-, fallback- en foutcomponenten.
Houd gespreks-ID's in de op bezoekers gerichte status React voor vervolgvragen.
Gebruik API-sleutels met een openbare oorsprongsbeperking veilig in browsertoepassingen.
Vermijd het onderhouden van uw eigen crawler, vectoropslag, ophaalservice of generatiepijplijn.
1Workflowstap

Installeer JavaScript SDK in uw React-applicatie.

2Workflowstap

Maak één Chattybox-client buiten het renderpad van de component.

3Workflowstap

Verzend berichten vanaf een gebeurtenishandler en update de status UI met het antwoord.

4Workflowstap

Geef bronlinks weer en handel gestructureerde ChattyboxError-fouten af.

Lancering in drie stappen

Plak uw React-integratie URL, test de geciteerde antwoorden en installeer vervolgens de widget.

Bouw een React chatbot
React-integratie

Voeg geaarde chat toe aan uw bestaande componentsysteem

Gebruik de status-, toegankelijkheids-, stijl- en ontwerpsysteempatronen die uw toepassing al volgt in plaats van zich aan te passen aan een vaste widgetshell.

Beslissingspad

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.

01

Eigendom van componenten

Stel berichten, citatiekaarten, aanwijzingen, lege statussen en bedieningselementen samen vanuit uw eigen React-componenten.

02

Geef aan wat uw voorwaarden zijn

Gebruik de lokale staat of uw bestaande staatslaag terwijl u gesprekken tussen bezoekers geïsoleerd houdt.

03

Toegankelijke reacties

Beheer de focus, liveregio's, toetsenbordgedrag en foutaankondigingen binnen uw toepassing.

04

Beheerde backend

Houd de browserintegratie klein, terwijl ChattyBox de inhoudsindexering, het ophalen en geciteerde antwoorden afhandelt.

Installatiepad

Sluit een React-component aan op ChattyBox

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.

  1. 1Voeg @openstaticfish/chattybox toe aan de React-applicatie.
  2. 2Initialiseer de client met Vite of door het raamwerk geleverde openbare omgevingsvariabelen.
  3. 3Sla het geretourneerde bericht, de bronnen en de gespreks-ID op in de bezoekersstatus.
Bouw een React chatbot
Chat.tsx
tsx
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>;
}
Veelgestelde vragen

Veelgestelde vragen

1

Kan ik een aangepaste React chatbot bouwen met ChattyBox?

Ja. De JavaScript SDK retourneert berichten, gespreks-ID's en bron-URLs, zodat uw React-toepassing een volledig aangepaste interface kan weergeven.

2

Biedt ChattyBox een React-component?

De SDK is opzettelijk hoofdloos. Hierdoor kunnen teams hun eigen componentenbibliotheek, toegankelijkheidsgedrag, statusbeheer en productontwerp gebruiken.

3

Waar moet ik de Chattybox-client maken in React?

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.

4

Kan ik in plaats daarvan de gehoste widget in React gebruiken?

Ja. Gebruik de gehoste widget-installatiegids als u een onderhouden interface wilt in plaats van aangepaste React-weergave.

Gratis starten

Geen creditcard vereist. Je content wordt niet gebruikt voor modeltraining.

Maak een gratis chatbot

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.