Добавляем простой виджет с контактами и мессенджерами в виде кнопки при нажатии на которую открывается блок с Whatsapp, телефоном, формой обратной связи. При желании можно добавить другие мессенджеры: Telegram, VK и т.д.
Размещаем внутри блока виджета кнопку Свяжитесь с нами и блок с контактной информацией. Размещать иконки в svg или другом формате рекомендуется свои.
Пример кода
<!--callme-->
<div id="popup" class="messanger-widget">
<div class="messangers-block hide-element">
<div class="messangers-list-container">
<ul class="messangers-list">
<li><a class="messanger msg-item-phone" id="msg-item-7" rel="nofollow noopener" href="tel:+7........" title="Бесплатный звонок" target="_blank"><span class="item-icon" style="background-color:#E6430A">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg></span><div class="item-label"><div class="item-title">Бесплатный звонок</div></div></a></li>
<li><a class="messanger msg-item-whatsapp" id="msg-item-2" rel="nofollow noopener" href="https://wa......" title="WhatsApp" target="_blank"><span class="item-icon" style="background-color:#008068">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg></span><div class="item-label"><div class="item-title">WhatsApp</div></div></a></li>
<li><a class="messanger msg-item-calendar" id="msg-item-2" rel="nofollow noopener" href="#" title="Форма обратной связи" target="_blank"><span class="item-icon" style="background-color:#3B5888">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ><path fill="currentColor" d="M 6 2 L 6 4 L 5 4 C 3.9069372 4 3 4.9069372 3 6 L 3 20 C 3 21.093063 3.9069372 22 5 22 L 19 22 C 20.093063 22 21 21.093063 21 20 L 21 6 C 21 4.9069372 20.093063 4 19 4 L 18 4 L 18 2 L 16 2 L 16 4 L 8 4 L 8 2 L 6 2 z M 5 9 L 19 9 L 19 20 L 5 20 L 5 9 z M 14.800781 11.300781 L 11.5 14.599609 L 9.6992188 12.800781 L 8.3007812 14.199219 L 11.5 17.400391 L 16.199219 12.699219 L 14.800781 11.300781 z"/></svg></span><div class="item-label"><div class="item-title">Забронировать</div></div></a></li>
</ul>
</div>
</div>
<div type="button" class="contact-bt">
<div class="text-call">
<svg id="openbtn" fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="32px" height="32px"><path d="M 2.5 2 C 1.675781 2 1 2.675781 1 3.5 L 1 8.5 C 1 9.324219 1.675781 10 2.5 10 L 3.992188 10 L 3.992188 12 L 6.664063 10 L 9.5 10 C 10.324219 10 11 9.324219 11 8.5 L 11 3.5 C 11 2.675781 10.324219 2 9.5 2 Z M 2.5 3 L 9.5 3 C 9.78125 3 10 3.21875 10 3.5 L 10 8.5 C 10 8.78125 9.78125 9 9.5 9 L 6.328125 9 L 4.992188 10 L 4.992188 9 L 2.5 9 C 2.21875 9 2 8.78125 2 8.5 L 2 3.5 C 2 3.21875 2.21875 3 2.5 3 Z M 12 5 L 12 8.5 C 12 9.878906 10.878906 11 9.5 11 L 8.1875 11 L 8.183594 11.003906 C 7.683594 11.003906 7.246094 11.003906 6.988281 11.003906 L 5.242188 12.3125 C 5.511719 12.726563 5.972656 13 6.5 13 L 9.335938 13 L 12.003906 15 L 12.003906 13 L 13.5 13 C 14.328125 13 15 12.328125 15 11.5 L 15 6.5 C 15 5.671875 14.328125 5 13.5 5 Z"/></svg>
<svg version="1.1" id="closebtn" fill="#fff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<polygon points="18.707,6.707 17.293,5.293 12,10.586 6.707,5.293 5.293,6.707 10.586,12 5.293,17.293 6.707,18.707 12,13.414
17.293,18.707 18.707,17.293 13.414,12 "/>
</svg>
<span>Свяжитесь<br>с нами</span>
</div>
</div>
</div>
далее добавляем стили css, скорее всего они потребуют корректировки по размерам и отступам.
<style>
#closebtn {
transform: scale(0);
}
.hide-element {display: none !important;}
.messangers-block {
width:300px;
background-color: #fff;
position: absolute;
bottom: 70px;
right: 20px;
padding:10px 0;
border-radius: 8px;
}
.messangers-list {
list-style: none;
}
.messanger {
display: flex;
flex-direction: row;
align-items: center;
margin: 0;
cursor: pointer;
width: 100%;
padding: 8px 20px 8px 60px;
position: relative;
min-height: 54px;
text-decoration: none;
}
.messanger .item-icon {
position: absolute;
left: 10px;
top: 50%;
margin-top: -20px;
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #0084ff;
margin-right: 10px;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
}
.messanger .item-icon svg {
width: 24px;
height: 24px;
vertical-align: middle;
text-align: center;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
}
.messanger-widget {
position:fixed;
bottom:100px;
right: 20px;
}
.messangers-block ul {
margin-bottom: auto;
}
.messangers-block ul {
padding-left: 10px;
}
.messangers-block::before {
position: absolute;
bottom: -7px;
right: 25px;
left: auto;
display: inline-block !important;
border-right: 8px solid transparent;
border-top: 8px solid #FFFFFF;
border-left: 8px solid transparent;
content: '';
}
.text-call svg {
margin: 0 25px;
}
.contact-bt {
background:#F95C18;
border:2px solid #F95C18;
border-radius:50%;
box-shadow:0 8px 10px rgba(249,92,24,0.3);
cursor:pointer;
height:80px;
text-align:center;
width:80px;
position: fixed;
right: 35px;
bottom: 80px;
z-index:999;
transition:.3s;
animation:contact-an linear 1s infinite;
}
.contact-bt .text-call {
height: 70px;
width: 70px;
border-radius: 20%;
position: relative;
overflow: hidden;
right: 5%;
top: 6%;
}
.contact-bt .text-call span {
text-align: center;
color:#F95C18;
opacity: 0;
font-size: 0;
position:absolute;
right: 4px;
top: 30px;
line-height: 14px;
font-weight: 600;
text-transform: uppercase;
transition: opacity .3s linear;
font-family: 'montserrat', Arial, Helvetica, sans-serif;
}
.contact-bt .text-call span {
opacity: 1;
font-size: 8px;
color:#fff;
}
svg.bi.bi-chat-left-dots {
margin: 14px 8px;
}
.contact-bt:hover i {
color:#38a3fd;
font-size:40px;
transition:.3s;
}
.contact-bt i {
color:#fff;
font-size:29px;
transition:.3s;
line-height: 66px;
}
.contact-bt i {
-webkit-animation: opsimple 3s infinite;
animation: opsimple 3s infinite;
}
@-webkit-keyframes contact-an {
0% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
40% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
80% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px #f95c18,0 0 0 26.7px rgba(249,92,24,0.067)
}
100% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px #f95c18,0 0 0 40px rgba(249,92,24,0.0)
}
}@keyframes contact-an {
0% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
40% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
80% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px #f95c18,0 0 0 26.7px rgba(249,92,24,0.067)
}
100% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px #f95c18,0 0 0 40px rgba(249,92,24,0.0)
}
}
@keyframes opsimple {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Добавляем скрипт всплытия блока с кнопками контактной информации. При нажатии на кнопку блок открывается, при повторном нажатии закрывается. Также если блок открыт, то по клику за его пределами блок закрывается (присваивается свойство display:none;).
<script>
/* Вешаем обработчик клика на кнопку */
var clickContact = document.querySelector('.contact-bt');
var clickText = document.querySelector('.text-call span');
var clickCloseBtn = document.querySelector('#closebtn');
var clickOpenBtn = document.querySelector('#openbtn');
clickContact.addEventListener("click", hideVisibleElem);
/* Функция добавления / удаления класса, который скрывает элемент */
function hideVisibleElem() {
let hideBoxMessanger = document.querySelector('.messangers-block');
hideBoxMessanger.classList.toggle("hide-element");
/* В зависимости от наличия скрывающего класса меняем текст в кнопке */
if (hideBoxMessanger.classList.contains("hide-element")){
clickText.innerHTML = 'Свяжитесь<br>с нами';
clickCloseBtn.style.transform = 'scale(0)';
clickOpenBtn.style.transform = 'scale(1)';
} else {
clickCloseBtn.style.transform = 'scale(2.4)';
clickCloseBtn.style.padding = '0 0 6px 6px';
clickOpenBtn.style.transform = 'scale(0)';
clickText.innerHTML = '';
/*Если всплывающее оконо открыто, скрываем его кликом в любом месте вне окна*/
document.addEventListener('click', function(event) {
var e=document.getElementById('popup');
if (!e.contains(event.target)) {
hideBoxMessanger.classList.add("hide-element");
clickCloseBtn.style.transform = 'scale(0)';
clickText.innerHTML = 'Свяжитесь<br>с нами';
clickOpenBtn.style.transform = 'scale(1)';
}
});
}
}
</script>
Анимированную кнопку мы позаимствовали здесь
Если вам необходимо реализовать что-то подобное, можете обращаться к нам за услугой сопровождение сайта.