WhatsApp Site Widget Button
by vovkasolovev
HTML
<noindex><div class="wa__popup">
<div class="wa__btn_popup">
<div class="wa__btn_popup_txt"><strong>Задать вопрос</strong></div>
<div class="wa__btn_popup_icon slide_up"><svg viewBox="0 0 90 90" fill="rgb(255, 255, 255)" width="32" height="32"><path d="M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455L0,90l7.975-23.522 c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982 c-20.484,0-37.146,16.535-37.146,36.859c0,8.065,2.629,15.534,7.076,21.61L11.107,79.14l14.275-4.537 c5.865,3.851,12.891,6.097,20.437,6.097c20.481,0,37.146-16.533,37.146-36.857S66.301,6.982,45.818,6.982z M68.129,53.938 c-0.273-0.447-0.994-0.717-2.076-1.254c-1.084-0.537-6.41-3.138-7.4-3.495c-0.993-0.358-1.717-0.538-2.438,0.537 c-0.721,1.076-2.797,3.495-3.43,4.212c-0.632,0.719-1.263,0.809-2.347,0.271c-1.082-0.537-4.571-1.673-8.708-5.333 c-3.219-2.848-5.393-6.364-6.025-7.441c-0.631-1.075-0.066-1.656,0.475-2.191c0.488-0.482,1.084-1.255,1.625-1.882 c0.543-0.628,0.723-1.075,1.082-1.793c0.363-0.717,0.182-1.344-0.09-1.883c-0.27-0.537-2.438-5.825-3.34-7.977 c-0.902-2.15-1.803-1.792-2.436-1.792c-0.631,0-1.354-0.09-2.076-0.09c-0.722,0-1.896,0.269-2.889,1.344 c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223 C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z"></path></svg></div>
</div>
<div class="wa__popup_chat_box">
<div class="wa__popup_heading">
<div class="wa__popup_avatar" style="background: url(https://podhod.ru/img/thumb_vladimir.jpg) center center no-repeat; background-size: cover;"></div>
<div class="wa__popup_title">Вам ответит: Владимир</div>
<div class="wa__popup_intro"><a href="https://wa.me/79255022409" target="_blank">+7 925 502-24-09</a> · <a href="mailto:[email protected]">[email protected]</a></div>
<div class="wa__popup_close"></div>
</div>
<div class="wa__popup_content">
<div...CSS
html{font-family: sans-serif;}
/* WhatsApp Popup*/
html{
--color-3: #11bb88;
--radius: 3px;
--radius-s: 8px;
--color-wa-0: #ECE5DD;
--color-wa-1: #25D366;
--color-wa-2: #128C7E;
--color-wa-3: #075E54;
--color-wa-4: #DCF8C6;
--color-wa-5: #34B7F1;
}
.wa__popup{line-height: 1em;}
.wa__popup, .wa__popup *{box-sizing: border-box;}
.wa__popup.wa__active .wa__popup_chat_box{transform: translate(0,0); visibility: visible; opacity: 1;}
.wa__btn_popup{position: fixed; right: 18px; bottom: 18px; cursor: pointer; z-index: 980; animation-duration: 4s!important;}
@keyframes attention_right {
0% { opacity:0; transform: translateX(500px); }
70% { opacity:0; transform: translateX(-50px);}
75% { opacity:1; transform: translateX(0px);}
95% { opacity:1; transform: translateX(0px);}
100% { opacity:0;transform: translateX(10px);}
}
.wa__btn_popup_txt{position: absolute; right: 100%; background-color: #f5f7f9; font-size: 12px; color: #43474e; top: 11px; padding: 8px; margin-right: 7px; border-radius: 4px; animation: attention_right 20s infinite;}
.wa__active .wa__btn_popup_txt{animation: none; display: none;}
.wa__btn_popup_icon{color: white; width: 52px; height: 52px; background: var(--color-3); border-radius: 50%; box-shadow: 0 6px 8px 2px rgba(0, 0, 0, 0.14); display: flex; justify-content: center; align-items: center; transition: .4s ease background;}
.wa__popup:not(.wa__active) .wa__btn_popup_icon:hover{background: var(--color-wa-1)}
.wa__active .wa__btn_popup{opacity: 0.5}
.wa__popup_chat_box{width: 340px; border-radius: var(--radius-s); position: fixed; overflow: hidden; box-shadow: 0 10px 20px -5px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.06); bottom: 80px; right: 18px; z-index: 981; opacity: 0; visibility: hidden; transform: translate(0,15px); transition: .4s ease all; will-change: transform,visibility,opacity; max-width: calc(100vw - 40px)!important; max-height: calc(100vh - 40px)!important;}
.wa__popup_avatar{position: absolute; overflow: hidden; border-radius: 50%;...JavaScript
$(document).ready(function(){
$('.wa__btn_popup').on('click', function(){ $('.wa__popup').toggleClass('wa__active'); });
$('.wa__popup_close').on('click', function(){ $('.wa__popup').removeClass('wa__active'); });
$('#wa__field_question').on('keypress', function(event) { if (event.keyCode === 13) { $('#wa__btn_send_submit').click(); } });
$('#wa__btn_send_submit').on('click', function(event) { window.location = 'https://api.whatsapp.com/send?phone=79255022409&text=' + $('#wa__field_question').val(); });
});