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​

Copy-ready prompt
Universal Prompt

Add ChattyBox to this website.

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

Next.js / React Prompt​

Copy-ready prompt
Next.js / React Prompt

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

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

Docusaurus Prompt​

Copy-ready prompt
Docusaurus Prompt

Install ChattyBox on this Docusaurus documentation site.

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

WordPress or CMS Prompt​

Copy-ready prompt
WordPress or CMS Prompt

Add ChattyBox to this WordPress or CMS website.

Use this widget snippet from my 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>
Requirements
  1. 1Add 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. 2Load it on public pages, posts, docs, and knowledge base articles where visitors should ask questions.
  3. 3Do not load it in admin, checkout, account, staging-only, or private membership pages unless explicitly requested.
  4. 4Do not strip data-api-key, data-api-url, or async from the script.
  5. 5If the CMS has separate language templates, set data-locale to the matching language code when appropriate.
  6. 6Give me the exact place where the script was added and a short browser test plan.

Google Tag Manager Prompt​

Copy-ready prompt
Google Tag Manager Prompt

Create instructions to install ChattyBox with Google Tag Manager.

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

Post-Install Validation Prompt​

Copy-ready prompt
Post-Install Validation Prompt

Review this ChattyBox installation for launch readiness.

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

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