) before the closing tag on any HTML, WordPress, Shopify, or React website."}},{"@type":"Question","name":"Is ToolsWallet RAG free to use?","acceptedAnswer":{"@type":"Answer","text":"Yes! Every developer account gets 2 permanently free Knowledge Bases (RAGs) with up to 25 records each, real-time streaming SSE API, and 1-line embeddable widgets with zero credit card required."}}]}]}
ToolsWallet RAG documentation v1.0. Learn how to build custom knowledge assistants with zero cost. ToolsWallet Platform
Documentation1-Line Widget
3 min readAugust 2026
Web Integration

1-Line Drop-in Chatbot Widget

Try in Console

The ToolsWallet RAG chat widget is a self-contained, lightweight (<14 KB) drop-in script. It connects directly to your knowledge base, streams answers token-by-token, and requires zero npm dependencies or complex build steps.

How the Widget Works

When placed on your website, the widget adds a floating chat bubble in the bottom right corner. When a visitor asks a question, the widget communicates with /api/v1/query/stream to stream answers in real-time.

  • •Zero Framework Lock-in: Works seamlessly on React, Vue, Svelte, Angular, WordPress, and raw HTML.
  • •Live Typewriter Stream: Tokens appear word-by-word with sub-50ms first-byte speed.
  • •CORS Domain Protection: Only allowed website domains can interact with your bot.

Embedding on HTML & Static Websites

Paste this single line directly before the closing </body> tag of your HTML page:

HTML
<script
  src="http://localhost:8081/widget.js"
  data-rag-id="YOUR_RAG_ID"
  data-api-key="tw_rag_live_YOUR_KEY"
  data-primary-color="#ea580c"
  data-title="Support Copilot"
  defer>
</script>

Embedding in Next.js & React

In your Next.js app/layout.tsx or React component, add the Next.js Script component:

JSX
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="http://localhost:8081/widget.js"
          data-rag-id="YOUR_RAG_ID"
          data-api-key="tw_rag_live_YOUR_KEY"
          data-primary-color="#ea580c"
          data-title="AI Support"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Embedding in WordPress, Shopify & Webflow

1. Go to your WordPress Admin > Theme Settings (or 'Insert Headers and Footers' plugin).

2. On Shopify, go to Online Store > Themes > Edit Code > theme.liquid.

3. Paste the script tag right above </body> and click Save. The chat widget will appear immediately on your storefront!

Customization Attributes

You can customize the widget appearance using simple HTML attributes:

AttributeDefaultDescription
data-rag-idRequiredYour Knowledge Base ID from Dashboard.
data-api-keyRequiredYour active `tw_rag_live_...` API key.
data-primary-color#ea580cHex color code for the chat bubble & header.
data-titleAI AssistantThe title displayed at the top of the chat window.
Ready to build your Custom RAG?
Deploy in under 3 minutes with 2 free RAG knowledge bases.
Create Free RAG