Если не знакомы с HTML и CSS, то можно воспользоваться любым бесплатным плагином для такой кнопки.
Это уже более продвинутые чаты:
Если владеете HTML и CSS, то просто берете иконку кнопки, размещаете где то внизу сайта ближе к <body>
Ниже пример с таким результатом:
Тут почитайте сразу как сформировать ссылку на WhatsApp:
HTML:
<div class="wh-api">
<div class="wh-fixed">
<!-- Тут ниже вместо +7XXXXXXXXXX вставьте ваш телефон --!>
<a href="[[https://wa.me/+7XXXXXXXXXX](https://wa.me/+7XXXXXXXXXX)]([https://wa.me/+7XXXXXXXXXX](https://wa.me/+7XXXXXXXXXX))>
<button class="wh-ap-btn"></button>
</a>
</div>
</div>
CSS:
button.wh-ap-btn {
outline: none;
width: 60px;
height: 60px;
border: 0;
background-color: #2ecc71;
padding: 0;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
cursor: pointer;
transition: opacity 0.3s, background 0.3s, box-shadow 0.3s;
}
button.wh-ap-btn::after {
content: '';
/* Тут ниже ссылка на вашу иконку */
background-image: url('[[//www.freepngimg.com/thumb/whatsapp/77220-scalable-vector-graphics-logo-whatsapp-icon-thumb.png](//www.freepngimg.com/thumb/whatsapp/77220-scalable-vector-graphics-logo-whatsapp-icon-thumb.png)]([//www.freepngimg.com/thumb/whatsapp/77220-scalable-vector-graphics-logo-whatsapp-icon-thumb.png](//www.freepngimg.com/thumb/whatsapp/77220-scalable-vector-graphics-logo-whatsapp-icon-thumb.png))');
background-position: center center;
background-repeat: no-repeat;
background-size: 48%;
width: 100%;
height: 100%;
display: block;
opacity: 1;
}
button.wh-ap-btn:hover {
opacity: 1;
background-color: #20bf6b;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.wh-api {
position: fixed;
bottom: 0;
left: 0;
}
.wh-fixed {
margin-left: 15px;
margin-bottom: 15px;
}
.wh-fixed>a {
display: block;
text-decoration: none;
}
button.wh-ap-btn::before {
content: 'Написать в Whatsapp';
display: block;
position: absolute;
margin-left: 70px;
margin-top: 16px;
height: 25px;
background-color: #333;
color: #fff;
border-radius: 3px;
width: 0;
opacity: 0;
padding: 0;
transition: opacity 0.4s, width 0.4s, padding 0.5s;
padding-top: 7px;
}
.wh-fixed>a:hover button.wh-ap-btn::before {
opacity: 1;
width: auto;
padding-top: 7px;
padding-left: 10px;
padding-right: 10px;
width: 80px;
}