Home/Features/Chat Widget

Website

AI Website Chat Widget with WhatsApp Handoff

Add an AI chat widget to your website that answers from your own knowledge base, captures leads, and hands off to a human agent in your WhatsApp inbox when needed.

By Chirag Darji · Updated 26 Aug 2026 · 11 min read

Plans: All plans, including Free. Widget count is capped by plan (1 on Free, 10 on Starter and Growth, unlimited on Scale); every widget capability (AI, knowledge base, lead capture, handoff, custom branding) ships at every tier. The AI assistant behind the widget needs a configured provider key; Groq is free to connect, and the assistant feature itself requires Growth or above unless your org is grandfathered.

On this page
  1. What you get
  2. How it works
  3. How does the AI decide what it can answer?
  4. What happens when the AI cannot help?
  5. Can the widget capture leads and book appointments?
  6. How does the widget recognise a returning visitor?
  7. With VGraple CRM vs a basic live chat widget
  8. Who uses it
  9. What Meta allows
  10. Plans and limits
  11. Recent improvements
Chat widget setup in VGraple CRM: appearance, welcome message, position and AI settings

In short

  • One script tag adds a full AI chat widget to any website, no developer required
  • Each widget has its own knowledge base, branding, AI model choice, and lead form
  • The same widget config can also power your Instagram and Messenger AI automation
  • When the AI cannot help, the conversation lands in your shared team inbox with the full transcript attached

The VGraple CRM chat widget is an AI-powered live chat panel you add to your website with one script tag. It answers visitor questions from a knowledge base you control, captures a name, email and phone number, and hands the conversation to a human agent in your shared inbox the moment it cannot help or the visitor asks for one. What changes for a business is that a website stops being a dead end for a question: a visitor gets an answer at 11 p.m. on a Sunday, and if they are worth following up with, they show up as a lead or a WhatsApp contact your team can act on Monday morning.

What you get

  • A one-line embed (<script> tag) that adds the widget to any website platform, no developer needed
  • Multiple widgets per account, each with its own knowledge base, branding, AI model and lead form
  • An AI assistant that answers from your uploaded FAQs, documents and pasted content, not the open internet by default
  • A configurable lead capture form (name, email, phone with country code) that creates a contact and, optionally, a lead
  • Live hand-off to your shared team inbox with the full AI transcript attached, so a human never starts cold
  • Custom branding: colour, greeting, launcher position, and a bot-disclosure message on your schedule
  • The option to extend the same bot to your Instagram and Messenger DMs from one configuration
  • A domain allow-list so the widget only loads (and only accepts messages) on sites you approve

How it works

  1. Create a widget and add knowledge. Go to Settings, open Chat Widgets, and create a new widget. Give it a name, a header title and subtitle, a welcome message and a primary colour. On the Knowledge tab, paste FAQs, upload documents, or add a URL for the assistant to learn from; each widget's knowledge can be scoped to itself or shared with your other widgets and your WhatsApp AI chatbot.

Chat widgets list in VGraple CRM

  1. Choose what the AI is allowed to do. Pick an AI model from whichever provider you have a key for (a hosted Groq model is free to start with), then turn on the actions you want: capture leads, request appointments, search your catalog for live prices, or hand off to a human. Set a fallback message for anything outside its knowledge, and decide whether it should offer a human the moment a visitor sounds frustrated.

  2. Configure the lead form and domain whitelist. Turn on lead capture and choose which fields to show and require (name, email, phone with a country-code picker), and pick the pipeline a captured lead should land in. Add the domains the widget is allowed to run on; leave it empty while testing.

  3. Copy the embed code and go live. On the Embed Code tab, copy the two-line script tag, which carries your widget's unique token, and paste it into your site just before the closing body tag. The launcher appears immediately; nothing else needs deploying on your side.

  4. Watch conversations and handoffs. Every widget conversation is visible from your team inbox once it hands off, tagged as a web chat conversation with the AI's transcript above the handoff point. Anything the AI captured, name, email, phone, and any lead it created, is attached to the conversation.

How does the AI decide what it can answer?

