WebChat.js — Free AI Chatbot Widget for Any Website (No Backend)

Features

Everything you need,
nothing you don't.

Production-ready from day one. WebChat.js handles the hard parts so you can focus on your site.

Zero-Impact Lazy Load

Guarantees 100/100 Core Web Vitals. The full UI and site scraping are deferred until the user interacts, ensuring your page load speed is never compromised.

Core Web Vitals Safe

Auto Web Scraping

On demand, WebChat silently reads your current page and all linked internal pages — building a rich knowledge base in seconds.

Up to 10 pages

Smart Offline Fallback

When all API providers fail, a local NLP engine answers from scraped content. Your bot never goes dark, regardless of API status.

Always available

Sentiment Detection

Detects frustrated, urgent, or happy users and adjusts tone automatically. Empathy built directly into the logic.

Realtime NLP

Dynamic Suggestions

Context-aware quick-reply chips generated from your actual site content — nav items, section headings, and FAQs.

Auto-generated

Fully Customizable

Colors, fonts, position, bot name, avatar. Dark/light/auto theme. Glassmorphism UI with smooth spring animations.

40+ options

Mobile First

Full-screen takeover on mobile with smooth slide-up animation. Touch-optimized, accessible, and fully responsive.

100% responsive

Smart Popups

Contextual engagement popups built from your scraped content. Stops automatically when the chat window is opened.

Content-aware

Export & Search

In-chat search, conversation export as JSON, reaction buttons (👍/👎), copy-to-clipboard, and read receipts.

Power user features

Installation

One line.
Infinite conversations.

Two ways to add WebChat.js to any website. Pick the one that fits your workflow. Lazy loading is enabled by default.

<!-- Add before </body> on any page -->
<script src="https://webchat-js.pages.dev/webchat.min.js"
  data-webchat
  data-deepseek-key="sk-YOUR_DEEPSEEK_KEY"
  data-groq-key="gsk_YOUR_GROQ_KEY"
  data-glm-key="YOUR_GLM_KEY"
  data-bot-name="My Assistant"
  data-primary-color="#7c3aed"
  data-accent-color="#00e5cc"
  data-position="bottom-right"
  data-theme="auto"
  data-lazy-load="true"
  data-lazy-scrape="true"
  data-enable-popup="true"></script>

<script src="https://webchat-js.pages.dev/webchat.min.js"></script>
<script>
const chat = new WebChat({
  deepseekApiKey: 'sk-xxx',
  groqApiKey:     'gsk_xxx',
  glmApiKey:      'xxx',
  botName:        'Maya',
  primaryColor:   '#7c3aed',
  accentColor:    '#00e5cc',
  position:       'bottom-right',
  theme:          'auto',
  lazyLoad:       true,
  lazyScrape:     true,
  enablePopup:    true,
  showBranding:   true,
});
</script>

<script>
// Split keys for basic obfuscation (optional)
const deepseekKey = ["sk-XXX.....", "............"].join("");
const groqKey = ["gsk_XXX.....", "............"].join("");

// Inject script dynamically with lazy load enabled
const s = document.createElement("script");
s.src = "https://webchat-js.pages.dev/webchat.min.js";
s.setAttribute("data-webchat", "");
s.setAttribute("data-deepseek-key", deepseekKey);
s.setAttribute("data-groq-key", groqKey);
s.setAttribute("data-bot-name", "Maya");
s.setAttribute("data-lazy-load", "true");
s.setAttribute("data-enable-popup", "true");
document.body.appendChild(s);
</script>

Configuration Options

Attribute	Type	Default	Description
data-deepseek-key	string	''	DeepSeek API key (priority 1)
data-groq-key	string	''	Groq API key (priority 2, free tier)
data-glm-key	string	''	GLM-4 API key (priority 3, free tier)
data-bot-name	string	'Site Assistant'	Chatbot display name in header
data-primary-color	color	'#7c3aed'	Main brand color (hex)
data-accent-color	color	'#00e5cc'	Gradient accent color (hex)
data-position	string	'bottom-right'	bottom-right \| bottom-left \| bottom-center
data-theme	string	'auto'	auto \| light \| dark
data-lazy-load	boolean	true	Defer UI init until interaction
data-lazy-scrape	boolean	true	Defer site scraping until chat opens
data-init-delay	number	2000	Lazy init fallback timeout (ms)
data-scrape-delay	number	500	Delay before scraping on open (ms)
data-enable-popup	boolean	true	Show contextual engagement popups
data-popup-interval	number	3000	Milliseconds between popups
data-max-popups	number	5	Max popups per session
data-bot-avatar	url	null	Custom avatar image URL

