Passer au contenu principal
ChattyBox Logo

Générateur d'IA Prompts

Utilisez ces invites avec Cursor, Claude, v0, Bolt, Lovable, Replit ou un autre constructeur d'IA lorsque vous souhaitez qu'il installe ChattyBox pour vous.

Avant de coller une invite, copiez l'extrait exact du widget de votre tableau de bord ChattyBox. Conservez la clé API et data-api-url du widget public exactement comme indiqué.

Universel Prompt​

Invite prête à copier
Universel Prompt

Ajoutez ChattyBox à ce site Web.

Utilisez ce script de mon tableau de bord ChattyBox :

Extrait du widgetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Exigences 
  1. 1Chargez le script une fois sur chaque page publique où les visiteurs doivent voir le chatbot.
  2. 2Placez-le près de la fin du corps ou utilisez le chargeur de script recommandé par le framework.
  3. 3N'exposez pas les clés API du serveur privé, les jetons d'administrateur, les secrets d'environnement ou les informations d'identification du service.
  4. 4Conservez la clé publique ChattyBox du widget API exactement telle que fournie.
  5. 5Conservez data-api-url exactement comme fourni par le tableau de bord ChattyBox.
  6. 6Si ce site comporte des pages spécifiques à une langue, définissez data-locale sur la langue de la page ou comptez sur l'attribut html lang de la page.
  7. 7Vérifiez que le widget apparaît, s'ouvre, envoie une question de test et affiche les citations des sources.

Next.js / React Prompt​

Invite prête à copier
Next.js / React Prompt

Installez ChattyBox dans ce shell d'application Next.js ou React.

Utilisez cet extrait de widget de mon tableau de bord ChattyBox :

Extrait du widgetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Exigences de mise en œuvre 
  1. 1Pour Next.js App Router, ajoutez le script dans app/layout.tsx avec next/script et strategy="afterInteractive".
  2. 2Pour Next.js Pages Router, ajoutez-le dans pages/_app.tsx ou pages/_document.tsx à l'aide du chargeur de script recommandé par le framework.
  3. 3Pour un SPA React, chargez le script une fois dans le shell de l'application de niveau supérieur ou index.html, et non dans chaque composant de route.
  4. 4Ne créez pas de point de terminaison back-end ou de proxy pour cet extrait de widget public.
  5. 5Ne déplacez pas la clé API du widget public dans une variable d'environnement réservée au serveur privé, à moins que la build ne la renvoie toujours au navigateur.
  6. 6Conservez data-api-key et data-api-url exactement comme prévu.
  7. 7Après l'implémentation, dites-moi quel fichier a changé et comment tester que le widget s'ouvre et répond avec des citations.

Docusaurus Prompt​

Invite prête à copier
Docusaurus Prompt

Installez ChattyBox sur ce site de documentation Docusaurus.

Utilisez cet extrait de widget de mon tableau de bord ChattyBox :

Extrait du widgetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Exigences 
  1. 1Ajoutez le script une fois pour l'ensemble du site de documentation, de préférence dans src/theme/Root.tsx ou src/theme/Root.js.
  2. 2Conservez intacts le thème Docusaurus, la barre de navigation, le pied de page, les analyses et le comportement i18n existants.
  3. 3N'ajoutez pas le script à chaque page Markdown individuelle.
  4. 4Si le site propose des itinéraires localisés, utilisez data-locale uniquement en cas de besoin et faites-le correspondre à la langue actuelle de la page.
  5. 5Confirmez que le script inclut toujours data-api-key et data-api-url.
  6. 6Après la mise en œuvre, exécutez la build Docusaurus ou la commande de vérification des documents existants du projet.

WordPress ou CMS Prompt​

Invite prête à copier
WordPress ou CMS Prompt

Ajoutez ChattyBox à ce site Web WordPress ou CMS.

Utilisez cet extrait de widget de mon tableau de bord ChattyBox :

Extrait du widgetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Exigences 
  1. 1Ajoutez le script via le chemin de code personnalisé global le plus sûr disponible : scripts de pied de page de thème, un pied de page de thème enfant, un plugin de script d'en-tête/pied de page, la zone personnalisée globale HTML ou Google Tag Manager.
  2. 2Chargez-le sur des pages publiques, des publications, des documents et des articles de la base de connaissances où les visiteurs doivent poser des questions.
  3. 3Ne le chargez pas dans les pages d'administration, de paiement, de compte, de préparation uniquement ou d'adhésion privée, sauf demande explicite.
  4. 4Ne supprimez pas data-api-key, data-api-url ou async du script.
  5. 5Si le CMS a des modèles de langue distincts, définissez data-locale sur le code de langue correspondant, le cas échéant.
  6. 6Donnez-moi l'endroit exact où le script a été ajouté et un court plan de test du navigateur.

Google Tag Manager Prompt​

Invite prête à copier
Google Tag Manager Prompt

Créez des instructions pour installer ChattyBox avec Google Tag Manager.

Utilisez cet extrait de widget de mon tableau de bord ChattyBox :

Extrait du widgetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Exigences 
  1. 1Créez une balise HTML personnalisée avec le script exact ci-dessus.
  2. 2Utilisez un déclencheur Toutes les pages, sauf si je spécifie un ensemble plus restreint de pages publiques.
  3. 3Mentionnez les paramètres de consentement si ce conteneur GTM utilise le mode consentement.
  4. 4Incluez des vérifications en mode aperçu pour le déclenchement des balises, l'apparition du lanceur de widgets, l'envoi d'une question de test et l'apparition de citations.
  5. 5Ne suggérez pas d'ajouter des clés privées API ou des secrets de serveur à GTM.

Validation post-installation Prompt​

Invite prête à copier
Validation post-installation Prompt

Consultez cette installation ChattyBox pour être prêt au lancement.

Vérifiez ces exigences 
  1. 1Le script du widget est chargé une fois sur les pages publiques prévues.
  2. 2Le script inclut src="https://chattybox.ai/widget.js".
  3. 3Le script comprend data-api-key et data-api-url.
  4. 4La langue de la page et toute valeur data-locale correspondent au contenu de la page.
  5. 5La console du navigateur ne présente aucun attribut manquant ChattyBox, aucune clé non valide ou erreur d'origine.
  6. 6Le widget s'ouvre, envoie une question de test réaliste, des réponses à partir du contenu indexé et affiche les citations des sources.
  7. 7Le site n'expose pas de clés de serveur privées ou de secrets sans rapport.

Renvoyez tous les problèmes liés aux chemins de fichiers, aux références de code exactes et au plus petit correctif sûr.