The widget's AI reads only what you have given it: uploaded files, pasted FAQs, and pages you point it at, chunked and indexed for retrieval. Turning on Knowledge Only mode restricts every answer strictly to that content, refusing anything outside it instead of improvising from general knowledge. Without Knowledge Only, the assistant can reason more broadly but is still steered by your system prompt and the knowledge it was given first.

VGraple CRM shared inbox with the conversation list filtered by channel, unread and resolved tabs

Each widget's knowledge base can stand alone or share content with your other bots. A business running one widget for its pricing page and one for its help centre can keep them separate, or point both at the same product knowledge and let only the tone and greeting differ.

Example

A coaching institute runs two widgets from one account: one on its admissions page trained on course fees, batch timings and eligibility, and one on its student portal trained on the refund and attendance policy. Both share the same knowledge base for course content but have different greetings and different lead forms.

What happens when the AI cannot help?

The assistant has an explicit action for escalating to a human, and it can also recognise a direct request ("talk to a person") or, if you turn the setting on, a visitor who sounds frustrated. Handoff moves the conversation into your shared team inbox as a normal thread, with the AI's transcript shown above the point where a human takes over, so the agent sees exactly what was already discussed instead of asking the visitor to repeat themselves.

If no agent is online when a handoff happens, the conversation still sits in the inbox waiting; a visitor who left a phone number during the chat can be followed up with directly, including on WhatsApp with their consent. The widget itself does not send a WhatsApp deep link automatically; the continuation onto WhatsApp is something your team does once you have their number.

Can the widget capture leads and book appointments?

Yes, both are optional actions you turn on per widget rather than something bolted on afterwards. Lead capture shows a short form for name, email and phone (with a country-code picker covering more than 30 countries) and, on submit, creates a contact and can create a lead in a pipeline you choose. The AI can also collect the same details conversationally and call the same capture action mid-chat instead of waiting for a form.

Appointment requests work the same way: if you enable the action, the assistant can take a preferred date, time and service, create an appointment request, and notify your team to confirm it, all inside the chat rather than sending the visitor to a separate booking page.

ActionWhat it does
Capture leadsSaves an interested visitor as a lead with the details they share
Request appointmentsTakes a booking request with a preferred time and notifies your team to confirm
Answer from catalogLooks up your connected product or service catalog and quotes a live price
Hand off to humanEscalates the chat to your shared inbox when the visitor needs a person

How does the widget recognise a returning visitor?

A visitor is identified by a random ID the widget stores in their browser, scoped to that specific widget's token so two different bots on the same page never mix up conversations. If the site that embeds the widget also knows who the visitor is, for example a logged-in customer, it can pass that identity to the widget, and VGraple CRM will match them to the same contact by that identity rather than the browser ID, so the same person resumes their thread even from a new device or after clearing their browser storage.

With VGraple CRM vs a basic live chat widget

A basic live chat widgetVGraple CRM chat widget
Answers when no one is onlineA contact form or silenceAI answers instantly from your own knowledge base, any hour
Knowledge sourceScripted canned responses you write and maintainUpload documents or FAQs; the assistant retrieves from them directly
Multiple botsUsually one bot per account, or a costly add-onMultiple widgets per account, each with its own knowledge and branding, within your plan's limit
Handoff to a humanA separate helpdesk tool, context often lostLands in the same shared inbox as your WhatsApp conversations, transcript attached
Lead captureA static form, no conversational fallbackA configurable form plus a conversational capture action the AI can call mid-chat
Follow-up channelEmail only, or nothingA contact with a phone number can be followed up with on WhatsApp
Cross-channel reachWebsite onlyThe same configuration can extend to Instagram and Messenger DMs
Domain securityOften noneAn allow-list of up to 20 domains enforced on every request

Who uses it

D2C stores put a widget on the product and checkout pages, trained on shipping, sizing and return policy, so a shopper gets an answer before they abandon the cart and a genuinely interested visitor becomes a WhatsApp contact. See WhatsApp CRM for D2C.

Coaching institutes and schools use a widget on the admissions page to answer fee and batch questions instantly and capture a lead the moment someone asks for a callback. See WhatsApp CRM for education.

Clinics run a widget trained on services, doctor availability and insurance questions, handing any booking request to the front desk's inbox instead of leaving a patient to call during business hours. See WhatsApp CRM for healthcare.

