Zum Hauptinhalt springen
ChattyBox Logo

AI Builder Prompts

Verwenden Sie diese Eingabeaufforderungen mit Cursor, Claude, v0, Bolt, Lovable, Replit oder einem anderen KI-Builder, wenn dieser ChattyBox für Sie installieren soll.

Kopieren Sie vor dem Einfügen einer Eingabeaufforderung den genauen Widget-Snippet aus Ihrem ChattyBox-Dashboard. Behalten Sie den öffentlichen Widget-Schlüssel API und data-api-url genau wie gezeigt bei.

Universell Prompt​

Kopierfertiger Prompt
Universell Prompt

Fügen Sie ChattyBox zu dieser Website hinzu.

Verwenden Sie dieses Skript aus meinem ChattyBox-Dashboard:

Widget-SnippetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Anforderungen
  1. 1Laden Sie das Skript einmal auf jeder öffentlichen Seite, auf der Besucher den Chatbot sehen sollen.
  2. 2Platzieren Sie es am Ende des Hauptteils oder verwenden Sie den vom Framework empfohlenen Skriptlader.
  3. 3Geben Sie keine API-Schlüssel, Administrator-Tokens, Umgebungsgeheimnisse oder Dienstanmeldeinformationen privater Server preis.
  4. 4Behalten Sie den öffentlichen ChattyBox-Widget-Schlüssel API genau wie bereitgestellt bei.
  5. 5Behalten Sie data-api-url genau so bei, wie es im ChattyBox-Dashboard angegeben ist.
  6. 6Wenn diese Site über sprachspezifische Seiten verfügt, legen Sie data-locale auf die Seitensprache fest oder verlassen Sie sich auf das HTML-lang-Attribut der Seite.
  7. 7Überprüfen Sie, ob das Widget angezeigt wird, sich öffnet, eine Testfrage sendet und Quellenangaben anzeigt.

Next.js / React Prompt​

Kopierfertiger Prompt
Next.js / React Prompt

Installieren Sie ChattyBox in dieser App-Shell Next.js oder React.

Verwenden Sie dieses Widget-Snippet aus meinem ChattyBox-Dashboard:

Widget-SnippetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Umsetzungsvoraussetzungen
  1. 1Fügen Sie für Next.js App Router das Skript in app/layout.tsx mit next/script und strategy="afterInteractive" hinzu.
  2. 2Für Next.js Pages Router fügen Sie es in pages/_app.tsx oder pages/_document.tsx hinzu, indem Sie den empfohlenen Skriptlader des Frameworks verwenden.
  3. 3Laden Sie für eine React SPA das Skript einmal in die App-Shell der obersten Ebene oder index.html, nicht in jede Routenkomponente.
  4. 4Erstellen Sie keinen Backend-Endpunkt oder Proxy für dieses öffentliche Widget-Snippet.
  5. 5Verschieben Sie den API-Schlüssel des öffentlichen Widgets nicht in eine private Server-Umgebungsvariable, es sei denn, der Build gibt ihn weiterhin an den Browser aus.
  6. 6Behalten Sie data-api-key und data-api-url genau wie angegeben bei.
  7. 7Teilen Sie mir nach der Implementierung mit, welche Datei geändert wurde und wie ich testen kann, ob das Widget geöffnet wird und mit Zitaten antwortet.

Docusaurus Prompt​

Kopierfertiger Prompt
Docusaurus Prompt

Installieren Sie ChattyBox auf dieser Docusaurus-Dokumentationsseite.

Verwenden Sie dieses Widget-Snippet aus meinem ChattyBox-Dashboard:

Widget-SnippetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Anforderungen
  1. 1Fügen Sie das Skript einmal für die gesamte Dokumentationsseite hinzu, vorzugsweise in src/theme/Root.tsx oder src/theme/Root.js.
  2. 2Behalten Sie das vorhandene Docusaurus-Design, die Navigationsleiste, die Fußzeile, die Analysen und das i18n-Verhalten bei.
  3. 3Fügen Sie das Skript nicht zu jeder einzelnen Markdown-Seite hinzu.
  4. 4Wenn die Site über lokalisierte Routen verfügt, verwenden Sie data-locale nur bei Bedarf und passen Sie es an die aktuelle Seitensprache an.
  5. 5Bestätigen Sie, dass das Skript weiterhin data-api-key und data-api-url enthält.
  6. 6Führen Sie nach der Implementierung den Build Docusaurus oder den vorhandenen Befehl zur Dokumentenüberprüfung des Projekts aus.