How it works

Five steps to
smart conversations.

Lazy Initialization

Script loads with zero performance impact. Only the toggle button renders initially. The full UI and scraping are deferred until the user interacts or a short timeout passes.

On-Demand Context Building

When triggered, extracts headings, section text, FAQs, contact info, navigation links, and structured lists. Builds a ~12,000-character knowledge context.

User Interaction

Message arrives → Sentiment detection (positive/negative/urgent/neutral) → Rate limit check → Context preparation with last N messages.

AI Response Pipeline

Tries DeepSeek → Groq → GLM-4 in priority order. Each provider gets 2 retry strikes before being skipped. Smart Local Fallback always catches the ball.

Beautiful Delivery

Typewriter animation renders the response. Suggestions refresh based on context. Read receipts, reactions, and copy button appear on hover.

Use Cases

Built for every
kind of website.

Whether you're a solo developer or a growing business — WebChat.js adapts to your content and your audience.

Personal Portfolio

Let visitors ask about your skills, projects, and availability without reading every section.

SaaS Landing Pages

Instantly answer pricing questions, feature comparisons, and integration queries from prospects.

Documentation Sites

Help developers find the right API endpoint, config option, or tutorial in seconds.

E-Commerce Stores

Answer shipping, return policy, and product specification questions to reduce support tickets.

Blogs & Publications

Guide readers to related articles, summarize long posts, and surface evergreen content.

Agency & Business

Qualify leads, answer service questions, and capture contact info — all automated, 24/7.

FAQ

Frequently asked
questions.

Everything you need to know about WebChat.js. Can't find an answer? Open an issue on GitHub.

What is WebChat.js?

WebChat.js is a free, open-source AI chatbot widget that you can embed on any website with a single script tag. It automatically reads your site's content, builds a knowledge base, and answers visitor questions using AI providers like DeepSeek, Groq, or GLM-4 — all without requiring any backend server, database, or API gateway. Think of it as a ChatGPT that already knows everything about your website.

Is WebChat.js really free?

Yes, WebChat.js is 100% free and open-source under the MIT license. The widget itself has zero cost. The AI providers offer free tiers: Groq provides a generous free tier with no credit card required, GLM-4 (BigModel.cn) offers free API access, and DeepSeek has very affordable pricing starting at fractions of a cent per request. Even with no API key at all, the built-in local fallback engine answers questions from your scraped site content at absolutely zero cost.

How does WebChat.js work without a backend?

WebChat.js runs entirely in the browser. When a user opens the chat for the first time, it fetches the current page and up to 10 internally linked pages using the Fetch API, extracting headings, paragraphs, FAQs, and navigation. This content is stored in the browser's memory and sent as context directly to AI provider APIs (DeepSeek, Groq, or GLM-4) from the client side. There is no intermediary server, no database, and no proxy — it's pure browser-to-API communication. If all APIs fail, a local keyword-matching engine answers from the scraped content.

Does WebChat.js slow down my website?

No. WebChat.js uses a two-stage lazy loading strategy designed to guarantee zero impact on Core Web Vitals. On initial page load, only a small toggle button (under 2KB of rendered DOM) is added. The full chat UI, all CSS styles, and the site scraping process are deferred until the user actually clicks the button — or after a configurable safety timeout (default: 2 seconds). This means your Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) scores remain completely unaffected.

Which AI providers does WebChat.js support?

WebChat.js supports three cloud AI providers in automatic priority order:

1. DeepSeek (Priority 1) — Highest response quality, best for nuanced answers.
2. Groq (Priority 2) — Ultra-fast inference using Llama models, generous free tier.
3. GLM-4 (Priority 3) — BigModel.cn's model, free tier available.

If all three fail or no API keys are configured, it automatically falls back to a built-in local NLP engine that answers from your scraped site content. Each provider gets 2 retry attempts before being skipped. The entire failover is invisible to the user.

Can I use WebChat.js with React, Vue, Next.js, or other frameworks?

Absolutely. WebChat.js is framework-agnostic because it operates as a vanilla JavaScript widget that creates and manages its own isolated DOM subtree. It does not conflict with virtual DOM diffing in React, Vue, Svelte, or any other framework. It works seamlessly with React, Vue, Angular, Next.js, Nuxt, SvelteKit, Astro, Hugo, WordPress, Shopify, Webflow, Wix, and any other platform that renders HTML. For framework integration, you can use the programmatic API (new WebChat({...})) for lifecycle control, or the simple script tag approach for drop-in installation.

