Adding a WhatsApp Chat Button to your website

## Adding a WhatsApp Chat Button to your website


:::warning
This does not apply to WATI customers with Shopify or Woocommerce integrations. You can directly add the WhatsApp chat button from the integration page by going to WATI -> Integrations -> Shopify or Woocommerce -> Whatsapp Chat.

:::

You can add a WhatsApp Chat Button Widget to your custom website and connect it to your personal WhatsApp number. The widget is customizable with your branding and can be added to all pages of your website.

## Step By Step guide:

### Guide for WhatsApp Chat Button | Add a Chat Button to Your Website | WATI


1. Go to <https://www.wati.io/whatsapp-chat-button/> and Click on Generate Now

    ![](https://brainfish-storage-prod.s3.us-east-2.amazonaws.com/uploads/8ce9edeb-6728-4e9a-aea1-2080a897fd28/c5b48a35-1f1d-46ac-afe9-37bf8f15320c/migrated?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUPPN5IL3QLQZLDSU%2F20250509%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20250509T021546Z&X-Amz-Expires=3000&X-Amz-Signature=782d6cd78ed0e1811a0b969cae6b71fb022376c3bd5a7898ed9b55c1e3e2f4e8&X-Amz-SignedHeaders=host&response-content-disposition=attachment)
2. This text will show on your chat widget.

   
    ![](https://brainfish-storage-prod.s3.us-east-2.amazonaws.com/uploads/8ce9edeb-6728-4e9a-aea1-2080a897fd28/6bf949e7-699f-4647-b1d6-9d1ff81599b3/migrated?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUPPN5IL3QLQZLDSU%2F20250509%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20250509T021546Z&X-Amz-Expires=3000&X-Amz-Signature=f277b5de7bc81433d9ab1ee6362e22d23bff4ce1cdb885a19bca3abc6128f60a&X-Amz-SignedHeaders=host&response-content-disposition=attachment)
3. Click on Phone number to enter your Whatsapp account number

   
    ![](https://brainfish-storage-prod.s3.us-east-2.amazonaws.com/uploads/8ce9edeb-6728-4e9a-aea1-2080a897fd28/81986185-98d2-4a2b-8e54-05bb44b50de2/migrated?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUPPN5IL3QLQZLDSU%2F20250509%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20250509T021546Z&X-Amz-Expires=3000&X-Amz-Signature=c289d4377d082a9158754678fc157d09e5ed45045cc29f3f0b4f9967156f101f&X-Amz-SignedHeaders=host&response-content-disposition=attachment)
4. Click on Default user message to edit the default message.

   
    ![](https://brainfish-storage-prod.s3.us-east-2.amazonaws.com/uploads/8ce9edeb-6728-4e9a-aea1-2080a897fd28/f2564916-2d87-4600-8cfa-e674e2a8bc6c/migrated?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUPPN5IL3QLQZLDSU%2F20250509%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20250509T021546Z&X-Amz-Expires=3000&X-Amz-Signature=24dd16f0402acd682fe727befe14cf60bac332906d10b9c717b2bf024b7de60b&X-Amz-SignedHeaders=host&response-content-disposition=attachment)
5. Click on Generate Widget Code

   
    ![](https://brainfish-storage-prod.s3.us-east-2.amazonaws.com/uploads/8ce9edeb-6728-4e9a-aea1-2080a897fd28/18efe0e7-cb1c-4d29-ab99-0be999040569/migrated?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUPPN5IL3QLQZLDSU%2F20250509%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20250509T021546Z&X-Amz-Expires=3000&X-Amz-Signature=ebecc352cc2980a16351559f2998ac55e18fadf54d53a3324c853c273f2d6898&X-Amz-SignedHeaders=host&response-content-disposition=attachment)
6. Now you can copy and paste the code generated below on your webpage

   
    ![](https://brainfish-storage-prod.s3.us-east-2.amazonaws.com/uploads/8ce9edeb-6728-4e9a-aea1-2080a897fd28/222d365a-ed4b-4fa2-a116-ed9805bdc7d7/migrated?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUPPN5IL3QLQZLDSU%2F20250509%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20250509T021546Z&X-Amz-Expires=3000&X-Amz-Signature=4926ec61a3f5bb6bf7634ce468d8aaf042cf43a03d1dd303a14835ffb1f38e68&X-Amz-SignedHeaders=host&response-content-disposition=attachment)

After the code has been generated, paste the code snippet above the <body> tag for every webpage you need this chat widget.

WhatsApp Chat Button Integration

What is the difference between Whatsapp Business and WATI?

Get your own WATI custom Sub-domain

Creating click-to-chat link

How do I scan the QR Code on WATI Trial?

Backup WhatsApp Chats

How To Import WhatsApp Chats

Explore our Free trial

Book a demo with WATI Team

Try our product

How to Use a Phone Number Previously Registered With WhatsApp Business

How to Update the Connected Phone Number and Business Portfolio

How to Connect Your WhatsApp Number to Wati

Getting Free WhatsApp Business Phone Numbers from Meta

How to Reconnect your Phone Number to Wati

Understanding Your WhatsApp Phone Number Connection Status

Migrating Your WhatsApp Business Account from Another BSP to Wati

Connecting Your WhatsApp Phone Number to Facebook and Instagram

Creating a QR Code for Your WhatsApp Number

Choosing the Right Phone Number for WhatsApp

Phone Number Guide: Everything You Need To Know

Manage Multiple WhatsApp Numbers in a Single Wati Account

Connect Your Number

How to Enable Two-Factor Authentication (2FA) in Wati

Is Wati GDPR (General Data Protection Regulation) Compliant?

Wati Security and Data Management

How to Check Known Issues on Wati

Privacy & Security

General FAQs: Marketing Messages Lite (MM Lite) 

What are the most frequent problems encountered in the Embedded Signup process?

How to create or send your First Broadcast

Prerequisites before you Get Started with Wati

How to Create your First Chatbot

Creating Your Wati Account

How to Change or Update your Display Name on Wati

Guidelines to Choose your Display Name

How to Set Up or Update Your WhatsApp Account Profile

How to Change Your Timezone in Wati

How to Change the Language in Wati

Managing Notifications and Sounds in Wati

How to Configure Auto replies and OOO messages

How to Create Your First Template Message

How to Add your First Contact

Introduction to the Team Inbox

Marketing Messages Lite (MM Lite): All you need to Know

Getting Started

Steps to Complete Facebook Business Verification

How to Raise an Appeal for Account Review

How to Apply for Official WhatsApp Business Account (Blue Tick Verification)

A Deep Dive into WhatsApp Manager: What You Should Know

How to Check WhatsApp Business Account (WABA) Status

How to Access the WhatsApp Manager

WhatsApp Business Account (WABA): Everything You Need To Know

How to Find Your Facebook Business Manager ID (BMID)

How to Check If Your Business Is Verified by Facebook

Facebook Business Verification: Required Documents by Country

How to Enable the 'Start Verification' Button in Facebook Business Manager

How to Contact Facebook Team for Business Verification Issues

Reasons Why Your Business Can't be Verified

How to Increase Your WhatsApp Messaging Limit Without Meta Business Verification

Is Facebook Business Verification Required? 

Facebook Business Verification: Everything You Need To Know

Set Up Web-hooks for WhatsApp Business Account Notifications

How to Appeal if your Account is Banned due to WhatsApp Policy Violation

Why your Business Could be Rejected or Banned by WhatsApp? 

WhatsApp Commerce Policy Rejection (CPR)

Get Verified by Facebook

How to Export Chats in Wati

General FAQs: Wati 

Premium Customer Support

Basic Customer Support

Standard Customer Support

Types of Support Available at Wati 

How to Contact Wati Customer Support

Service Add-On: Premium Onboarding

Service Add-On: Technical Account Manager (TAM)

Service Add-On: Professional Services

Customer Support and Premium Services

Introducing Wati Mobile App UI 

Wati Mobile App Features: What's Included?

Wati Mobile App

How to Book a Demo with Wati

Explore Wati with a 7-Day Free Trial

How to Customize Your Wati Subdomain

How to Create WhatsApp Click-to-Chat Links

How to Scan the Wati Trial QR Code

How to Integrate WhatsApp Chat Button

Signing up for a Wati Trial

What is Wati - WhatsApp Team Inbox? 

Understanding Wati Add-Ons and Their Pricing

Understanding Wati's Pricing Structure

How to Estimate your Conversation Usage Cost

What is Conversation Based Pricing?

How to Check Credit Usage History

How to Set Up Auto Recharge for Credits 

How to Top Up or Add Credits in Wati

Understanding Wati Credits

Understanding Wati Plans

Understanding Monthly Chatbot Sessions

Understanding Automation Triggers and Their Cost

Wati Pricing: A Complete Guide

Introducing Pay-as-you-Go (PayG) Plan

Wati Vs WhatsApp Business: What's the Difference?

Wati Overview

How to Connect Multiple WhatsApp Numbers to your Wati Account

How to Connect Your WhatsApp Phone Number to Facebook and Instagram Pages

Getting Started with Rule-Based Automation in Wati

Understanding Automation Triggers in Wati

How to Create Keyword-Based Rules

How to Set Up Actions in Wati

How to Set Up Filters in Rules

How to Automatically Assign a Chat to the Last Assignee

Rule Based Automation

How to Create and Use WhatsApp Flows in Wati

Understanding Custom Attributes for WhatsApp Flows in Wati

Configuring Default Action in Wati

How to Use the Sequence Feature

Setting Up Reply Materials

What are Reply Materials?

Automation: Everything you need to know

Automating Replies with Keyword Matching

Understanding Keyword Actions

How to Set Up Keyword Actions

Setting Up Routing

How to Set Your Working Hours in Wati

Automation

How to Transcribe Audio Messages (Beta)

How to Start a New Chat

How to Add Contacts to Your Favorite List

How to Add Tags to Conversations in Wati

How to Add Custom Parameters or Attributes

How to Send Quick Replies and Canned Responses

How to Search and Filter Chats

How to Download Chat Transcripts in Wati

Managing Spam & Blocked Conversations

Troubleshooting: Wati Account Running Slow

How to Copy a Conversation URL in Wati

Supported Media Types and Sizes in Wati

Understanding Chat Statuses Team Inbox

Phone Number Masking in Team Inbox

Managing Customer Chats with Multi-Channel Team Inbox

How to Log Out Users from Active Sessions

Adding, Viewing or Removing Users in Wati

Working with Teams in Wati

Understanding Different Roles and Permissions

A Guide to Inviting your Team Members to Wati

Managing Your Team in Wati

Shared Team Inbox

Can I pause My Wati Subscription?

Understand Cancelling Wati Subscription

How Can I Add More Users?

How to reactivate your Wati subscription

Understand Upgrading or Downgrading Your Wati Plan

Why did my plan renew automatically?

View Your Wati Subscription Plan and Monthly Cost

Why Is My Wati Subscription Charge Higher Than Expected?

Wati Subscription: What You Need To Know

How to access Billing Portal or download invoices

Why Did I Get Charged Twice?

Understand Wati Billing Date and Subscription Cycle

What to Do If Your Wati Account Is Paused Unexpectedly

Wati Billing: A Simple Overview

Understand Payment Methods Accepted at Wati

How to Add or Update Wati's Payment Method

How to Troubleshoot Payment Failures

Understand Wati's Refund Policy

WATI Payment Process During Sign-Up: All You need To Know

Wati Payments: Everything You Should Know

RBI e-Mandate: Latest Guidelines Explained

Payments & Billing

Understanding Team Inbox Analytics in Wati

Understanding the Overview Section in Team Inbox

How to Schedule and Use the Team Inbox Report

Operator Performance Report

Analysis & Reporting

How to Send WhatsApp Reward Confirmations Using Eber and Wati

Syncing Welcome Message & Members

Connecting Wati to Eber: A Step-by-Step Guide

Wati & Eber Integration: Overview

Integrating Wati with Eber

How to Integrate Wati with WooCommerce

List of Available Fixed WooCommerce Variables in Wati

How to Use Pre-Defined WooCommerce Variables in Wati

How to Track ROI for Broadcast Campaigns in the Wati Shopify App

How to Integrate and Use the Wati Shopify App (with Wati Paid Account)

How to Try Shopify Integration During your Trial Period

List of Available Variables for Shopify Automated Messages in Wati

Using Predefined Variables in Wati Shopify App Template Messages

How to Set Up Cash On Delivery Automated Messages in Wati's Shopify App

How to Add or Import Your Shopify Contacts into Wati

Why are my Cash on Delivery(COD) Messages not Sending in Shopify?

Understanding Cash on Delivery and Abandoned Cart Analytics in the Shopify App

How to Display Product Images in Shopify Automated Messages

How to Enable Checkout Flow for Shopify Catalog Orders

Additional Custom Parameters Available in Wati Shopify App Customers

How to Enable Support For Your Shopify Store's Third-Party Checkout Providers in Wati