Integroi AI-koodausavustajan avulla

Suositeltu integraatio on @openstaticfish/chattybox-npm-paketti. Sen avulla sovelluskoodi voi määrittää julkisen avaimen ja API-URL:n, liittää ChattyBoxin ylläpidetyn käyttöliittymän komponentin yhteyteen tai käyttää headless-asiakasta täysin mukautettua käyttöliittymää varten.

Itsenäinen widget.js-skripti dokumentoidaan viimeisenä build-vaiheettomana varavaihtoehtona sivustoille, jotka eivät voi asentaa npm-paketteja.

Ennen kuin aloitat

Viimeistele chatbotin asetukset ennen kuin pyydät avustajaa muokkaamaan sovellustasi:

• Varmista edustavat vastaukset ja lähdeviitteet Test Chat -osiossa.
• Luo selainavain Public Keys -osiossa ja rajoita sen sallitut origin-osoitteet.
• Kopioi Embed-osiossa näkyvä julkinen avain ja widgetin API-URL.
• Päätä, mihin sovelluksen reitteihin tai layouteihin käyttökokemus liitetään.

Nämä ovat julkisia selainkäyttöön tarkoitettuja tunnistetietoja, mutta vältä silti ympäristökohtaisten arvojen committaamista. Älä koskaan anna määrityksen käyttöönottotunnusta, ylläpitäjän tunnuksia tai asiaankuulumatonta ympäristötiedostoa.

Suositus: Liitä ylläpidetty käyttöliittymä npm:stä

Tämä on oletusprompti React-, Next.js-, Vite- ja muille pakettipohjaisille selainohjelmille.

Kehote

Integroi ChattyBoxin npm-paketti

Integroi ChattyBox tähän sovellukseen käyttäen @openstaticfish/chattybox-npm-pakettia.

Julkinen selainmääritys:
- API-avain: [PASTE PUBLIC WIDGET KEY]
- API-URL: [PASTE WIDGET API URL]

Tutki ensin framework, reititysmalli, paketinhallinta, ympäristömuuttujien käytännöt ja sovelluksen pysyvä layout. Kerro ennen muokkaamista, mitä tiedostoja aiot muuttaa. Kysy minulta, jos reitit, joilla ChattyBoxin pitäisi näkyä, ovat epäselviä.

Vaatimukset:
1. Asenna @openstaticfish/chattybox tämän repositorion nykyisellä paketinhallinnalla.
2. Tallenna julkinen API-avain ja API-URL frameworkin selaimelle näkyvien ympäristömuuttujien käytännön mukaisesti. Lisää esimerkkiympäristötiedostoon paikkamerkkien nimet, mutta älä committaa oikeita arvoja.
3. Tuo Chattybox paketista @openstaticfish/chattybox ja luo yksi asiakas apiKey- ja baseUrl-arvoilla.
4. Liitä ylläpidetty käyttöliittymä kutsumalla client.mountWidget() sopivasta asiakaspuolen komponentista tai elinkaarikoukusta.
5. Liitä se vain määrittämilleni reiteille tai layoutiin ja kutsu tarvittaessa palautettua remove()-funktiota frameworkin siivouksen yhteydessä.
6. Älä lisää widget.js:ää käsin, luo backend-välityspalvelinta tai lisää toista ChattyBox-asiakasta.
7. Säilytä nykyinen navigointi, renderöintirajat, lokalisointi, analytiikka, suostumukset ja tyylit.
8. Tee pienin kohdennettu muutos äläkä ota sitä käyttöön.
9. Suorita repositorion build, lint, tyyppitarkistus ja olennaiset testit.
10. Raportoi muuttuneet tiedostot, asetettavat ympäristömuuttujat, käyttöliittymän liittämiskohta ja tapa testata sitä käyttöön otetulla sivustolla.

Tuloksena olevan sovelluskoodin tulisi noudattaa tätä muotoa:

import { Chattybox } from '@openstaticfish/chattybox';

const client = new Chattybox({
  apiKey: PUBLIC_CHATTYBOX_API_KEY,
  baseUrl: PUBLIC_CHATTYBOX_API_URL,
});

const widget = client.mountWidget();

// Use during component cleanup when appropriate.
// widget.remove();

Rakenna mukautettu käyttöliittymä

Valitse tämä, kun sovelluksesi omistaa viestiluettelon, syötteen, lataustilat, virheet, lähdeviitteet ja sijoittelun sen sijaan, että liittäisit ylläpidetyn käyttöliittymän.

Kehote

Rakenna headless ChattyBox -käyttöliittymä

Rakenna mukautettu chatbot-käyttöliittymä käyttäen @openstaticfish/chattybox-npm-pakettia ja sen headless-asiakasta.

Julkinen selainmääritys:
- API-avain: [PASTE PUBLIC WIDGET KEY]
- API-URL: [PASTE WIDGET API URL]

Tutki ensin sovelluksen framework, komponenttijärjestelmä, tilamallit, tyylit, saavutettavuuskäytännöt ja testiasetukset. Ehdota komponenttirajat ja tiedostot ennen muokkaamista.

