Ga naar de hoofdinhoud
ChattyBox Logo

AI-bouwer Prompts

Gebruik deze aanwijzingen met Cursor, Claude, v0, Bolt, Lovable, Replit of een andere AI-bouwer als je wilt dat ChattyBox voor je wordt geïnstalleerd.

Voordat u een prompt plakt, kopieert u het exacte widgetfragment uit uw ChattyBox dashboard. Bewaar de openbare widget API en data-api-url precies zoals weergegeven.

Universeel Prompt​

Kopieerklare prompt
Universeel Prompt

Voeg ChattyBox toe aan deze website.

Gebruik dit script uit mijn ChattyBox dashboard:

WidgetfragmentHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Vereisten
  1. 1Laad het script één keer op elke openbare pagina waar bezoekers de chatbot moeten zien.
  2. 2Plaats het aan het einde van de hoofdtekst of gebruik de door het raamwerk aanbevolen scriptlader.
  3. 3Stel de API-sleutels, admin-tokens, omgevingsgeheimen of servicereferenties van de privéserver niet openbaar.
  4. 4Bewaar de openbare sleutel ChattyBox widget API precies zoals opgegeven.
  5. 5Bewaar data-api-url precies zoals aangegeven in het ChattyBox dashboard.
  6. 6Als deze site taalspecifieke pagina's heeft, stelt u data-locale in op de paginataal of vertrouwt u op het html lang-attribuut van de pagina.
  7. 7Controleer of de widget verschijnt, wordt geopend, een testvraag verzendt en bronvermeldingen weergeeft.

Next.js / React Prompt​

Kopieerklare prompt
Next.js / React Prompt

Installeer ChattyBox in deze Next.js of React app-shell.

Gebruik dit widgetfragment van mijn ChattyBox dashboard:

WidgetfragmentHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Implementatievereisten
  1. 1Voor Next.js App Router voegt u het script toe in app/layout.tsx met next/script en strategy="afterInteractive".
  2. 2Voor Next.js Pages Router voegt u deze toe aan pages/_app.tsx of pages/_document.tsx met behulp van de door het framework aanbevolen scriptlader.
  3. 3Voor een React SPA laadt u het script één keer in de app-shell op het hoogste niveau of in index.html, en niet in elke routecomponent.
  4. 4Maak geen backend-eindpunt of proxy voor dit openbare widgetfragment.
  5. 5Verplaats de sleutel API van de openbare widget niet naar een omgevingsvariabele die alleen op een privéserver staat, tenzij de build deze nog steeds naar de browser uitvoert.
  6. 6Bewaar data-api-key en data-api-url precies zoals aangegeven.
  7. 7Vertel me na de implementatie welk bestand is gewijzigd en hoe ik kan testen of de widget wordt geopend en beantwoord met citaten.

Docusaurus Prompt​

Kopieerklare prompt
Docusaurus Prompt

Installeer ChattyBox op deze Docusaurus documentatiesite.

Gebruik dit widgetfragment van mijn ChattyBox dashboard:

WidgetfragmentHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Vereisten
  1. 1Voeg het script één keer toe voor de hele documentensite, bij voorkeur in src/theme/Root.tsx of src/theme/Root.js.
  2. 2Houd het bestaande Docusaurus thema, de navigatiebalk, de voettekst, de analyses en het i18n-gedrag intact.
  3. 3Voeg het script niet toe aan elke afzonderlijke Markdown-pagina.
  4. 4Als de site gelokaliseerde routes heeft, gebruik dan data-locale alleen wanneer dat nodig is en stem deze af op de huidige paginataal.
  5. 5Controleer of het script nog steeds data-api-key en data-api-url bevat.
  6. 6Voer na de implementatie de build Docusaurus of de bestaande documentverificatieopdracht van het project uit.

WordPress of CMS Prompt​

Kopieerklare prompt
WordPress of CMS Prompt

Voeg ChattyBox toe aan deze WordPress of CMS website.

Gebruik dit widgetfragment van mijn ChattyBox dashboard:

WidgetfragmentHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Vereisten
  1. 1Voeg het script toe via het veiligste globale aangepaste codepad dat beschikbaar is: themavoettekstscripts, een onderliggende themavoettekst, een kop-/voettekstscriptplug-in, het globale aangepaste HTML gebied CMS, of Google Tag Manager.
  2. 2Laad het op openbare pagina's, berichten, documenten en kennisbankartikelen waar bezoekers vragen kunnen stellen.
  3. 3Laad het niet op beheerders-, afreken-, account-, staging-only- of privélidmaatschapspagina's, tenzij dit expliciet wordt gevraagd.
  4. 4Verwijder data-api-key, data-api-url of async niet uit het script.
  5. 5Als de CMS afzonderlijke taalsjablonen heeft, stelt u data-locale indien nodig in op de overeenkomende taalcode.
  6. 6Geef me de exacte plaats waar het script is toegevoegd en een kort browsertestplan.

Google Tag Manager Prompt​

Kopieerklare prompt
Google Tag Manager Prompt

Maak instructies om ChattyBox te installeren met Google Tag Manager.

Gebruik dit widgetfragment van mijn ChattyBox dashboard:

WidgetfragmentHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Vereisten
  1. 1Maak een aangepaste HTML-tag met het exacte bovenstaande script.
  2. 2Gebruik de trigger Alle pagina's, tenzij ik een smallere set openbare pagina's opgeef.
  3. 3Vermeld de toestemmingsinstellingen als deze GTM container de toestemmingsmodus gebruikt.
  4. 4Voeg controles in de voorbeeldmodus toe voor het activeren van de tag, het verschijnen van de widgetstarter, het verzenden van een testvraag en het verschijnen van citaten.
  5. 5Stel niet voor om privé API sleutels of servergeheimen toe te voegen aan GTM.

Validatie na installatie Prompt​

Kopieerklare prompt
Validatie na installatie Prompt

Controleer deze ChattyBox installatie om te controleren of deze gereed is voor opstarten.

Controleer deze vereisten
  1. 1Het widgetscript wordt één keer geladen op de beoogde openbare pagina's.
  2. 2Het script bevat src="https://chattybox.ai/widget.js".
  3. 3Het script bevat data-api-key en data-api-url.
  4. 4De paginataal en eventuele data-locale-waarden komen overeen met de pagina-inhoud.
  5. 5De browserconsole bevat geen ChattyBox ontbrekend kenmerk, ongeldige sleutel of oorsprongsfouten.
  6. 6De widget wordt geopend, verzendt een realistische testvraag, antwoorden op geïndexeerde inhoud en toont bronvermeldingen.
  7. 7De site maakt geen privéserversleutels of niet-gerelateerde geheimen openbaar.

Retourneer eventuele problemen met bestandspaden, exacte codereferenties en de kleinste veilige oplossing.