Skip to main content
ChattyBox Logo

AI Builder Prompts

Use these prompts with Cursor, Claude, v0, Bolt, Lovable, Replit, or another AI builder when you want it to install ChattyBox for you.

Before pasting a prompt, copy the exact widget snippet from your ChattyBox dashboard. Keep the public widget API key and data-api-url exactly as shown.

Universal Prompt​

Add ChattyBox to this website.

Use this script from my ChattyBox dashboard:
<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Requirements:
1. Load the script once on every public page where visitors should see the chatbot.
2. Put it near the end of the body or use the framework's recommended script loader.
3. Do not expose private server API keys, admin tokens, environment secrets, or service credentials.
4. Keep the public ChattyBox widget API key exactly as provided.
5. Keep data-api-url exactly as provided by the ChattyBox dashboard.
6. If this site has language-specific pages, set data-locale to the page language or rely on the page's html lang attribute.
7. Verify the widget appears, opens, sends a test question, and shows source citations.

Next.js / React Prompt​

Install ChattyBox in this Next.js or React app shell.

Use this widget snippet from my ChattyBox dashboard:
<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Implementation requirements:
1. For Next.js App Router, add the script in app/layout.tsx with next/script and strategy="afterInteractive".
2. For Next.js Pages Router, add it in pages/_app.tsx or pages/_document.tsx using the framework's recommended script loader.
3. For a React SPA, load the script once in the top-level app shell or index.html, not inside every route component.
4. Do not create a backend endpoint or proxy for this public widget snippet.
5. Do not move the public widget API key into a private server-only environment variable unless the build still outputs it to the browser.
6. Keep data-api-key and data-api-url exactly as provided.
7. After implementation, tell me which file changed and how to test that the widget opens and answers with citations.

Docusaurus Prompt​

Install ChattyBox on this Docusaurus documentation site.

Use this widget snippet from my ChattyBox dashboard:
<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Requirements:
1. Add the script once for the whole docs site, preferably in src/theme/Root.tsx or src/theme/Root.js.
2. Keep the existing Docusaurus theme, navbar, footer, analytics, and i18n behavior intact.
3. Do not add the script to every individual Markdown page.
4. If the site has localized routes, use data-locale only when needed and match it to the current page language.
5. Confirm the script still includes data-api-key and data-api-url.
6. After implementation, run the Docusaurus build or the project's existing docs verification command.

WordPress or CMS Prompt​

Add ChattyBox to this WordPress or CMS website.

Use this widget snippet from my ChattyBox dashboard:
<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Requirements:
1. Add the script through the safest global custom code path available: theme footer scripts, a child theme footer, a header/footer script plugin, the CMS global custom HTML area, or Google Tag Manager.
2. Load it on public pages, posts, docs, and knowledge base articles where visitors should ask questions.
3. Do not load it in admin, checkout, account, staging-only, or private membership pages unless explicitly requested.
4. Do not strip data-api-key, data-api-url, or async from the script.
5. If the CMS has separate language templates, set data-locale to the matching language code when appropriate.
6. Give me the exact place where the script was added and a short browser test plan.

Google Tag Manager Prompt​

Create instructions to install ChattyBox with Google Tag Manager.

Use this widget snippet from my ChattyBox dashboard:
<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Requirements:
1. Create a Custom HTML tag with the exact script above.
2. Use an All Pages trigger unless I specify a narrower set of public pages.
3. Mention consent settings if this GTM container uses consent mode.
4. Include preview-mode checks for the tag firing, the widget launcher appearing, a test question sending, and citations appearing.
5. Do not suggest adding private API keys or server secrets to GTM.

Post-Install Validation Prompt​

Review this ChattyBox installation for launch readiness.

Check these requirements:
1. The widget script is loaded once on intended public pages.
2. The script includes src="https://chattybox.ai/widget.js".
3. The script includes data-api-key and data-api-url.
4. The page language and any data-locale value match the page content.
5. The browser console has no ChattyBox missing attribute, invalid key, or origin errors.
6. The widget opens, sends a realistic test question, answers from indexed content, and shows source citations.
7. The site does not expose private server keys or unrelated secrets.

Return any issues with file paths, exact code references, and the smallest safe fix.