Real-estate agencies put a widget on listing pages to qualify buyers on budget and locality before a human agent picks up the conversation. See WhatsApp CRM for real estate.

What Meta allows

Meta policy

The chat widget itself runs on your own website, so it is not subject to WhatsApp Cloud API rules directly. Meta does require any automated assistant that a person might mistake for a human to identify itself as automated; the widget's bot-disclosure message and repeat interval exist to satisfy that in an ongoing conversation, not just on first contact.

Where a widget conversation later continues on WhatsApp, because your team messages a contact who shared their number, the normal WhatsApp rules apply from that point: outside a 24-hour customer service window you need an approved template, and marketing sends are subject to the same opt-out and frequency rules as any other WhatsApp conversation on your account.

Plans and limits

The chat widget ships on every plan, including Free, which includes one widget; Starter and Growth include up to 10 widgets each; Scale is unlimited. Every capability described on this page, the AI actions, knowledge base, lead capture, custom branding, and the domain allow-list, is available at every tier. The underlying AI assistant needs a connected provider key (a hosted Groq model is free to use); the AI assistant as a plan feature requires Growth or above unless your organisation was grandfathered in before the gate shipped.

Recent improvements

  • 2026-08-24: The inbox AI status chip was fixed to count active Flow Builder automations correctly, and the free hosted model was moved to a newer, higher-quality model after the previous one was retired by its provider.
  • 2026-08-15: web_chat was made an explicit, always-on entry in a widget's channel list, closing a gap where an older config saved without it could silently stop answering.
  • 2026-08-15: The Meta DM escalation engine shipped, adding the guardrails and settings that let the same widget configuration safely automate Instagram and Messenger conversations, not only the website widget.
  • 2026-08-15: The AI now falls back to whichever provider your organisation actually has a working key for, instead of failing silently when the previously selected provider's key was removed.

Frequently asked questions

Does the chat widget require coding to install?
No. You paste one script tag from the widget's Embed Code tab into your site, just before the closing body tag. It works on WordPress, Webflow, Shopify or plain HTML, and most platforms have a custom code section for exactly this.
How does the AI know about my business?
Each widget has its own knowledge base. You upload documents or paste FAQs, pricing and policies, and the AI answers only from that content (when Knowledge Only mode is on) or from that content plus general reasoning. If it does not know, it offers to hand off to your team.
Can I run different widgets on different websites?
Yes. Create multiple widgets, each with its own knowledge base, branding, embed token and lead form. An agency or multi-brand business can run a separate bot per site from one account, up to the widget limit on its plan.
Will the widget slow down my website?
The script is dependency-free and loads asynchronously; the chat panel itself is a lazy-loaded iframe that only fetches when a visitor opens it, so an unopened widget costs almost nothing on page load.
What happens when a visitor wants a human?
The AI has an explicit hand-off tool it can call, and a visitor can also ask directly. The conversation moves into your shared team inbox with the full AI transcript attached, so an agent has context instead of starting cold.
Do web chat visitors become WhatsApp contacts?
Only if they share a phone number, through the lead capture form or in conversation. That creates a contact your team can message on WhatsApp with consent. A visitor who never shares a number stays a web-only conversation.
Can the widget also handle Instagram and Messenger DMs?
The same chatbot configuration that powers your web widget can be extended to Instagram and Messenger, so one knowledge base and one AI model answer across all three channels from a single settings screen, without building three separate bots.
Can I restrict the widget to only load on my own domain?
Yes. Add up to 20 allowed domains and the widget's session and message endpoints reject requests from any other origin. Leave the list empty during testing and lock it down before launch.
Does the widget disclose that visitors are talking to a bot?
You set a bot disclosure message and how often it repeats (in hours) for a returning visitor, which is how the widget meets the plain requirement that an automated assistant identify itself.
Can the widget book appointments or check pricing, not just answer questions?
Yes, if you turn those actions on for the widget. Beyond answering from the knowledge base, the AI can capture a lead, request an appointment with a preferred time, search your product catalog for a live price, or escalate to a human, each as a separate toggle.

Run your WhatsApp on VGraple CRM

Free forever plan, official Meta WhatsApp Business API, set up in 15 minutes. No card needed.