How many pages can WebChat.js scrape?

WebChat.js scrapes the current page plus up to 10 internally linked pages, extracting approximately 12,000 characters of structured context. This limit is carefully calibrated to provide comprehensive coverage of your site while staying within AI provider token limits (typically 4K-8K context windows for free tiers) and maintaining fast response times. Only pages from the same domain are scraped — external links are automatically filtered out for security and relevance.

Is WebChat.js GDPR and privacy compliant?

WebChat.js is designed with privacy as a priority. Conversations are stored only in the browser's sessionStorage and are never sent to any server other than the AI provider API you explicitly configure. There is no built-in analytics tracking, no cookies, and no third-party data sharing. However, since chat messages are transmitted to your chosen AI provider (DeepSeek, Groq, or BigModel.cn), you should review that provider's data processing terms and include appropriate disclosures in your site's privacy policy. For maximum privacy, you can run WebChat.js with no API keys — the local fallback processes everything 100% client-side with zero data leaving the browser.

JavaScript API

Full programmatic
control.

Access the WebChat instance anywhere to trigger actions, inspect state, or integrate with your app.

chat.open()

Opens the chat window with animation and focuses input.

chat.close()

Closes the chat window and restarts popup manager.

chat.toggle()

Toggles open/closed state of the chat window.

chat.send(text)

Programmatically sends a message as the user.

chat.getHistory()

Returns the full conversation history array.

chat.getTokenUsage()

Returns prompt/completion/total token counts.

chat.setTheme(t)

Dynamically switch between 'light' and 'dark' themes.

chat.destroy()

Removes the widget and cleans up all styles and events.

window._webChat

Global reference available after auto-init via data attributes.

usage-examples.js
// Open chat when user clicks a custom button
document.getElementById('my-help-btn').addEventListener('click', () => {
  window._webChat.open();
});

// Pre-fill a message based on page context
if (location.pathname === '/pricing') {
  setTimeout(() => window._webChat.send('Tell me about pricing'), 2000);
}

// Export conversation on page leave
window.addEventListener('beforeunload', () => {
  const history = window._webChat.getHistory();
  console.log('Session ended:', history.length, 'messages');
});

Your website,
now talks back.

Everything you need,
nothing you don't.

Zero-Impact Lazy Load

Auto Web Scraping

Smart Offline Fallback

Sentiment Detection

Dynamic Suggestions

Fully Customizable

Mobile First

Smart Popups

Export & Search

Three providers.
One bulletproof bot.

User Message

Try DeepSeek

Try Groq

Try GLM-4

Local Fallback

One line.
Infinite conversations.

Configuration Options

Five steps to
smart conversations.

Lazy Initialization

On-Demand Context Building

User Interaction

AI Response Pipeline

Beautiful Delivery

Built for every
kind of website.

Personal Portfolio

SaaS Landing Pages

Documentation Sites

E-Commerce Stores

Blogs & Publications

Agency & Business

Frequently asked
questions.

Full programmatic
control.

Niloy Kanti Paul

Ready to add AI
to your website?

Your website,now talks back.

Everything you need,nothing you don't.

Zero-Impact Lazy Load

Auto Web Scraping

Smart Offline Fallback

Sentiment Detection

Dynamic Suggestions

Fully Customizable

Mobile First

Smart Popups

Export & Search

Three providers.One bulletproof bot.

User Message

Try DeepSeek

Try Groq

Try GLM-4

Local Fallback

One line.Infinite conversations.

Configuration Options

Five steps tosmart conversations.

Lazy Initialization

On-Demand Context Building

User Interaction

AI Response Pipeline

Beautiful Delivery

Built for everykind of website.

Personal Portfolio

SaaS Landing Pages

Documentation Sites

E-Commerce Stores

Blogs & Publications

Agency & Business

Frequently askedquestions.

Full programmaticcontrol.

Niloy Kanti Paul

Ready to add AIto your website?

Your website,
now talks back.

Everything you need,
nothing you don't.

Three providers.
One bulletproof bot.

One line.
Infinite conversations.

Five steps to
smart conversations.

Built for every
kind of website.

Frequently asked
questions.

Full programmatic
control.

Ready to add AI
to your website?