Summary
Adding a WhatsApp chat button to your website makes it easy for visitors to start a conversation with your business. With Wati's WhatsApp Chat Button Widget, you can create a customizable chat button and add it to your website in just a few steps.
This guide explains how to generate the widget, customize its appearance and message, and add it to your website. It also covers the setup process for Shopify and WooCommerce stores.
Instructions
Before you begin
Wati customers using Shopify or WooCommerce can add a WhatsApp chat button directly from the integration settings.
To access the setup page:
Log into your Wati account.
Go to Connectors > Integrations.
Select Shopify or WooCommerce.
Open WhatsApp Chat and follow the setup instructions.
If you have a custom website, follow the steps below to generate and install the WhatsApp Chat Button Widget.
How to create a WhatsApp chat button
Step 1: Open the WhatsApp Chat Button tool
Go to the Wati WhatsApp Chat Button page.
Click Generate Now.
Step 2: Customize the chat widget
Configure the widget based on your business requirements.
Enter your WhatsApp number
Select Phone Number.
Enter the WhatsApp number that should receive incoming messages.
Customize the default message
Select Default User Message.
Enter the message that visitors will see when they open the chat.
Example:
Hi, I would like to know more about your services.
This message is automatically pre-filled for visitors, making it easier for them to start a conversation.
Step 3: Generate the widget code
Once you have finished customizing the widget:
Click Generate Widget Code.
Copy the generated code snippet.
Add the widget to your website
Open your website's source code.
Paste the generated code snippet immediately above the closing
</body>tag.Save and publish your changes.
Add the code to every page where you want the WhatsApp chat button to appear.
Verify your setup
After adding the widget to your website:
Open your website in a browser.
Confirm that the WhatsApp chat button is visible.
Click the button to verify that it opens a WhatsApp conversation with the correct phone number and pre-filled message.
Best practices when adding WhatsApp chat button to your website
Use a friendly default message to encourage visitors to start a conversation.
Test the widget on both desktop and mobile devices.
Customize the widget appearance to match your website branding.
Ensure the configured WhatsApp number is active and able to receive messages.
Result
Once the widget is installed, visitors can start a WhatsApp conversation with your business directly from your website. This provides a faster and more convenient way for customers to reach you, helping improve engagement and response times.
Frequently Asked Questions (FAQs)
General
1. What is the WhatsApp Chat Button Widget?
The WhatsApp Chat Button Widget is a tool that allows you to add a WhatsApp chat button to your website. Visitors can click the button to start a conversation with your business directly on WhatsApp.
2. What information do I need to create a WhatsApp chat button?
You need:
A WhatsApp number that will receive incoming messages
An optional default message that will be pre-filled when visitors open the chat
3. What is a default user message?
A default user message is a pre-filled message that visitors see when they open the WhatsApp chat. It helps visitors start a conversation more quickly.
Shopify and WooCommerce
4. Can I add a WhatsApp chat button directly from Shopify or WooCommerce?
Yes. Wati customers using Shopify or WooCommerce can add a WhatsApp chat button directly from the integration settings available under Connectors > Integrations > Shopify/WooCommerce > WhatsApp Chat.
Installation
5. Where should I place the WhatsApp Chat Button Widget code on my website?
The generated widget code should be pasted immediately above the closing </body> tag of your website.
6. Can I display the WhatsApp chat button on multiple pages?
Yes. Add the generated widget code to every page where you want the WhatsApp chat button to appear.
Verification and best practices
7. How can I verify that the WhatsApp chat button is working correctly?
After adding the widget code to your website:
Open your website in a browser.
Confirm that the WhatsApp chat button is visible.
Click the button and verify that it opens a WhatsApp conversation with the correct phone number and pre-filled message.
8. What are the best practices for using a WhatsApp chat button on a website?
To improve the visitor experience:
Use a friendly default message to encourage conversations.
Test the widget on both desktop and mobile devices.
Customize the widget appearance to match your website branding.
Ensure the configured WhatsApp number is active and able to receive messages.