Hey there, bloggers and website owners! In today’s fast-paced world, making it easy for your visitors to get in touch with you is more important than ever. Whether you’re running a personal blog, an online shop, or a business site, providing a quick and simple way for people to reach out can really boost your engagement and conversions.
Imagine if your visitors could contact you directly through WhatsApp, Telegram or Google News with just one tap. Sounds pretty convenient, right? That’s exactly what a floating WhatsApp, Telegram or Google News button on your WordPress website can do. And the best part? I’ve got a custom-created code that I’m super excited to share with you!
In this article, I’ll walk you through how to add this handy feature to your site. It’s not just about sticking a button on your page; it’s about making meaningful connections with your audience effortlessly. So, let’s get into it and see how this floating WhatsApp, Telegram or Google News button can transform the way you interact with your visitors!
How to setup Floating WhatsApp Button In WordPress Website?
It’s very easy to set up a Floating WhatsApp Button on a WordPress website, so please follow our guide below.
Step 1: If you haven’t already, install the WP Code Plugin from the plugin section. Once installed, go to the WordPress dashboard and navigate to Code Snippets > Headers & Footers.
Step 2: Copy and paste the codes below into the footer section, then click Save Changes.
Floating WhatsApp Button
<a href="add your link here" target="_blank" class="shineads-whatsapp-float">
<div class="shineads-whatsapp-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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"/>
</svg>
</div>
</a>
<style>
.shineads-whatsapp-float {
position: fixed;
bottom: 20px;
margin-bottom: 200px;
right: 20px;
z-index: 1000;
}
.shineads-whatsapp-float:before {content:'Follow Us'; position: absolute;
left: -115px;
top: 16px;
font-size: 15px;
background: #25d366;
padding: 5px 15px;
border-radius: 30px;
color: #ffffff;}
.shineads-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(0, 136, 204, 0.5);
}
80% {
box-shadow: 0 0 0 14px rgba(0, 136, 204, 0);
}
}
.shineads-whatsapp-icon svg {
fill: #fff;
width: 30px;
height: 30px;
}
</style>
Floating Telegram Button
<a href="https://t.me/shineads" target="_blank" class="shineads-telegram-float">
<div class="shineads-telegram-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shineads-telegram" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09"/>
</svg>
</div>
</a>
<style>
.shineads-telegram-float {
position: fixed;
bottom: 20px;
margin-bottom: 200px;
right: 20px;
z-index: 1000;
}
.shineads-telegram-float:before {content:'Follow Us'; position: absolute;
left: -115px;
top: 16px;
font-size: 15px;
background: #0088cc;
padding: 5px 15px;
border-radius: 30px;
color: #ffffff;}
.shineads-telegram-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #0088cc;
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(0, 136, 204, 0.5);
}
80% {
box-shadow: 0 0 0 14px rgba(0, 136, 204, 0);
}
}
.shineads-telegram-icon svg {
fill: #fff;
width: 30px;
height: 30px;
}
</style>
Floating Google News Button
<a href="https://t.me/shineads" target="_blank" class="shineads-google-news-float">
<div class="shineads-google-news-icon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="144" height="144" viewBox="0 0 48 48">
<linearGradient id="L-XE1-AhSuENmensHMz7Ea_eGZs8grn6szD_gr1" x1="-57.494" x2="-46.494" y1="73.498" y2="84.498" gradientTransform="translate(68.993 -66.999)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33c481"></stop><stop offset="1" stop-color="#21a366"></stop></linearGradient><path fill="url(#L-XE1-AhSuENmensHMz7Ea_eGZs8grn6szD_gr1)" d="M9.999,7.006v23.988c0,1.107,0.9,2.007,2.007,2.007 h23.988c1.107,0,2.007-0.9,2.007-2.007V7.006c0-1.107-0.9-2.007-2.007-2.007H12.006C10.899,4.999,9.999,5.899,9.999,7.006z"></path><path fill-opacity=".047" d="M37.514,17.545l-9.729-7.271l10.215,1.493l0.001,4.241 L37.514,17.545z"></path><path fill-opacity=".071" d="M37.514,17.545l-9.729-7.271l10.215,2.132l0.001,3.603 L37.514,17.545z"></path><linearGradient id="L-XE1-AhSuENmensHMz7Eb_eGZs8grn6szD_gr2" x1="-50.347" x2="-31.391" y1="70.123" y2="89.079" gradientTransform="translate(70.438 -57.129)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f44f5b"></stop><stop offset="1" stop-color="#e5202e"></stop></linearGradient><path fill="url(#L-XE1-AhSuENmensHMz7Eb_eGZs8grn6szD_gr2)" d="M22.511,10.767l-5.837,21.14 c-0.269,0.976,0.304,1.987,1.279,2.256l20.898,5.769c0.975,0.269,1.985-0.303,2.255-1.279l5.837-21.141 c0.269-0.975-0.304-1.985-1.279-2.255L24.766,9.487C23.791,9.218,22.781,9.791,22.511,10.767z"></path><path fill-opacity=".047" d="M29.999,15.999l-4-5l1.507-0.753l2.492,0.688 L29.999,15.999z"></path><path fill-opacity=".047" d="M9.999,12.773L24.201,6.17 c0.916-0.425,2.007-0.027,2.432,0.888l1.407,3.025L9.999,12.773z"></path><path fill-opacity=".071" d="M9.999,13.309l14.201-6.603 c0.916-0.425,2.007-0.027,2.432,0.888l1.407,3.025L9.999,13.309z"></path><path fill-opacity=".071" d="M29.999,15.999l-4-5l1.507-0.753l1.84,0.507 L29.999,15.999z"></path><linearGradient id="L-XE1-AhSuENmensHMz7Ec_eGZs8grn6szD_gr3" x1="-57.175" x2="-40.639" y1="71.926" y2="88.462" gradientTransform="translate(61.113 -62.879)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffe074"></stop><stop offset="1" stop-color="#f8cf40"></stop></linearGradient><path fill="url(#L-XE1-AhSuENmensHMz7Ec_eGZs8grn6szD_gr3)" d="M1.11,17.969l7.489,20.576 c0.345,0.949,1.399,1.44,2.347,1.095l23.384-8.511c0.948-0.345,1.439-1.399,1.093-2.347L27.934,8.205 c-0.345-0.948-1.397-1.439-2.347-1.095L2.204,15.622C1.255,15.967,0.764,17.019,1.11,17.969z"></path><linearGradient id="L-XE1-AhSuENmensHMz7Ed_eGZs8grn6szD_gr4" x1="-57.523" x2="-32.956" y1="75.268" y2="99.834" gradientTransform="translate(67.502 -60.287)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#55adfd"></stop><stop offset="1" stop-color="#438ffd"></stop></linearGradient><path fill="url(#L-XE1-AhSuENmensHMz7Ed_eGZs8grn6szD_gr4)" d="M5.998,17.006v23.988c0,1.107,0.9,2.007,2.007,2.007 h31.988c1.107,0,2.007-0.9,2.007-2.007V17.006c0-1.107-0.9-2.007-2.007-2.007H8.004C6.898,14.999,5.998,15.899,5.998,17.006z"></path><path fill="#fff" fill-rule="evenodd" d="M24.999,25.001v-3.001 h10.004c0.549,0,0.997,0.448,0.997,0.997v1.007c0,0.549-0.448,0.997-0.997,0.997H24.999z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="M24.998,29.999v-3.001 h12.004c0.549,0,0.997,0.448,0.997,0.997v1.007c0,0.549-0.448,0.997-0.997,0.997H24.998z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="M24.999,34.999v-3.001 h10.004c0.549,0,0.997,0.448,0.997,0.997v1.007c0,0.549-0.448,0.997-0.997,0.997H24.999z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="M9.994,28.499 c0-3.591,2.913-6.505,6.505-6.505c1.795,0,3.423,0.729,4.6,1.908l-2.121,2.121c-0.635-0.635-1.512-1.029-2.479-1.029 c-1.935,0-3.505,1.572-3.505,3.505c0,1.935,1.571,3.505,3.505,3.505c1.933,0,3.505-1.571,3.505-3.505c0-0.169-0.013-0.336-0.036-0.5 h3.016c0.013,0.165,0.02,0.332,0.02,0.5c0,3.592-2.915,6.505-6.505,6.505C12.907,35.005,9.994,32.091,9.994,28.499z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="M16.998,28.001v2.001 h3.001l1-1.003l-1-0.999H16.998z" clip-rule="evenodd"></path>
</svg>
</div>
</a>
<style>
.shineads-google-news-float {
position: fixed;
bottom: 20px;
margin-bottom: 200px;
right: 20px;
z-index: 1000;
}
.shineads-google-news-float:before {content:'Follow Us'; position: absolute;
left: -115px;
top: 16px;
font-size: 15px;
background: #000;
padding: 5px 15px;
border-radius: 30px;
color: #ffffff;}
.shineads-google-news-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #000;
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(0, 136, 204, 0.5);
}
80% {
box-shadow: 0 0 0 14px rgba(0, 136, 204, 0);
}
}
.shineads-google-news-icon svg {
fill: #fff;
width: 30px;
height: 30px;
}
</style>
How do I add your WhatsApp group link, Telegram Channel Link and Google News link in the floating button?
In the provided code, replace “add your link here” with your WhatsApp group link, Telegram Channel Link and Google News link. Check below image
In this article, I have shared the code for WhatsApp, Telegram, and Google News floating buttons with all of you. It’s free to use and easy to integrate but has a significant impact. If you like my work, please share this post with your friends. Thank you!
Leave a Comment