Summary
WebChat lets you add a live chat widget to your website so visitors can message your team directly. These conversations appear in your Team Inbox alongside your WhatsApp chats.
You can customize the widget to match your brand, collect visitor details with a pre-lead qualification form, and route incoming chats to the right team or operator.
This guide explains how to enable and style WebChat, set up a lead generation form, add the widget to your website, and manage incoming web chats in Team Inbox.
Note: WebChat is available on Wati's Growth, Pro, and Business plans.
Instructions
Step 1: Enable and style WebChat
Click the user profile icon in the top-right corner, then click Channel Status.
Select WebChat from the left navigation.
Use the Style Editor to customize the widget:
Set the display name.
Choose a color theme.
Add your branding.
Add a welcome message to greet visitors when they open the chat.
Step 2: Set up the pre-lead qualification form
You can collect visitor information before they start a conversation by enabling the lead generation form.
Open the Form section.
Set the Title, Subtitle, and placeholders for the form fields.
Hide any fields that aren't required for lead qualification.
Turn on the Lead Generation Form.
The information visitors submit through the form is available alongside their conversation in Team Inbox.
Step 3: Deploy and install WebChat
Open the Config section and select the platform where you want to deploy WebChat.
Check the Preview section to see how the widget will appear on your website.
Add the generated code to your webpage code.
Click Install to save your changes and enable WebChat.
To update the widget later, disable it, make your changes, and enable it again for the changes to take effect.
Install Wati's WebChat widget on any website
Wati's webchat widget works with the platforms your team already uses. Choose your setup method and go live in minutes:
Manual install — Copy and paste a single script tag just before the
</body>tag on any website. Works on any platform not listed below.Google Tag Manager — Deploy via a tag template inside your GTM container. No code changes needed.
Lovable — One-click integration.
Webflow — Embed via the custom code panel.
Shopify — Install via the Shopify App or embed directly in
theme.liquid.WordPress — Add via plugin or header injection.
Trickle — Integrate via the Trickle platform.
Installation tip: Don't host the script on CDNs — serving it directly ensures your webchat widget stays online when you need it most.
WebChat teams
When you install WebChat, Wati automatically creates a default team named Default Team WebChat. New web chat conversations are assigned to this team by default.
You can also create additional teams and give them access to the WebChat channel.
Step 4: Manage web chats in Team Inbox
Once WebChat is enabled, incoming messages from website visitors appear in Team Inbox under the WebChat channel.
From Team Inbox, you can:
View the information collected through the pre-lead qualification form beside the conversation.
Assign or reassign a chat to a different team or operator.
Close a conversation by selecting Solved in the Status section.
Web chat contacts are also added to the Contacts module, with the source set to WebChat.
Frequently Asked Questions (FAQs)
Getting started
1. Do I need to make every WebChat form field mandatory?
No. You can hide any field that isn't required for lead qualification and keep only the fields you need.
2. Where can I customize my WebChat branding and colors?
You can use the Style Editor in WebChat settings to set the display name, color theme, and branding.
3. Where can I select the website platform for WebChat?
You can select the website platform in the Config section. The Preview panel shows how the WebChat widget will appear before you embed the code.
Managing chats
4. Where do WebChat messages appear?
WebChat messages appear in Team Inbox under the WebChat channel, alongside your WhatsApp conversations.
5. Can I assign a WebChat conversation to a different team or operator?
Yes. You can assign or reassign a WebChat conversation to a different team or operator, just as you would a WhatsApp chat.
6. How do I close a WebChat conversation?
You can close a WebChat conversation by selecting Solved in the Status section.
Contacts and data
7. Are WebChat conversations saved?
Yes. WebChat conversations are retained permanently unless the visitor re-engages using a different browser, incognito mode, or device.
8. Are WebChat visitors added to Contacts?
Yes. Every WebChat contact is added to the Contacts module with the source set to WebChat.