How To Add Whatsapp Button On WordPress Website
Hello friends, Today we will see how to add a WhatsApp button to a WordPress website. Now lot of bloggers use WhatsApp or other social media buttons on their blogs to grab visitors. If you also want to add a WhatsApp button to your WordPress website, you’re in the right place. Let’s see how we can add a WhatsApp button on the website easily.
Why is adding a WhatsApp button on the website important?
Think about it—if your site doesn’t have social media links, even if you rank well on Google and attract traffic, that traffic might just leave. However, by adding social media links, you can retain that traffic and even use it to promote your new posts!
To get your posts featured on Google Discover, you need initial traffic. Including WhatsApp or other social media buttons on your website can help you keep that traffic and use it to grow your site.
Below, I’ve provided the HTML and CSS code for the WhatsApp button. Let’s see how we can use these codes to add the WhatsApp button to the WordPress website.
HTML and CSS Code for the WhatsApp Button
First, here’s the HTML and CSS code for the WhatsApp button. You can use this to add the button to your website:
HTML Code:
<a
href="Add Your Whatsapp Channel or Group Link here inside double quotes"
target="_blank"
rel="noopener noreferrer"
class="whatsapp-float"
aria-label="Join WhatsApp group">
<div class="whatsapp-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="bi bi-whatsapp"
viewbox="0 0 16 16">
<path
d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"
></path>
</svg>
</div>
</a>CSS Code:
.whatsapp-float {
position: fixed;
bottom: 20%;
right: 20px;
z-index: 1000;
}
.whatsapp-float:before {
content: "Join Group!";
position: absolute;
left: -110px;
top: 16px;
font-size: 15px;
background: #25d366;
padding: 5px 10px;
border-radius: 10px;
color: #ffffff;
}
.whatsapp-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #25d366;
display: flex;
justify-content: center;
align-items: center;
animation-name: pulse;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
}
80% {
box-shadow: 0 0 0 14px rgba(144, 237, 178, 0);
}
}
.whatsapp-icon svg {
fill: #fff;
width: 30px;
height: 30px;
}
This code will give you a fantastic WhatsApp button. Just replace your-group-or-channel-link with the link to your WhatsApp group or channel in HTML code.
How to Add Code to WordPress?
Now, you might think: How do you add this code to your WordPress website? Don’t worry, it’s very simple & easy! I’ll guide you through the process step by step. There are many ways to add this code, but in this guide, we will focus on using two plugins: Ad Inserter and WPCode Lite. Many of you are likely already using the Ad Inserter plugin if you’re using Google ads on your site. Let’s dive into how to do this easily, step by step.
1. Using the Ad Inserter Plugin:
To add the above codes using this plugin you need to first install it on your WordPress website if you haven’t installed it.
- First, go to your WordPress dashboard and Navigate to Settings > Ad Inserter.
- Open Ad Inserter Plugin and you will see blocks where you can add the code.
- Copy the HTML code and paste it into a block. Then, copy the CSS code and add it between <style> Add CSS Code Here </style> tags before pasting it.
- After adding both codes, check the boxes for posts, static pages, homepage, search pages, category pages, and tag/archive pages where you’d like to display the ad. Be sure to check all the options.
- Scroll down and find the “Insertion” option. Choose the Footer option.
- Finally, click the “Save Settings” button to save your changes.
2. Using WPCode Lite Plugin:
Another option is to use the WPCode Lite Plugin.
- Go to your WordPress dashboard and navigate to Code Snippets.
- Once there, click on the Header & Footer option.
- Scroll down to the footer section, add the HTML code, and click the “Save Changes” button in the top right corner.
- After adding the HTML code, you will see an option labelled “Add Snippet.” Click on it.
- Next, click on the “Add Custom Snippet” button under the “Add Your Custom Code (New Snippet)” section.
- You’ll be asked to choose the type of snippet. Select the CSS snippet.
- Give the snippet a name, then copy the CSS code from above and paste it into the snippet area.
- Finally, activate the snippet by clicking the toggle in the top right corner and save the snippet by clicking the “Save Snippet” button.
Follow the guide above step by step to add a WhatsApp button to your site. It’s very easy. If you are stuck or have any questions related to this, please feel free to comment below. I will definitely help you.
