Widget с контактами

3 марта 2024
23

Добавляем простой виджет с контактами и мессенджерами в виде кнопки при нажатии на которую открывается блок с 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>

Анимированную кнопку мы позаимствовали здесь
Если вам необходимо реализовать что-то подобное, можете обращаться к нам за услугой сопровождение сайта.
Комментарии
Name
Email
Phone
Ваше имя
Ваш email
Оставить комментарий
Нажмите для звонка
Хотите заказать сайт?
Обращайтесь любым удобным способом и мы поможем подобрать интересный вариант для Вас!