Siirry pääsisältöön
React-chatbot-SDK

Rakenna oma React-chat-käyttöliittymäsi

Yhdistä React-komponentit ChattyBoxiin @openstaticfish/chattybox-paketilla. Tiimisi hallitsee esitystä ja tilaa, kun hallittu infrastruktuuri huolehtii lähteisiin perustuvista vastauksista, lähdeviitteistä ja keskustelun jatkuvuudesta.

Indeksoi julkaistut asiakirjasivut
Lähdeviittauksia
Upota yhdellä skriptillä
Asiakirjojen siirtoa ei vaadita
Luottokorttia ei vaaditaSisältösi pysyy sinun
Kysy ChattyBoxilta
x
Mistä minun kannattaa aloittaa, jos tarvitsen luotettavan vastauksen tältä sivustolta?
Aloita lisäämällä verkkosivustosi URL ChattyBoxiin. Se haravoi sisältösi, vastaa löytämiensä sivujen perusteella ja näyttää kävijöille jokaisen vastauksen lähteet.
iLähteet3^
React-alusta opas
chattybox.ai
Analytiikka
chattybox.ai
Etusivu
chattybox.ai
Esitä kysymys...
Palvelun tarjoaa ChattyBox
Rakennettu mallille React-tuotetiimit

Käynnistä lähteeseen viitattu chatbot rakentamatta uudelleen dokumenttipinoasi

ChattyBox indeksoi olemassa olevan dokumentaatiosi, indeksoi sisällön haettavaksi ja upottaa chatbotin, joka vastaa käyttämällä asiakirjojasi yleisen mallimuistin sijaan.

Luo mukautetut komponentit viesteille, lähdeviitteille, lataukselle, varavastauksille ja virheille.
Säilytä keskustelutunnukset kävijäkohtaisessa React-tilassa jatkokysymyksiä varten.
Käytä julkisia, origineihin rajattuja API-avaimia turvallisesti selainsovelluksissa.
Vältä oman indeksointirobotin, vektoritietokannan, hakupalvelun tai vastausten luontiputken ylläpitoa.
Työnkulun vaihe

Asenna JavaScript SDK React-sovellukseesi.

Työnkulun vaihe

Luo yksi Chattybox-asiakas komponentin renderöintipolun ulkopuolella.

Työnkulun vaihe

Lähetä viestit tapahtumankäsittelijästä ja päivitä käyttöliittymän tila vastauksella.

Työnkulun vaihe

Esitä lähdelinkit ja käsittele rakenteiset ChattyboxError-virheet.

Kolmivaiheinen käynnistys

Liitä React-alusta URL-osoite, testaa lainatut vastaukset ja asenna sitten widget.

Rakenna React-chatbot
React-integraatio

Sovita lähteisiin perustuva chat nykyiseen komponenttijärjestelmääsi

Käytä sovelluksesi nykyisiä tila-, saavutettavuus-, tyyli- ja design system -käytäntöjä kiinteään widget-kuoreen mukautumisen sijaan.

01

Komponenttien hallinta

Koosta viestit, lähdekortit, kehotteet, tyhjät tilat ja ohjaimet omista React-komponenteistasi.

02

Tila omilla ehdoillasi

Käytä paikallista tilaa tai nykyistä tilakerrostasi ja pidä keskustelut erillään kävijöiden välillä.

03

Saavutettavat vastaukset

Hallitse kohdistusta, live-alueita, näppäimistökäyttöä ja virheilmoituksia sovelluksessasi.

04

Hallittu taustajärjestelmä

Pidä selainintegraatio pienenä, kun ChattyBox hoitaa sisällön indeksoinnin, tiedonhaun ja lähdeviitteelliset vastaukset.

Asennuspolku

Yhdistä React-komponentti ChattyBoxiin

Luo asiakas kerran, kutsu sitä tapahtumankäsittelijästä ja säilytä jokaisen kävijän keskustelutunnus komponentin tai sovelluksen tilassa.

  1. 1Lisää @openstaticfish/chattybox React-sovellukseen.
  2. 2Alusta asiakas Viten tai sovelluskehyksen tarjoamilla julkisilla ympäristömuuttujilla.
  3. 3Tallenna palautettu viesti, lähteet ja keskustelutunnus kävijäkohtaiseen tilaan.
Rakenna 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>;
}
UKK

Yleisiä kysymyksiä

1

Voinko rakentaa mukautetun React-chatbotin ChattyBoxilla?

Kyllä. JavaScript SDK palauttaa viestit, keskustelutunnukset ja lähde-URL-osoitteet, joten React-sovelluksesi voi esittää täysin mukautetun käyttöliittymän.

2

Tarjoaako ChattyBox React-komponentin?

SDK on tarkoituksella headless. Näin tiimit voivat käyttää omaa komponenttikirjastoaan, saavutettavuuskäytäntöjään, tilanhallintaansa ja tuotesuunnitteluaan.

3

Mihin Chattybox-asiakas kannattaa luoda Reactissa?

Luo se kerran komponentin renderöintipolun ulkopuolella tai vakaassa sovellusproviderissa sen sijaan, että loisit uuden asiakkaan jokaisella renderöinnillä.

4

Voinko käyttää Reactissa sen sijaan hostattua widgetiä?

Kyllä. Käytä hostatun widgetin asennusopasta, kun haluat ylläpidetyn käyttöliittymän mukautetun React-esityksen sijaan.

Aloita ilmaiseksi

Luottokorttia ei vaadita. Sisältöäsi ei käytetä mallien kouluttamiseen.

Luo ilmainen chatbot

Ilmainen taso. Ei korttia.