Vaatimukset:
1. Asenna @openstaticfish/chattybox repositorion nykyisellä paketinhallinnalla.
2. Määritä yksi Chattybox-asiakas apiKey- ja baseUrl-arvoilla selaimelle näkyvien ympäristömuuttujien avulla; älä committaa oikeita arvoja.
3. Käytä sendMessage()-metodia ja säilytä conversationId jatkoviestejä varten.
4. Esitä vastauksen lähteet saavutettavina linkkeinä ja säilytä niiden järjestys.
5. Toteuta odotus-, tyhjä-, virhe-, uudelleenyritys- ja tukemattoman vastauksen tilat.
6. Estä kaksoislähetykset ja pidä näppäimistön sekä ruudunlukijan käyttö toimivana.
7. Liitä käyttöliittymä vain määrittämilleni reiteille tai layoutiin.
8. Noudata nykyisiä komponentteja ja tyylejä sen sijaan, että lisäisit uuden design-järjestelmän.
9. Älä lataa widget.js:ää äläkä kutsu mountWidget()-metodia.
10. Suorita build, lint, tyyppitarkistus ja olennaiset testit, raportoi sitten muuttuneet tiedostot ja varmennussuunnitelma.

Framework-kohtaiset huomautukset

Anna avustajalle tarvittaessa yksi lisälause:

• Next.js App Router: “Pidä Chattybox-asiakas ja mountWidget()-kutsu pienessä Client Componentissa, jonka aiottu layout renderöi.”
• React SPA: “Liitä käyttöliittymä pysyvästä sovellusshellistä tai tietyn reitin layoutista ja siivoa effectin palautusfunktiossa.”
• Docusaurus: “Luo vain asiakaspuolella toimiva teeman komponentti ja renderöi se src/theme/Root-tiedostosta; säilytä dokumentaation navigointi ja lokalisoinnin vaihtuminen.”
• Vue, Nuxt, Svelte tai muu framework: “Käytä frameworkin asiakaspuolen liittämisen elinkaarta ja vastaavaa siivouksen elinkaarta.”

Tarkista olemassa oleva SDK-integraatio

Kehote

Tarkista ChattyBox SDK -integraationi

Tarkista tämä ChattyBox-integraatio ottamatta sitä käyttöön tai muuttamatta asiaankuulumatonta koodia.

Tarkista, että:
1. @openstaticfish/chattybox on asennettu ja tuotu käyttöön sen sijaan, että sen toimintaa olisi kopioitu.
2. Yksi Chattybox-asiakas saa tarkoitetun julkisen API-avaimen ja API-URL:n.
3. Selainympäristömuuttujat noudattavat tämän frameworkin julkisten muuttujien nimeämissääntöjä eivätkä paljasta yksityisiä tunnistetietoja.
4. mountWidget() tai mukautettu käyttöliittymä näkyy vain tarkoitetuilla reiteillä ja siivotaan oikein.
5. Asiakaspuolen navigointi ja kehityksen aikaiset uudelleenkiinnitykset eivät luo kaksoisinstansseja.
6. Nykyiset renderöintirajat, lokalisointi, analytiikka, suostumukset, saavutettavuus ja layout säilyvät.
7. Toteutuksella on asianmukaiset testit eikä asiaankuulumatonta refaktorointia ole tehty.

Palauta löydökset vakavuuden mukaan tiedostopolkuineen ja riviviitteineen. Ehdota vain pienimpiä turvallisia korjauksia ja anna tarkat varmennuskomennot.

Ei npm:ää tai build-vaihetta?

Käytä widget.js:n asennusopasta vain, kun sivusto ei voi käyttää npm-pakettia — esimerkiksi tavallisessa HTML:ssä, CMS:n mukautetun koodin kentässä tai Google Tag Managerissa.

Kehote

Asenna varawidgetin skripti

Asenna hostattu ChattyBox-widget tälle sivustolle käyttäen täsmälleen ChattyBoxin Embed-välilehden tuottamaa skriptiä:

[PASTE COMPLETE WIDGET SCRIPT]

Tutki sivusto ensin ja tunnista turvallisin julkisten sivujen globaali lisäyskohta. Lataa muuttamaton skripti täsmälleen kerran, sulje yksityiset-, ylläpito- ja kassareitit pois, säilytä suostumus- ja CSP-käytännöt, älä paljasta yksityisiä tunnistetietoja, älä ota muutosta käyttöön ja raportoi muutettu sijainti sekä selaintestaussuunnitelma.

Testaa tulos

1. Tarkista diff ja varmista, ettei oikeita tunnistetietoja committattu.
2. Suorita projektin tavallinen build, lint, tyyppitarkistus ja testit.
3. Ota käyttöön normaalin katselmointiprosessin kautta.
4. Varmista tarkoitetut reitit yksityisessä selainikkunassa, mukaan lukien asiakaspuolen navigointi.
5. Esitä tuettu kysymys, seuraa lähdeviitettä ja testaa varakäyttäytyminen.
6. Tarkista mobiililayout, näppäimistön käyttö ja selainkonsoli.

Jatka SDK-viitteeseen ja julkaisun tarkistuslistaan.