Wachat · Web Chat Widget

A 4 KB bubble that actually closes deals

Drop one script tag and your site has a chat widget that pulls in your AI knowledge layer, routes to humans during business hours and falls back to bot otherwise. It knows the page the visitor is on, their UTM source, their cart contents and their previous conversations across every channel.

  • 4 KB gzipped — does not slow your LCP
  • Page-aware routing (pricing vs docs)
  • Hand off to WhatsApp with one tap
  • Fully themeable: colour, position, copy
The problem

Most chat widgets are LCP killers and lead leaks

Walk through the average B2B SaaS pricing page on a 3G connection and you will find a chat widget that adds 280 KB of JavaScript, blocks the main thread for 600 ms, and shows a "we typically reply in a few hours" message that has not been true since 2019. The visitor scrolls past, the page fails its Largest Contentful Paint budget, and Core Web Vitals tank the SEO score for the entire site. Worse, the lead does not get captured in the CRM because the widget vendor lives in its own silo — a different login, different identity model, different tagging convention.

E-commerce widgets have their own problems. They prompt aggressively, harvest emails to grow a marketing list that gets reported as spam, and have no idea that the visitor just abandoned a cart with three items. When the visitor does chat, the conversation lives in the widget vendor's app, separate from the brand's WhatsApp Business inbox where the same person was talking to support yesterday.

A modern web widget needs to be small enough to never affect performance, smart enough to know the page context, and connected enough to share state with WhatsApp, Instagram and email. It also has to gracefully hand off — a visitor who starts on web chat at 9pm should be able to continue on WhatsApp the next morning without retyping their problem.

What it is

Web Chat Widget, in depth.

Wachat's web widget is a 4 KB gzipped JavaScript shim that lazy-loads the full experience only when the bubble is clicked or after 8 seconds of idle time, whichever comes first. The initial paint adds zero blocking JavaScript and uses passive event listeners, so Core Web Vitals are unaffected. The full chat UI is React-based, loaded on demand, and supports streaming AI responses, file upload, voice messages, emoji and rich cards.

The widget knows what the visitor knows. It captures page URL, page title, scroll depth, time on page, UTM parameters, referrer and screen size on every message. Pricing-page visitors get auto-routed to a sales queue with a "Talk to sales" pre-fill; docs-page visitors get routed to support with a "Ask about the docs" pre-fill; checkout-page visitors who paused get a proactive nudge after 30 seconds of inactivity, offering help with the cart contents that Wachat already knows about via the Shopify or Razorpay integration.

Hand-off to WhatsApp is one tap. A visitor who has typed their question on web chat sees a "Continue on WhatsApp" button that captures their number, sends them an opt-in confirmation template, and continues the same conversation thread in the same shared inbox. Agents do not see a new ticket — they see the same one, now on a different channel, with full history intact. This is the single biggest lift for businesses with mobile-heavy traffic, because customers prefer mobile chat but bounce from desktop widgets.

Theming is comprehensive: bubble colour, position (bottom-right, bottom-left, mid-right), border radius, font family, dark mode, welcome message, idle nudge, attention-grabber animations, and CSS variables for every surface. The widget supports five languages out of the box (English, Hindi, Tamil, Bengali, Spanish) with full UTF-8 input and right-to-left support for future markets. Custom CSS is sandboxed inside a Shadow DOM, so your site's styles never bleed into the widget and vice versa.

Capabilities

Everything you get with Web Chat Widget.

7 capabilities
01

4 KB lazy-load shim

Initial script is 4 KB gzipped with zero blocking dependencies. Full chat UI lazy-loads on bubble click or after 8s idle. Lighthouse scores are unaffected — measured on a sample of 200 production sites.

02

Page-aware routing

The widget knows the page URL, UTM source, referrer and time-on-page. Build rules: pricing-page chats go to sales, docs-page chats to support, blog visitors to a growth bot. Pre-fills the composer with the most likely first message.

03

WhatsApp hand-off

One-tap continuation on WhatsApp: the widget captures the phone number, sends the Meta-approved opt-in template, and continues the same thread in the shared inbox. No "ticket #1234" friction, no retyping.

04

Proactive nudges

Trigger messages based on time on page, scroll depth, exit intent, returning visitor or specific URL patterns. The cart-page nudge can reference the actual items in the cart, pulled live from Shopify or Razorpay context.

05

AI fallback after hours

In business hours, visitors reach a human in under 60 seconds. Out of hours, the AI layer answers from your help centre, product catalogue and past resolved tickets — and queues a human follow-up at the start of the next business window.

06

Theming and i18n

Customise colour, position, font, dark mode and copy via the admin UI or JS config. Ships with five languages (English, Hindi, Tamil, Bengali, Spanish) and accepts custom locales. Shadow DOM isolation prevents CSS conflicts.

07

Identity and CRM sync

Pass the logged-in user's ID, email and JWT-signed attributes to identify visitors deterministically. The widget reconciles to the existing CRM contact, so a returning user sees their full conversation history across web, WhatsApp and email.

Use cases

Built for the way teams actually work.

SaaS
Case 01

SaaS pricing page conversion

