How To Add Whatsapp Chat Button in WordPress Website : With Plugin And Without Plugin Method

In today’s fast-paced digital world, businesses need quick and easy ways to communicate with their customers. One of the most popular and effective tools for customer communication is WhatsApp. If you’re looking to integrate a WhatsApp widget into your WordPress website, you’re in the right place! In this post, we’ll walk you through two simple solutions that will allow you to add a WhatsApp widget to your site: one using a WordPress plugin and the other using HTML and CSS code.

Solution 1: Add WhatsApp Chat Button Using the Chatzap Plugin

The easiest way to add a WhatsApp widget to your WordPress website is by using the Chatzap plugin. This method requires no coding knowledge and is user-friendly, making it perfect for beginners and busy website owners who want to get started quickly.

Here’s how it works:

1. Install the Plugin:
   • Download the Plugin ZIP File: Download Here
   • Go to your WordPress dashboard.
   • Navigate to Plugins > Add New Plugin > Upload Plugin
   • Upload the downloaded ZIP file and click Install Now
   • After installation, click Activate.
2. Configure the Widget Settings:
   • After activation, go to Chatzap Settings from the WordPress dashboard menu.
   • Enter your WhatsApp number and set a Default Message that you want to appear when users click on the widget.
   • Choose your preferred widget size in px for a customized look.
   • Toggle the Enable/Disable option to easily turn the widget on or off whenever needed.
   • Once configured, the WhatsApp widget will appear on your website, allowing visitors to quickly reach you with just one click.

Why Choose Chatzap?

• No coding required: Perfect for non-tech-savvy users.
• Customizable options: Easily set your preferred message, widget size, and toggle visibility.
• User-friendly interface: Everything is managed from the WordPress dashboard.

Solution 2: Add WhatsApp Chat Button Using HTML and CSS Code ( Without Plugin )

If you’re more comfortable with coding or want to have more control over the design, you can manually add a WhatsApp widget to your website using a simple HTML script and custom CSS.

Here’s how you can do it:

1. Add HTML Script in footer.php:
   • In your WordPress dashboard, go to Appearance > Theme Editor.
   • Open the footer.php file and paste the provided HTML script before the closing </body> tag.

<a href="YOUR WHATSAPP LINK" class="whatsapp-chat" target="_blank">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="Chat with us on WhatsApp">
</a>

• Generate your whatsapp link from below and replace YOUR WHATSAPP LINK on the above code.

3. Save the file

4. Customize the Widget’s Appearance Using CSS:
   • Go to Appearance > Customize > Custom CSS.
   • Add the provided CSS code to style the widget according to your preferences (e.g., widget position, size, and color).

.whatsapp-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    border-radius: 50%;
    background-color: #25D366;
    padding: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.whatsapp-chat:hover {
    transform: scale(1.1);
}

.whatsapp-chat img {
    width: 60px;
    height: 60px;
}

5. Save Changes:
   • After saving the changes, your WhatsApp widget will be visible on your website and ready for use.

Why Choose HTML & CSS Method?

• Full control over customization: You can design the widget exactly how you want it.
• No plugin overhead: This method doesn’t require installing any plugins.
• Better performance: Direct integration via HTML and CSS can be faster and lighter.

Which Solution Should You Choose?

• If you prefer a hassle-free, quick setup with easy configuration: The Chatzap Plugin is your best bet.
• If you have experience with coding or want more design flexibility: The HTML and CSS method will give you complete control.

Conclusion: No matter which method you choose, adding a WhatsApp widget to your WordPress website is an excellent way to improve customer engagement and make communication easier. Whether you go with the Chatzap plugin for simplicity or the HTML & CSS method for full control, your visitors will appreciate the convenience of being able to message you directly through WhatsApp.