BloggerByteHow to Make Whatsapp Chat Buttons on Blog with SVG - The direct chat WhatsApp button is usually used by users of blogs / websites who wish to make it easier for visitors to communicate via WhatsApp chat.
A variety of ways from them to put the whatsapp chat button, there are shaped buttons that are embedded after the articles they write and some are placed at the bottom of the blog page with a floating position.
It's true, if someone says that providing a direct WhatsApp chat button on the blog page will be quite useful. Because with this link or whatsapp direct chat button, our blog visitors will find it very easy to contact us via whatsapp.
The Whatsapp Direct Chat button that will be used this time uses the svg icon with additional css to set the position of the icon Whatsapp later.
Whatsapp Direct Chat Button With this SVG icon it can be applied on AMP and Non AMP blogs, and there are also two optional versions that you can choose according to your wishes
Share You who are interested in installing Whatsapp Direct Chat Button on Blog With this SVG on your blog page, please follow the short tutorial below :
How to Install Whatsapp Direct Chat Button on Blog
Login Bogger - Click Template - Edit HTML
Please select the following variations of the whatsapp chat button to taste
1. Full CSS
By using Full Css, the HTML code will be simpler because it does not use the HTML code icon SVG
Save the following HTML code before the code </body>
<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=91xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp' />Change code 91xxxxxxxxxx With your whatsapp number.
Then add the following CSS before </style>.
.fixed-whatsapp {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
z-index: 9999;
}
.fixed-whatsapp:before {
content: "";
background-repeat: no-repeat;
background-size: 34px 34px;
background-position: center center;
width: 50px;
height: 50px;
background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
background-color: #00C853;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
}
2. Icons with HTML
By only using HTML, the CSS size is smaller.
Save the following HTML code above the code </body>
<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=91xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp'>
<svg viewBox='0 0 24 24' width='34' height='34'>
<path fill='#ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/>
</svg>
</a>
Change code91xxxxxxxxxx With your WA number.
Add the following CSS before the code </style>.
.fixed-whatsapp {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
line-height: 50px;
z-index: 9999;
text-align: center;
}
.fixed-whatsapp:before {
content: "";
width: 50px;
height: 50px;
background-color: #00C853;
position: absolute;
border-radius: 100%;
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
z-index: 1;
top: 0;
left: 0;
}
.fixed-whatsapp svg {
vertical-align: middle;
z-index: 2;
position: relative;
}If you want to add a message or words on it, please add the following CSS:
.fixed-whatsapp: after {
content: ' Hi ... Friend, chat is here!";
width: 100px;
padding: 5px 10px;
position: absolute;
bottom: 100%;
margin-bottom: 10px;
right: -150px;
text-align: right;
color: #555;
border: 1px solid #dedede;
background: rgba(255,255,255,.5);
border-radius: 4px;
opacity: 0;
transition:all .4s ease-in-out;
font-size: 90%;
line-height: 1.1;
}
.fixed-whatsapp:hover:after {
opacity: 1;
right: 0;
The ones marked please adjust the words that you want to display. Please try the demo and hover the icon.
If there is something you want to ask about this post, please leave a comment.
Thus the article about how to Make Whatsapp Direct Chat Button on Blog with SVG I hope this is useful and good luck.