WordPress oder CMS Prompt​

Kopierfertiger Prompt
WordPress oder CMS Prompt

Fügen Sie ChattyBox zu dieser WordPress- oder CMS-Website hinzu.

Verwenden Sie dieses Widget-Snippet aus meinem ChattyBox-Dashboard:

Widget-SnippetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Anforderungen
  1. 1Fügen Sie das Skript über den sichersten verfügbaren globalen benutzerdefinierten Codepfad hinzu: Theme-Fußzeilenskripte, eine untergeordnete Theme-Fußzeile, ein Kopf-/Fußzeilen-Skript-Plugin, den globalen benutzerdefinierten Bereich CMS HTML oder Google Tag Manager.
  2. 2Laden Sie es auf öffentliche Seiten, Beiträge, Dokumente und Wissensdatenbankartikel, wo Besucher Fragen stellen können.
  3. 3Laden Sie es nicht auf Admin-, Checkout-, Konto-, Nur-Staging- oder privaten Mitgliedschaftsseiten, es sei denn, Sie werden ausdrücklich dazu aufgefordert.
  4. 4Entfernen Sie data-api-key, data-api-url oder async nicht aus dem Skript.
  5. 5Wenn CMS über separate Sprachvorlagen verfügt, legen Sie data-locale gegebenenfalls auf den passenden Sprachcode fest.
  6. 6Geben Sie mir den genauen Ort an, an dem das Skript hinzugefügt wurde, und einen kurzen Browsertestplan.

Google Tag Manager Prompt​

Kopierfertiger Prompt
Google Tag Manager Prompt

Erstellen Sie Anweisungen zur Installation von ChattyBox mit Google Tag Manager.

Verwenden Sie dieses Widget-Snippet aus meinem ChattyBox-Dashboard:

Widget-SnippetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Anforderungen
  1. 1Erstellen Sie ein benutzerdefiniertes HTML-Tag mit dem genauen Skript oben.
  2. 2Verwenden Sie einen „Alle Seiten“-Trigger, es sei denn, ich gebe einen engeren Satz öffentlicher Seiten an.
  3. 3Erwähnen Sie die Zustimmungseinstellungen, wenn dieser GTM-Container den Zustimmungsmodus verwendet.
  4. 4Fügen Sie Prüfungen im Vorschaumodus für das Auslösen des Tags, das Erscheinen des Widget-Launchers, das Senden einer Testfrage und das Erscheinen von Zitaten hinzu.
  5. 5Wir empfehlen nicht, private API-Schlüssel oder Servergeheimnisse zu GTM hinzuzufügen.

Validierung nach der Installation Prompt​

Kopierfertiger Prompt
Validierung nach der Installation Prompt

Überprüfen Sie diese ChattyBox-Installation auf Startbereitschaft.

Überprüfen Sie diese Anforderungen
  1. 1Das Widget-Skript wird einmalig auf vorgesehenen öffentlichen Seiten geladen.
  2. 2Das Skript enthält src="https://chattybox.ai/widget.js".
  3. 3Das Skript enthält data-api-key und data-api-url.
  4. 4Die Seitensprache und alle data-locale-Werte stimmen mit dem Seiteninhalt überein.
  5. 5Die Browserkonsole weist keine ChattyBox fehlenden Attribute, ungültigen Schlüssel oder Ursprungsfehler auf.
  6. 6Das Widget öffnet sich, sendet eine realistische Testfrage, Antworten aus indizierten Inhalten und zeigt Quellenangaben an.
  7. 7Die Site gibt keine privaten Serverschlüssel oder nicht damit zusammenhängende Geheimnisse preis.

Geben Sie alle Probleme mit Dateipfaden, genauen Codeverweisen und dem kleinsten sicheren Fix zurück.