Whatsapp Chat Box for Website Pure HTML/CSS/JS

There is no doubt in this that Whatsapp is the world’s biggest Messaging app. Nearly everybody uses WhatsApp on their mobile device.
Because it is simple, no advertisement and no paid promotions.
Today, I made a simple WhatsApp chatbox for your websites. made up of pure HTML, CSS and javascript.

whatsapp chatbox for website

Advantages of WhatsApp chatbox

Here some main advantages of using WhatsApp chatbox:

  • No External Library Needed
  • Madeup of pure HTML/CSS and javascript
  • Easy to install and customize
  • Supported in desktop too
  • Get Real time message directly into your inbox
  • Support unlimited messages
DEMO

Installation

Copy Below Code Just Above Your Closing Body tag </body>:

<div id='chat-box'>
<div id='chat-top'>Need HELP? <span id='chat-top-right'><svg id='close-box' xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 48 48"><path d="M38 12.83L35.17 10 24 21.17 12.83 10 10 12.83 21.17 24 10 35.17 12.83 38 24 26.83 35.17 38 38 35.17 26.83 24z" fill='#fff'/></svg></span><div class='clear'></div></div>
<div id='chat-msg'><p>We Are expert in Web Design and Technical SEO</p>
<div id='chat-form'>
<div class='chat-in'>
<input type='text' id='whats-in' Placeholder='Send Your Message...'/></div><div id='send-btn'><svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 48 48"><path d="M4.02 42L46 24 4.02 6 4 20l30 4-30 4z" fill='rgb(18, 140, 126)'/></svg></div></div>
</div>
</div>
<div id='whats-chat'>

<svg xmlns="http://www.w3.org/2000/svg" version="1" width="35" height="35" viewBox="0 0 90 90"><path d="M90 44a44 44 0 0 1-66 38L0 90l8-24A44 44 0 0 1 46 0c24 0 44 20 44 44zM46 7C25 7 9 24 9 44c0 8 2 15 7 21l-5 14 14-4a37 37 0 0 0 58-31C83 24 66 7 46 7zm22 47l-2-1-7-4-3 1-3 4h-3c-1 0-4-1-8-5-3-3-6-6-6-8v-2l2-2 1-1v-2l-4-8c0-2-1-2-2-2h-2l-3 1c-1 1-4 4-4 9s4 11 5 11c0 1 7 12 18 16 11 5 11 3 13 3s7-2 7-5l1-5z" fill="#FFF"/></svg>
</div>
<style>
body{width:100%}
*{margin:0px;padding:0px;box-sizing:border-box;}
#whats-chat{position:fixed;right:3%;bottom:10%;height:auto;width:auto;background:#25D366;padding:12.5px;border-radius:50px;}
#whats-chat:hover{cursor:pointer;box-shadow:2px 2px 15px #ccc;bottom:11%;}
/*===============================*/
#chat-box{position:fixed;right:-500px;bottom:18%;width:250px;height:200px;transition:all .5s;}
#chat-top{width:100%;line-height:2;background:rgb(18, 140, 126);color:white;text-align:center;border-radius:5px 5px 0 0;padding:0 10px;}
#chat-msg{background:#ece5dd;padding:10px;border-radius:0 0 5px 5px;box-shadow:0 0 25px -10px #999;}
#chat-msg p{font-size:14px;padding:5px;background:white;border-radius:0 50px 50px 50px;margin-bottom:10px;}
#chat-form{display:flex;}
.chat-in{width:80%;}
#chat-form input{border-radius:5px 0 5px 5px;border:none;outline:none;font-size:14px;padding:5px;line-height:2;}
#send-btn{width:20%;padding: 0 5px;}
#chat-top-right{float:right;padding:5px 0;}
#chat-box:after{content:'';
position: absolute;
top:58%;
left: 90%;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;

border-right:25px solid #ece5dd;}
.right{float:right}
.clear{clear:both}
</style>
<script>
document.getElementById('whats-chat').addEventListener("mouseover", showchatbox);
document.getElementById('chat-top-right').addEventListener("click", closechatbox);
document.getElementById('send-btn').addEventListener("click", sendmsg);
window.addEventListener("load", showchatboxtime);
function showchatbox(){
document.getElementById('chat-box').style.right='8%'
}
function closechatbox(){
document.getElementById('chat-box').style.right='-500px'


}
function showchatboxtime(){
setTimeout(launchbox,5000)
}
function launchbox(){
document.getElementById('chat-box').style.right='8%'

}
function sendmsg(){
var msg = document.getElementById('whats-in').value;
var relmsg = msg.replace(/ /g,"%20");
window.open('https://api.whatsapp.com/send?phone=99999999999&text='+relmsg,'_blank');

}
</script>

Customization

Change “5000” with 2000 to auto open of chabox after 2s, once page is loaded.
Change “99999999999” With your Phone No.

Conclusion

Whatsapp is the New Trend in digital marketing, Must use this feature to increase engagement with your Users.
If you’ve any issue regarding this guide than comment below. We’ll contact you soon.

4 thoughts on “Whatsapp Chat Box for Website Pure HTML/CSS/JS

  1. Unknown says:

    I tried but a pop message show when i click on the send message button. here is the message

    "Unable to open the link since no application associated with "whatsapp" protocol was found on your system"

Leave a Reply

Your email address will not be published. Required fields are marked *