Skip to content

Instantly share code, notes, and snippets.

@renderlife

renderlife/index-whatsapp-me.html

Last active December 26, 2022 17:42
Show Gist options
  • Save renderlife/cb1e61f296a04988fdc05fe7f042617d to your computer and use it in GitHub Desktop.
Save renderlife/cb1e61f296a04988fdc05fe7f042617d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index-whatsapp-me.html
<div class="whatsapp-me js-whatsapp-me" data-settings='{"telephone":"16472030499","mobile_only":true,"button_delay":3,"whatsapp_web":true,"message_text":"
Здравствуйте, меня зовут Геннадий, я директор по сервису компании ****. Как я могу вам помочь.","message_delay":10,"message_badge":true,"message_send":""}'>
<div class="whatsapp-me__tongue js-whatsapp-me__tongue whatsapp-me__tongue_hide">
Задать вопрос
</div>
<div class="whatsapp-me__button js-whatsapp-me__button">
<svg xmlns="http://www.w3.org/2000/svg" class="whatsapp-me__button__open" viewBox="0 0 24 24" width="24" height="24" ><g fill="#ffffff" id="wame_svg__logo"><path fill="#ffffff" d="M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 01-13.754 2.299l-5.814.735a.392.392 0 01-.438-.44l.748-5.788A12.002 12.002 0 013.517 3.517zm3.61 17.043l.3.158a9.846 9.846 0 0011.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 00-1.747 11.554l.16.303-.51 3.942a.196.196 0 00.219.22l3.961-.501zm6.534-7.003l-.933 1.164a9.843 9.843 0 01-3.497-3.495l1.166-.933a.792.792 0 00.23-.94L9.561 6.96a.793.793 0 00-.924-.445 1291.6 1291.6 0 00-2.023.524.797.797 0 00-.588.88 11.754 11.754 0 0010.005 10.005.797.797 0 00.88-.587l.525-2.023a.793.793 0 00-.445-.923L14.6 13.327a.792.792 0 00-.94.23z"></path></g></svg>
<a href="https://wa.me/79039279999"><div class="whatsapp-me__button__sendtext">Открыть чат</div></a>
<a href="https://wa.me/79039279999">
<svg class="whatsapp-me__button__send" viewBox="0 0 400 400" stroke-linecap="round" stroke-width="33"> <path class="wame_svg__plain" d="M168.83 200.504H79.218L33.04 44.284a1 1 0 0 1 1.386-1.188L365.083 199.04a1 1 0 0 1 .003 1.808L34.432 357.903a1 1 0 0 1-1.388-1.187l29.42-99.427"></path> <path class="wame_svg__chat" d="M318.087 318.087c-52.982 52.982-132.708 62.922-195.725 29.82l-80.449 10.18 10.358-80.112C18.956 214.905 28.836 134.99 81.913 81.913c65.218-65.217 170.956-65.217 236.174 0 42.661 42.661 57.416 102.661 44.265 157.316"></path> </svg>
</a>
<?php /*
<div class="whatsapp-me__badge">1</div>
<div class="whatsapp-me__tooltip"><div>нужна помощь?</div></div>
*/ ?>
</div>
<div class="whatsapp-me__box js-whatsapp-me__box">
<div class="whatsapp-me__header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 28" width="120" height="28" ><g fill="rgba(255, 255, 255, 0.5)" id="wame_svg__whatsapp"><path fill-rule="evenodd" d="M117.2 17c0 .4-.2.7-.4 1-.1.3-.4.5-.7.7l-1 .2c-.5 0-.9 0-1.2-.2l-.7-.7a3 3 0 0 1-.4-1 5.4 5.4 0 0 1 0-2.3c0-.4.2-.7.4-1l.7-.7a2 2 0 0 1 1.1-.3 2 2 0 0 1 1.8 1l.4 1a5.3 5.3 0 0 1 0 2.3zm2.5-3c-.1-.7-.4-1.3-.8-1.7a4 4 0 0 0-1.3-1.2c-.6-.3-1.3-.4-2-.4-.6 0-1.2.1-1.7.4a3 3 0 0 0-1.2 1.1V11H110v13h2.7v-4.5c.4.4.8.8 1.3 1 .5.3 1 .4 1.6.4a4 4 0 0 0 3.2-1.5c.4-.5.7-1 .8-1.6.2-.6.3-1.2.3-1.9s0-1.3-.3-2zm-13.1 3c0 .4-.2.7-.4 1l-.7.7-1.1.2c-.4 0-.8 0-1-.2-.4-.2-.6-.4-.8-.7a3 3 0 0 1-.4-1 5.4 5.4 0 0 1 0-2.3c0-.4.2-.7.4-1 .1-.3.4-.5.7-.7a2 2 0 0 1 1-.3 2 2 0 0 1 1.9 1l.4 1a5.4 5.4 0 0 1 0 2.3zm1.7-4.7a4 4 0 0 0-3.3-1.6c-.6 0-1.2.1-1.7.4a3 3 0 0 0-1.2 1.1V11h-2.6v13h2.7v-4.5c.3.4.7.8 1.2 1 .6.3 1.1.4 1.7.4a4 4 0 0 0 3.2-1.5c.4-.5.6-1 .8-1.6.2-.6.3-1.2.3-1.9s-.1-1.3-.3-2c-.2-.6-.4-1.2-.8-1.6zm-17.5 3.2l1.7-5 1.7 5h-3.4zm.2-8.2l-5 13.4h3l1-3h5l1 3h3L94 7.3h-3zm-5.3 9.1l-.6-.8-1-.5a11.6 11.6 0 0 0-2.3-.5l-1-.3a2 2 0 0 1-.6-.3.7.7 0 0 1-.3-.6c0-.2 0-.4.2-.5l.3-.3h.5l.5-.1c.5 0 .9 0 1.2.3.4.1.6.5.6 1h2.5c0-.6-.2-1.1-.4-1.5a3 3 0 0 0-1-1 4 4 0 0 0-1.3-.5 7.7 7.7 0 0 0-3 0c-.6.1-1 .3-1.4.5l-1 1a3 3 0 0 0-.4 1.5 2 2 0 0 0 1 1.8l1 .5 1.1.3 2.2.6c.6.2.8.5.8 1l-.1.5-.4.4a2 2 0 0 1-.6.2 2.8 2.8 0 0 1-1.4 0 2 2 0 0 1-.6-.3l-.5-.5-.2-.8H77c0 .7.2 1.2.5 1.6.2.5.6.8 1 1 .4.3.9.5 1.4.6a8 8 0 0 0 3.3 0c.5 0 1-.2 1.4-.5a3 3 0 0 0 1-1c.3-.5.4-1 .4-1.6 0-.5 0-.9-.3-1.2zM74.7 8h-2.6v3h-1.7v1.7h1.7v5.8c0 .5 0 .9.2 1.2l.7.7 1 .3a7.8 7.8 0 0 0 2 0h.7v-2.1a3.4 3.4 0 0 1-.8 0l-1-.1-.2-1v-4.8h2V11h-2V8zm-7.6 9v.5l-.3.8-.7.6c-.2.2-.7.2-1.2.2h-.6l-.5-.2a1 1 0 0 1-.4-.4l-.1-.6.1-.6.4-.4.5-.3a4.8 4.8 0 0 1 1.2-.2 8.3 8.3 0 0 0 1.2-.2l.4-.3v1zm2.6 1.5v-5c0-.6 0-1.1-.3-1.5l-1-.8-1.4-.4a10.9 10.9 0 0 0-3.1 0l-1.5.6c-.4.2-.7.6-1 1a3 3 0 0 0-.5 1.5h2.7c0-.5.2-.9.5-1a2 2 0 0 1 1.3-.4h.6l.6.2.3.4.2.7c0 .3 0 .5-.3.6-.1.2-.4.3-.7.4l-1 .1a21.9 21.9 0 0 0-2.4.4l-1 .5c-.3.2-.6.5-.8.9-.2.3-.3.8-.3 1.3s.1 1 .3 1.3c.1.4.4.7.7 1l1 .4c.4.2.9.2 1.3.2a6 6 0 0 0 1.8-.2c.6-.2 1-.5 1.5-1a4 4 0 0 0 .2 1H70l-.3-1v-1.2zm-11-6.7c-.2-.4-.6-.6-1-.8-.5-.2-1-.3-1.8-.3-.5 0-1 .1-1.5.4a3 3 0 0 0-1.3 1.2v-5h-2.7v13.4H53v-5.1c0-1 .2-1.7.5-2.2.3-.4.9-.6 1.6-.6.6 0 1 .2 1.3.6.3.4.4 1 .4 1.8v5.5h2.7v-6c0-.6 0-1.2-.2-1.6 0-.5-.3-1-.5-1.3zm-14 4.7l-2.3-9.2h-2.8l-2.3 9-2.2-9h-3l3.6 13.4h3l2.2-9.2 2.3 9.2h3l3.6-13.4h-3l-2.1 9.2zm-24.5.2L18 15.6c-.3-.1-.6-.2-.8.2A20 20 0 0 1 16 17c-.2.2-.4.3-.7.1-.4-.2-1.5-.5-2.8-1.7-1-1-1.7-2-2-2.4-.1-.4 0-.5.2-.7l.5-.6.4-.6v-.6L10.4 8c-.3-.6-.6-.5-.8-.6H9c-.2 0-.6.1-.9.5C7.8 8.2 7 9 7 10.7c0 1.7 1.3 3.4 1.4 3.6.2.3 2.5 3.7 6 5.2l1.9.8c.8.2 1.6.2 2.2.1.6-.1 2-.8 2.3-1.6.3-.9.3-1.5.2-1.7l-.7-.4zM14 25.3c-2 0-4-.5-5.8-1.6l-.4-.2-4.4 1.1 1.2-4.2-.3-.5A11.5 11.5 0 0 1 22.1 5.7 11.5 11.5 0 0 1 14 25.3zM14 0A13.8 13.8 0 0 0 2 20.7L0 28l7.3-2A13.8 13.8 0 1 0 14 0z"></path></g></svg>
<div class="whatsapp-me__close js-whatsapp-me__close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" ><g fill="#ffffff" id="wame_svg__close"><path fill="#ffffff" d="M24 2.4L21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6L24 2.4z"></path></g></svg>
</div>
</div>
<div class="whatsapp-me__box__scroll">
<div class="whatsapp-me__content">
<div rel="nofollow" class="whatsapp-me__message">Здравствуйте, меня зовут Александр, я мастер-консультант. Чем могу быть Вам полезен?</div>
</div>
</div>
</div>
</div>
Raw
script.js
$(document).ready(function() {
setTimeout(function() {
// Whatsapp-me chat
if ($('.js-whatsapp-me__button').length) {
$('.js-whatsapp-me__button').click(function(e) {
$('.js-whatsapp-me').addClass('whatsapp-me--chatbox');
$('.js-whatsapp-me__tongue').addClass('whatsapp-me__tongue_hide');
});
};
if ($('.js-whatsapp-me__tongue').length) {
$('.js-whatsapp-me__tongue').click(function(e) {
$('.js-whatsapp-me').addClass('whatsapp-me--chatbox');
$('.js-whatsapp-me__tongue').addClass('whatsapp-me__tongue_hide');
});
};
if ($('.js-whatsapp-me__close').length) {
$('.js-whatsapp-me__close').click(function(e) {
$('.js-whatsapp-me').removeClass('whatsapp-me--chatbox');
});
};
setTimeout(function() {
if ($('.js-whatsapp-me').length) {
$('.js-whatsapp-me').addClass('whatsapp-me--show');
};
}, 3000)
setTimeout(function() {
if ($('.js-whatsapp-me__tongue').length) {
$('.js-whatsapp-me__tongue').removeClass('whatsapp-me__tongue_hide');
};
}, 6000)
}, 500)
});
Raw
style.css
.whatsapp-me svg,
.whatsapp-me svg path {
fill: currentColor!important;
}
.whatsapp-me {
right: auto;
left: 20px;
position: fixed;
z-index: 1000;
right: 20px;
bottom: 20px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
font-size: 16px;
line-height: 1.625em;
color: #262626;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
transform: scale3d(0,0,0);
transition: transform .3s ease-in-out;
}
.whatsapp-me.whatsapp-me--show {
transform: scale3d(1,1,1);
transition: transform .5s cubic-bezier(.18,.89,.32,1.28);
}
@media (max-width: 480px), (max-width: 767px) and (orientation: landscape) {
#callphone-mob {
display: none;
}
.whatsapp-me {
right: auto;
left: 6px;
bottom: 6px;
}
}
.whatsapp-me__button {
right: auto;
left: 8px;
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: absolute;
z-index: 2;
bottom: 8px;
right: 8px;
height: 60px;
min-width: 60px;
max-width: 95vw;
background-color: #25d366;
color: #fff;
border-radius: 30px;
box-shadow: 1px 6px 24px 0 rgba(7,94,84,.24);
cursor: pointer;
transition: background-color .2s linear;
-webkit-tap-highlight-color: transparent;
}
.whatsapp-me__tongue {
right: auto;
left: 8px;
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: absolute;
z-index: 2;
bottom: 8px;
right: 8px;
height: 60px;
min-width: 60px;
max-width: 95vw;
background-color: #128c7e;
font-size: 16px;
display: flex;
align-items: center;
padding-right: 25px;
color: #fff;
border-radius: 30px;
box-shadow: 1px 6px 24px 0 rgba(7,94,84,.24);
cursor: pointer;
transition: all .2s linear;
-webkit-tap-highlight-color: transparent;
right: auto;
left: 8px;
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
padding-left: 70px;
width: 210px;
}
.whatsapp-me__tongue_hide {
width: 60px;
padding-left: 0;
font-size: 1px;
}
.whatsapp-me__button svg {
width: 36px;
height: 36px;
margin: 12px 12px;
}
.whatsapp-me--chatbox .whatsapp-me__button:hover {
background-color: #075e54;
}
.whatsapp-me__button {
right: auto;
left: 8px;
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.whatsapp-me--chatbox .whatsapp-me__button {
box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
}
.whatsapp-me--chatbox .whatsapp-me__button a {
color: white;
}
.whatsapp-me__button:active {
background-color: #075e54;
transition: none;
}
.whatsapp-me--chatbox .whatsapp-me__button {
background-color: #128c7e;
transition: background-color .2s linear;
}
.whatsapp-me__button:hover {
background-color: #128c7e;
transition: background-color 1.5s linear;
}
.whatsapp-me__button__sendtext {
padding: 0;
max-width: 0;
font-weight: 600;
line-height: 60px;
white-space: nowrap;
opacity: 0;
overflow: hidden;
transition: none;
}
.whatsapp-me--chatbox .whatsapp-me__button__sendtext {
padding: 0 24px 0 4px;
max-width: 200px;
opacity: 1;
transition: max-width .2s linear,opacity .4s ease-out .2s;
}
.whatsapp-me__button__sendtext {
padding: 0;
max-width: 0;
font-weight: 600;
line-height: 60px;
white-space: nowrap;
opacity: 0;
overflow: hidden;
transition: none;
}
.whatsapp-me--chatbox .whatsapp-me__button__send,
.whatsapp-me__button__open {
display: block;
}
.whatsapp-me__button .whatsapp-me__button__send {
margin: 12px 11px 12px 13px;
}
@keyframes wame_plain{0%,100%,50%{stroke-dashoffset:1097}45%,5%{stroke-dashoffset:0}}
@keyframes wame_chat{0%,100%,50%{stroke-dashoffset:1020}45%,5%{stroke-dashoffset:0}}
.whatsapp-me .whatsapp-me__button__send .wame_svg__plain {
stroke-dasharray: 1097;
stroke-dashoffset: 1097;
animation: wame_plain 6s .2s ease-in-out infinite;
}
.whatsapp-me .whatsapp-me__button__send .wame_svg__chat {
stroke-dasharray: 1020;
stroke-dashoffset: 1020;
animation: wame_chat 6s 3.2s ease-in-out infinite;
}
.whatsapp-me .whatsapp-me__button__send path {
fill: none!important;
stroke: #fff!important;
}
@media (max-width: 480px), (max-width: 767px) and (orientation: landscape) {
.whatsapp-me__box {
width: calc(100vw - 12px);
min-height: 0;
}
}
.whatsapp-me__box {
position: absolute;
bottom: 0;
right: auto;
left: 0;
z-index: 1;
width: calc(100vw - 10px);
max-width: 400px;
min-height: 270px;
border-radius: 32px;
background-image: url(https://carvin55.ru/local/templates/concept_kraken_s1/images/whatsapp-background.webp);
background-size: 100% auto;
box-shadow: 0 2px 6px 0 rgba(0,0,0,.5);
overflow: hidden;
transform: scale3d(0,0,0);
opacity: 0;
transition: opacity .4s ease-out,transform 0s linear .3s;
}
.whatsapp-me__header {
float: none;
display: block;
position: static;
width: 100%;
height: 70px;
padding: 0 26px;
margin: 0;
background-color: #2e8c7d;
color: rgba(255,255,255,.5);
}
@media (max-width: 480px), (max-width: 767px) and (orientation: landscape) {
.whatsapp-me__header {
height: 55px;
}
}
.whatsapp-me__header svg {
width: 120px;
height: 100%;
}
@media (max-width: 480px), (max-width: 767px) and (orientation: landscape) {
.whatsapp-me__close {
top: 13px;
width: 28px;
height: 28px;
}
}
.whatsapp-me__close {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: absolute;
top: 12px;
right: 14px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #000;
color: #fff;
text-align: center;
opacity: .4;
cursor: pointer;
transition: opacity .3s ease-out;
-webkit-tap-highlight-color: transparent;
}
.whatsapp-me__close svg {
display: block;
width: 12px;
height: 12px;
margin: auto;
}
@media (max-width: 480px), (max-width: 767px) and (orientation: landscape) {
.whatsapp-me__box__scroll {
max-height: calc(100vh - 67px);
padding: 15px 0 70px 0;
}
}
.whatsapp-me__box__scroll {
max-height: calc(100vh - 100px);
padding: 20px 0 80px 0;
overflow: hidden auto;
}
@media (max-width: 480px), (max-width: 767px) and (orientation: landscape) {
.whatsapp-me__message {
padding: 16px;
margin: 0 20px 20px;
line-height: 24px;
}
}
.whatsapp-me__message {
position: relative;
min-height: 80px;
padding: 20px;
margin: 0 26px 26px;
border-radius: 32px;
background-color: #fff;
color: #4a4a4a;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
}
.whatsapp-me__message:before {
content: '';
display: block;
position: absolute;
bottom: 30px;
left: -18px;
width: 18px;
height: 18px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA1CAYAAADlE3NNAAAEr0lEQVRo3t2aT0gjVxzHf++9mcn8zWhW6bpELWzcogFNaRar7a4tBNy2WATbHpacpdZ6redeZE+9CL02B1ktXsRD/xwsilhoSwsqag/xYK09hCQlmCiTf28vGRnGmZhE183MFx5vmGQy7zO/P/P7PYLAHUIAQCqDAwDPxMREG3IpHL+zs/MZcgkYAgAMAIwOl8lkYm6xGgYAFgAEAGgZHx9/vVwun7nJJTkAEAGgdW9v73NKKXWLSzIA4AEAGQDazs/P/3ALnNEl1a2trY9oRW6wmu6SEgC0ZrPZn9wCp2dIHgCU1dXVtymlZafDIatEksvlfqYGueG9xgOAcnBw8JSa5GR3vIi1aDTaUSwWj5wOZ3RHPUN6U6nUN9RCTnZHDwDI+/v745TSkpPhrOpHcWlpqbdcLieojZwGpseZMDo66svn87/RKnIaGAsAfCAQ8J6dnX1Pr5DjwABAzmazMVqDHAd2enr6La1RjgGLRCJqLpeL0TrUjFDGrMgCAD8/P38vn8//QutUs1pLT/fC5ubmQKFQOKANqNmspbuhBwDEZDL5BaX0lDaoZoK62NxZXFzs1DRthV5TrxrKGFue/v5+KZ1Of1kul5P0BtQUUAAgxOPx9wuFwl/0BvWq3O8C6vDw8F1N036gL0G3ZaVLUEdHRxFN036kL1E3DWMHxAEAPzc3dyedTk+XSqUdegu6CRijy5mBPLOzs2oikfhU07RFSmmG3qKuaxkdxuhy/MzMjDeRSHyiadrz2wYyClUBMh9bzRfAu7u7PX6//z1RFB9zHBcBALUZKoRqUMgEgyvHeHt7+353d/cjQRBGWJZ9jBDqaMYKHKpYBAEAXltbawsGg2FFUd7iOO4hIeQhQuiOEzpdOzCSTCaftLS0fEUIGXbiHiBjU5njVCr1sc/nW6wkDcduS1u1HKRUKv2KMR4ABwvbAWKMA+BwYbsasFgs/uMWuEtxd3x8/J3b4C4Ag8Hg83g8/iyfz//n5IRi1eZzla00HgA8oijyDMNwlFJCCGH0axiGQQAAXq+XyLLMeL1eRlEURpZlRpIkhud5oigK297eLvl8Prm1tVVSFEWSJEkWRVESBMGrqupriqLcFQThLsaYu612n6vUip4KMFv5HJssjhooEi5laoZh0NjYWNvw8PC9np6ejkAg8MDv9w+oqnrfxsNqhgNTh2wE1MGYChyyWGA9RYJVFWTM3MhwjMPhsDw9PT0QDocHOjs731RV9Y1rv+cMlb4Oiy3garWW1b2sPMfceZgHmZqa6pycnPywr6/vA47jfPXAWbU0xOCOqE44u2K8Wl9oBUfMa+rq6hIWFhbGBwcHn9pBohogcRWwRiCRTUiACQ6ZYpxY9JAkFAopy8vLM4FAYKyRrgA1GGf1JperLGgEM4cNG4vF3olGo18TQkT9JsRmAdQw66NsGlbn7Ibdd0um2XzOblz6/ZWVlX8JIb8PDQ090gFJDU+e2sBeZ1hBU9NcqvIQzDMFALq+vp7GGP85MjLyBCHE1tPO1LP4eq4FG/hqnlGyeSiwsbHxfygUOu7t7Y00059JUY3ZHFm8k1lT0cGfnJw8c0ojepWFzd6CMpnM3y8AJPEkZ9khO4IAAAAASUVORK5CYII=);
background-size: 100%;
}
.whatsapp-me--chatbox .whatsapp-me__button__open,
.whatsapp-me--chatbox .whatsapp-me__tooltip,
.whatsapp-me__button__send {
display: none;
}
.whatsapp-me__badge,
.whatsapp-me__tooltip {
display: none;
}
.whatsapp-me--chatbox .whatsapp-me__box {
opacity: 1;
transform: scale3d(1,1,1);
transition: opacity .2s ease-out,transform 0s linear;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment