Most used plugins and how to add the WhatsApp button to your website

WhatsApp plugins are software extensions or components that allow you to add a WhatsApp chat button or functionality to your website for direct communication with users.

Having a WhatsApp button on your website can facilitate communication with your audience. In this article, we have compiled some plugin recommendations and a guide to adding it to your website.

Most Popular Plugins for Adding the WhatsApp Button

Get to know the most used plugins for adding the WhatsApp button to your website:

WhatsApp Chat for WordPress

This plugin is specifically designed for WordPress websites and enables you to add a WhatsApp chat button to web pages.

It offers customizable features such as button style, position on the page, and pre-defined welcome messages.

WhatsApp Chat Widget

This universal plugin can be used on different types of websites and allows you to add a WhatsApp button in a fixed position on the site, such as a floating bar or corner of the page.

The only customizations available are the initial message and whether to display the profile picture.

It's important to note that there are various plugins available for adding the WhatsApp button. We've provided these two recommendations, but we recommend researching and evaluating the plugin that best suits your needs and is compatible with your website platform.

Steps to Add the WhatsApp Button to Your Website

In this guide, we will teach you how to install and configure the WordPress plugin to add the WhatsApp button to your website:

Installing the Plugin

1. Log in to your WordPress site's admin panel. Go to the left sidebar, click on Plugins, and select Add New.

2. In the search field, type "WhatsApp Chat for WordPress" or, alternatively, you can choose the plugin "WhatsApp Chat Widget," and press Enter.

3. Locate the plugin in the search results and click on Install Now.

4. After installation, activate the plugin by clicking on Activate.

Configuring the Plugin

1. In the left sidebar of the admin panel, click on "WhatsApp Chat" or "Widgets" to access the plugin's settings.

2. In the General Settings section, enter the phone number associated with your WhatsApp account, which is also registered in Zenvia Conversion.

3. Customize the display options, such as button style, position on the page, and greeting message.

4. Save the changes made.

5. Visit your website to verify that the WhatsApp button is displayed correctly.

💡 Tip: Perform tests to ensure that the button is always visible, whether by scrolling the page or navigating to different pages.

How to create a floating WhatsApp button on a landing page or website

In addition to plugins, there is another option to add a floating WhatsApp button to your website or landing page. Follow the steps below:

1. Get the WhatsApp link

First, you need to obtain the WhatsApp link that will be used to direct users to the WhatsApp conversation.

The link should be in the format: https://api.whatsapp.com/send?phone=XXXXXXXXXXX, where "XXXXXXXXXXX" is the phone number in international format, without the "+" sign or other special characters.

Check out our article How to create a link to your WhatsApp number to learn more about this.

2. Create the HTML code

Next, you need to create the HTML code (a computer language for creating web pages) to add to the creation of your floating button.

Here's a basic example of the code:

html

<a href="https://api.whatsapp.com/send?phone=XXXXXXXXXXX" target="_blank" class="whatsapp-float">

<i class="fa fa-whatsapp"></i> Contact via WhatsApp

</a>

3. Customize the floating button

You can customize the style of the floating button using CSS (a mechanism for adding visual styles to your web page). Here's a basic example to style the button:

css

.whatsapp-float {

position: fixed;

bottom: 20px;

right: 20px;

background-color: #25d366;

color: #fff;

padding: 10px 15px;

border-radius: 50px;

text-decoration: none;

z-index: 9999;

}

4. Add the code to your website

Copy and paste the HTML and CSS code into the source code where you want to display the floating WhatsApp button, whether it's a landing page or website. Make sure the button's position and visual style align with your preferences.

Done! Now you can use this feature on your website along with our platform to ensure direct communication with your audience via WhatsApp.

Hi, Humans. How may we help you?