:::note Versionsstatus Det publicerade npm-SDK:t 0.1.4 med widget.js v15 stöder teardown via remove()/window.ChattyBox.destroy(). Headless sendMessage() försöker inte igen automatiskt. :::

Integrera med en AI-kodningsassistent

Den rekommenderade integrationen är @openstaticfish/chattybox npm-paketet. Det låter applikationskod konfigurera den offentliga nyckeln och API-URL:en, montera ChattyBox underhållna gränssnitt där din komponent hör hemma eller använda den headless-klienten för ett helt eget gränssnitt.

Det fristående widget.js-skriptet dokumenteras sist som en reservlösning utan byggsteg för webbplatser som inte kan installera npm-paket.

Innan du börjar

Slutför chattbotens konfiguration innan du ber en assistent redigera din applikation:

• Verifiera representativa svar och källhänvisningar i Test Chat.
• Skapa en webbläsarnyckel i Public Keys. Den fungerar på webbläsarorigins som standard; aktivera vid behov en exakt originbegränsning i Edit origins som ytterligare skydd.
• Kopiera den offentliga nyckeln och widgetens API-URL som visas i Embed.
• Bestäm vilka applikationsrutter eller layouter som ska montera upplevelsen.

Detta är offentliga webbläsaruppgifter, men undvik ändå att committa miljöspecifika värden. Ge aldrig en distributions-token för konfiguration, administratörsuppgifter eller en orelaterad miljöfil till assistenten.

Rekommenderas: Montera det underhållna gränssnittet från npm

Detta är standardprompten för React, Next.js, Vite och andra paketbaserade webbläsarapplikationer.

Instruktion

Integrera ChattyBox npm-paketet

Integrera ChattyBox i den här applikationen med npm-paketet @openstaticfish/chattybox.

Offentlig webbläsarkonfiguration:
- API-nyckel: [PASTE PUBLIC WIDGET KEY]
- API-URL: [PASTE WIDGET API URL]

Inspektera först ramverket, routningsmodellen, pakethanteraren, konventionerna för miljövariabler och applikationens beständiga layout. Berätta vilka filer du planerar att ändra innan du redigerar. Fråga mig om rutterna där ChattyBox ska visas är oklara.

Krav:
1. Installera @openstaticfish/chattybox med den pakethanterare som redan används i detta arkiv.
2. Lagra den offentliga API-nyckeln och API-URL:en enligt ramverkets konvention för miljövariabler som exponeras för webbläsaren. Lägg till platshållarnamn i en exempelmiljöfil, men committa inte riktiga värden.
3. Importera Chattybox från @openstaticfish/chattybox och skapa en klient med apiKey och baseUrl.
4. Anropa client.mountWidget() bara i webbläsarkod efter att document.body finns, från ett beständigt applikationsskal. Den laddar en flytande widget under document.body, inte i komponenten.
5. Behåll loadern vid normal SPA-navigering. I det publicerade SDK:t `0.1.4` delar identiska mountar en referens: `remove()` är idempotent och först det sista handtaget aktiverar v15-teardown; olika optioner avvisas så länge handtag finns.
6. Injicera inte widget.js manuellt, skapa ingen backend-proxy och introducera ingen annan ChattyBox-klient. mountWidget återanvänder det första markerade skriptet utan att ändra nyckel eller alternativ.
7. Bevara befintlig navigering, renderingsgränser, lokalisering, analys, samtycken och styling. Locale avgörs bara vid initiering och ett locale-alternativ fungerar endast när projektet tillåter script-override.
8. Gör den minsta fokuserade ändringen och distribuera den inte.
9. Kör arkivets build, lint, typkontroll och relevanta tester.
10. Rapportera ändrade filer, miljövariabler jag måste ange, var gränssnittet monteras och hur det testas på den distribuerade webbplatsen.

Den resulterande applikationskoden bör följa denna form:

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

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

const widget = client.mountWidget();

// Behåll loadern under sidans livstid; remove() aktiverar UI-teardown.

Bygg ett anpassat gränssnitt

Välj detta när applikationen själv ska äga meddelandelista, inmatning, laddningstillstånd, fel, källhänvisningar och placering i stället för att montera det underhållna gränssnittet.

Instruktion

Bygg ett headless ChattyBox-gränssnitt

Bygg ett anpassat chattbotgränssnitt med npm-paketet @openstaticfish/chattybox och dess headless-klient.

Offentlig webbläsarkonfiguration:
- API-nyckel: [PASTE PUBLIC WIDGET KEY]
- API-URL: [PASTE WIDGET API URL]

Inspektera först applikationens ramverk, komponentsystem, tillståndsmönster, styling, tillgänglighetskonventioner och testkonfiguration. Föreslå komponentgränser och filer innan du redigerar.

