Home Latest Articles Contact

Whatsapp Chat Box for Website Pure HTML/CSS/JS

By Ajay Malik
Whatsapp Chat Box for Website Pure HTML/CSS/JS 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.
July 16, 2018 2018-07-16T15:01:44Z

2 comments:

  1. I added this code. Working fine on desktop but not on mobile. Any reason?

    ReplyDelete
    Replies
    1. Thanks for letting me know, I didn't tested int on mobile

      Delete