Table Of Contents
Introduction:
Here is a WhatsApp chat floating button on your website simple in HTML code with starting a interactive chatting box with your profile picture. You don’t need to any JavaScript or additional CSS file. Because this is only one HTML code.just copy it and paste where you want to show WhatsApp floating chatting icon to your website.you can use this code for your blogger website or your wordpress website also.
How it works?
Just copy the code that given below and go to the blogger layout.Just go in the footer section , insert the gadget and take the HTML gadget from the gadgets list and paste this code wherein.
Just go to your wordpress dashboard and go to the appearance section and then widget section.Where you can see layout of your website.Go to the footer section, take the Custome HTML widget from the widgets list and paste this code there.You can take this Custome Html widget in sidebar area also.
What is you need to change?
Just copy following code and paste according to method given above. But before copying this code you should change some code that highlighted in blue color of this code. Where you should change mobile number of your own instead of default mobile number and the URL of your profile image for starting chatting box. If you have url of image of your own paste your image URL in this code instead of the default URL of image.if you don’t have your profile pictures URL, just create URL for your profile picture.Upload your image to this website Postimage and copy the direct link of your image from there.This is the URL of your image.Just copy that URL and paste in this code by removing the highlighted default URL of image.
<!DOCTYPE html><style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
background-color:transparent;
color: white;
padding: 5px 5px;
border:none;
cursor: pointer;
opacity: 0.9;
position: fixed;
bottom:80px;
right:2px;}/* The popup chat - hidden by default */
.chat-popup {
display: none;
position: fixed;
bottom:90px;
right: 15px;
border: 5px solid blue;
z-index: 9;
}
/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
/* Full-width textarea */
.form-container textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
resize: none;
min-height: 200px;
}
/* When the textarea gets focus, do something */
.form-container textarea:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit/send button */
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor:pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
</style>
<figure>
<button class="open-button" onclick="openForm()"><img alt="" src="https://i.postimg.cc/ZKR7MV0g/79dc31280371b8ffbe56ec656418e122.png" style="height: 100px; width:100px;" title="" /><figcaption style="color:black;">Chat me.</figcaption> </button></figure><div class="chat-popup" id="myForm">
<form action="/action_page.php" class="form-container">
<figure>
<!--Change your profile picture by replacing below url that highlited with blue color -->
<!--Change your Name by replacing default name qadeer khan highlited with blue color -->
<img src="https://i.postimg.cc/kMyp1dHc/photoABC.jpg" style="width:80px;height:80px;" />
<figcaption>QADEER KHAN</figcaption>
</figure><h2><b>How can I help you?</b></h2>
<br />
<label for="msg"><b></b></label>
<!-- Change your Whatsapp no. by replacing mobile number highlited with blue color -->
<button type="button" class="btn" onclick="document.location='https://api.whatsapp.com/send?phone=+917972611095'">Chat me.</button><button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div><script>
function openForm() {
document.getElementById("myForm").style.display = "block";
}function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script></html>Your WhatsApp floating chat icon button looks like this.
And the starting chatting Box with profile picture looks like this.
If you want to know how to embed PDF file on blogger just click here.
If you want to download whatsapp chat html code You can copy that code from below….
<style> body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;}/* Button used to open the chat form - fixed at the bottom of the page */ .open-button { background-color:transparent; color: white; padding: 5px 5px; border:none; cursor: pointer; opacity: 0.9; position: fixed; bottom:80px; right:2px;}/* The popup chat - hidden by default */ .chat-popup { display: none; position: fixed; bottom:90px; right: 15px; border: 5px solid blue; z-index: 9; } /* Add styles to the form container */ .form-container { max-width: 300px; padding: 10px; background-color: white; } /* Full-width textarea */ .form-container textarea { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; resize: none; min-height: 200px; } /* When the textarea gets focus, do something */ .form-container textarea:focus { background-color: #ddd; outline: none; } /* Set a style for the submit/send button */ .form-container .btn { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor:pointer; width: 100%; margin-bottom:10px; opacity: 0.8; } /* Add a red background color to the cancel button */ .form-container .cancel { background-color: red; } /* Add some hover effects to buttons */ .form-container .btn:hover, .open-button:hover { opacity: 1; } </style> <figure> <button class="open-button" onclick="openForm()"><img alt="" src="https://i.postimg.cc/ZKR7MV0g/79dc31280371b8ffbe56ec656418e122.png" style="height: 100px; width:100px;" title="" /><figcaption style="color:black;">Chat me.</figcaption> </button></figure><div class="chat-popup" id="myForm"> <form action="/action_page.php" class="form-container"> <figure> <!--Change your profile picture by replacing below url that highlited with blue color --> <!--Change your Name by replacing default name qadeer khan highlited with blue color --> <img src="https://i.postimg.cc/kMyp1dHc/photoABC.jpg" style="width:80px;height:80px;" /> <figcaption>QADEER KHAN</figcaption> </figure><h2><b>How can I help you?</b></h2> <br /> <label for="msg"><b></b></label> <!-- Change your Whatsapp no. by replacing mobile number highlited with blue color --> <button type="button" class="btn" onclick="document.location='https://api.whatsapp.com/send?phone=+917972611095'">Chat me.</button><button type="button" class="btn cancel" onclick="closeForm()">Close</button> </form> </div><script> function openForm() { document.getElementById("myForm").style.display = "block"; }function closeForm() { document.getElementById("myForm").style.display = "none"; } </script>