Krav:
1. Installera @openstaticfish/chattybox med arkivets befintliga pakethanterare.
2. Konfigurera en Chattybox-klient med apiKey och baseUrl genom webbläsarexponerade miljövariabler; committa inte riktiga värden.
3. Använd sendMessage() och behåll conversationId i besökaravgränsat tillstånd för att gruppera meddelanden. Den publika genereringsvägen skickar inte tidigare turer till modellen, så anta inte konversationsminne.
4. Rendera svar säkert som text eller sanerad Markdown och rendera HTTP(S)-källor som tillgängliga länkar i samma ordning. Infoga aldrig otillförlitlig rå HTML eller osäkra länkscheman.
5. Implementera tillstånd för väntan, tomt läge, fel och försök igen. Reservsvar kan sakna källor och det publika resultatet har inget separat wasAnswered- eller fallback-statusfält. Hantera både ChattyboxError och oinpackade nätverksfel.
6. Avvisa tomma eller trimmade meddelanden över 2 000 tecken, förhindra dubbla inskickningar och se till att tangentbord och skärmläsare fungerar. SDK:t gör inga automatiska retries: använd en unik idempotencyKey per logiskt meddelande och återanvänd exakt samma indata vid retry.
7. Montera gränssnittet endast på de rutter eller i den layout jag anger.
8. Följ befintliga komponenter och stilar i stället för att lägga till ett nytt designsystem.
9. Ladda inte widget.js och anropa inte mountWidget().
10. Kör build, lint, typkontroll och relevanta tester och rapportera sedan ändrade filer samt en verifieringsplan.

Ramverksanteckningar

Ge assistenten ytterligare en mening vid behov:

• Next.js App Router: ”Håll Chattybox-klienten och anropet till mountWidget() i en liten Client Component i en beständig layout och kör det i en browser-only-effect, inte under rendering.”
• React SPA: ”Montera från det beständiga applikationsskalet; returnera remove() som effect-cleanup när ett avsiktligt UI-teardown behövs.”
• Docusaurus: ”Initiera från src/theme/Root i webbläsarkod och behåll loadern vid dokumentationsnavigering; kontrollera hela sidövergångar för locale eftersom klientbaserade språkruttbyten inte konfigurerar om widgeten.”
• Vue, Nuxt, Svelte eller annat ramverk: ”Använd den klientbaserade monteringslivscykeln i en beständig layout; välj ett headless-gränssnitt om motsvarande teardown krävs.”

Granska en befintlig SDK-integration

Instruktion

Granska min ChattyBox SDK-integration

Granska denna ChattyBox-integration utan att distribuera eller ändra orelaterad kod.

Kontrollera att:
1. @openstaticfish/chattybox är installerat och importerat i stället för att dess funktionalitet dupliceras.
2. En Chattybox-klient får den avsedda offentliga API-nyckeln och API-URL:en.
3. Webbläsarens miljövariabler följer ramverkets namnregler för offentliga variabler utan att privata autentiseringsuppgifter exponeras.
4. Den hostade widgeten använder ett beständigt skal och använder remove() endast för avsiktligt UI-teardown, ruttundantag efter SPA-navigering eller samtyckesåterkallelse. Ett anpassat gränssnitt har riktig komponentstädning.
5. Klientsidig navigering och omladdningar under utveckling inte skapar dubbla instanser.
6. Befintliga renderingsgränser, lokalisering, analys, samtycke, tillgänglighet och layout förblir intakta. Originbegränsningar är frivilliga; en begränsad nyckel behöver en tillåten request-origin.
7. Implementeringen har lämpliga tester och ingen orelaterad refaktorering.

Returnera resultat efter allvarlighetsgrad med filsökvägar och radreferenser. Föreslå endast de minsta säkra korrigeringarna och ge exakta verifieringskommandon.

Inget npm eller byggsteg?

Använd installationsguiden för widget.js endast när webbplatsen inte kan använda npm-paketet — till exempel vanlig HTML, ett fält för anpassad CMS-kod eller Google Tag Manager.

Instruktion

Installera reservskriptet för widgeten

Installera den hostade ChattyBox-widgeten på den här webbplatsen med det exakta skript som genererats på mitt ChattyBox Embed-kort:

[PASTE COMPLETE WIDGET SCRIPT]

Inspektera webbplatsen först och identifiera den säkraste globala infogningsplatsen för offentliga sidor. Ladda det oförändrade skriptet exakt en gång, uteslut privata rutter, adminrutter och kassasidor, bevara samtyckes- och CSP-beteende, exponera inte privata autentiseringsuppgifter, distribuera inte ändringen och rapportera den ändrade platsen samt en webbläsarbaserad testplan.

Testa resultatet

1. Granska diffen och bekräfta att inga riktiga autentiseringsuppgifter har committats.
2. Kör projektets vanliga build, lint, typkontroll och tester.
3. Distribuera genom den normala granskningsprocessen.
4. Verifiera avsedda rutter i ett privat webbläsarfönster, inklusive klientsidig navigering.
5. Ställ en fråga som stöds, följ en källhänvisning och testa reservbeteendet.
6. Kontrollera mobil layout, tangentbordsanvändning och webbläsarkonsolen.

Fortsätt med SDK-referensen och lanseringschecklistan.