A B2B SaaS routes pricing-page chats to AEs with a proactive nudge at 45 seconds: "Want a quote with your team size pre-filled?" The widget reads the segment selector on the page, pre-fills team size in the message, and routes the chat to the AE owning that segment. Demo bookings from pricing page are up 34%.

E-commerce
Case 02

Shopify cart recovery

A D2C apparel brand triggers a widget nudge when a visitor sits on the checkout page for 60 seconds without progressing. The nudge references the cart contents and offers a 5% off code in exchange for chatting. Recovered carts are tagged in the CRM and credited to the widget channel in analytics.

SaaS
Case 03

Docs-page support deflection

A developer-tooling startup uses the widget on its docs site with AI-first answers from the documentation corpus. 78% of chats are resolved without a human, freeing engineers to handle the 22% that involve real bugs or feature requests routed to the appropriate sub-team.

Education
Case 04

University admissions enquiry

A private university widget routes chats from the programme-detail page to the relevant admissions counsellor (MBA, BTech, MSc). Chats outside the 09:00-21:00 window get AI replies and a callback request that creates a CRM lead with the page context attached.

Healthcare
Case 05

Healthcare appointment booking

A specialist clinic widget pulls the doctor's next 5 available slots from the practice-management system and offers them inline as buttons. The visitor picks one, confirms via WhatsApp template, and the appointment is created in the EHR — no phone call, no email back-and-forth.

How it works

From signup to first send in minutes.

Web Chat Widget is included on every SabNode workspace. No separate billing, no extra setup — flip it on from your workspace settings.

  1. 01

    Paste the snippet

    Copy a 3-line script tag from the Wachat admin and paste it into your site head (or a Google Tag Manager tag). The bubble appears immediately with your default theme and welcome message.

  2. 02

    Style and theme

    Use the admin UI to pick brand colour, position, font, dark mode and welcome message. Preview against your live site in the embedded iframe before publishing changes.

  3. 03

    Wire CRM identity

    For logged-in users, call window.wachat.identify({ id, email, name, signature }) with a server-signed JWT so visitors are deterministically matched to existing CRM contacts.

  4. 04

    Build page rules

    Map URL patterns to teams, AI bots and proactive nudges. For example: pricing.* → sales team, /docs/* → AI bot with docs corpus, /checkout → cart-recovery flow.

  5. 05

    Monitor and tune

    Watch the widget dashboard: visitors who saw the bubble, who clicked, who chatted, who converted to a CRM contact, and who handed off to WhatsApp. Iterate nudges weekly based on the conversion funnel.

Plays well with

Works with the tools you already ship on.

ShopifyWooCommerceStripeRazorpayGoogle Tag ManagerSegmentHubSpot CRMSalesforce
Frequently asked

Questions about Web Chat Widget.

Can't find what you're looking for? Talk to our team.

Will the widget hurt my Core Web Vitals?
No. The initial script is 4 KB gzipped and uses defer + idle scheduling, so it adds zero blocking time to LCP. We benchmark on a rolling sample of 200 customer sites and the median Lighthouse Performance score moves less than 0.5 points when the widget is added. The full chat UI loads only on user interaction or 8-second idle.
Can I install it via Google Tag Manager?
Yes. Wachat ships a one-tag GTM template that handles initialisation, identity passing and consent gating. The tag respects Consent Mode v2 — if the user has not accepted analytics cookies, the widget loads in anonymous mode with no identity association. Once consent is granted, identity backfills automatically.
Does it work on single-page apps and Next.js?
Yes. The widget detects route changes via the History API and the Next.js router, so page-context rules fire on client-side navigation. There is a React SDK (npm install @wachat/widget-react) with a hook for identity and a typed event API. For App Router, the script tag goes in the root layout with the next/script strategy="afterInteractive".
How does it handle GDPR and DPDP consent?
The widget integrates with cookie consent platforms (OneTrust, Cookiebot, custom) via a published JS API. Until consent is granted, no cookies are written and identity is treated as anonymous. The widget can be configured to not appear at all until consent is granted, or to appear in a no-personalisation mode that still allows chatting.
Can I customise the welcome message per page?
Yes. Use the admin UI to set per-URL-pattern welcome messages, idle nudges and pre-fill text. For more control, call window.wachat.setContext({ welcome, prefill, nudge }) from your page JavaScript — useful for e-commerce sites that want to reference the specific product the visitor is looking at.
What happens if my visitor closes the tab mid-chat?
The conversation persists on the server, keyed by a long-lived widget ID stored in localStorage. When the visitor returns — same browser or a different page on the same domain — they see the full history. If they identified themselves with an email or phone, they can pick up the conversation from any device after sign-in.
Can the widget hand off to a sales rep with calendar booking?
Yes. The widget supports inline cards including Calendly, HubSpot Meetings and Google Calendar appointment slots. A flow can detect intent like "book a demo", check the AE's availability, and offer three time slots as buttons. Selecting one creates the meeting, sends a confirmation email and posts a WhatsApp reminder 24 hours before the call.
Wachat · Web Chat Widget

Ship web chat widget into production this week.

No credit card. No sales call required. Spin up a workspace, plug in a number, and your team is live in under an hour.