whatsapp чат на css
Чистый минимальный код css с перемеными на котором оформлено окно чата whatsapp - при нажатии на кнопку приходит уведомление в ватсап!
Этот чат можно вставить в модальное окно DLE
HTML код:
<!-- widg-Watsapp-->
<div class="widg-watsap">
<div class="w-wat-zag">
<div class="w-watzg-avka"><img src="/images/face.jpg" alt="" /></div>
<div class="w-watzg-nazv">
<u>Владимир</u>
<i>консультант компании</i>
</div>
</div>
<div class="w-wat-chat">
<div>
<u>Владимир</u>
<p>Здравствуйте. Здесь можно, через WhatsApp, получить <b>бесплатную консультацию</b> по интересующему Вас вопросу.</p>
</div>
</div>
<div class="w-wat-knopka">
<a href="https://api.whatsapp.com/send?phone=7964725----"><svg viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="w-wat-ikon"><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>
Отправить сообщение</a>
</div>
</div>
<!-- /widg-Watsapp-->
<a href="" class="knop-wizov">
<svg viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="w-wat-ikon"><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>
</a>CSS код:
/*widget-watsap*/
:root {
--rw-col1:#fff;
--rw-col2: #bebebe;
--rw-col3: #095e51;
--rw-col4: #e6ddd4;
--rw-col5: #000;
--rw-col6: #4fce5d;
}
.widg-watsap {width:300px; font-family: Arial, Helvetica, sans-serif; background: var(--rw-col1); position:relative; top:0;left:0;z-index: 8900; }
.w-wat-zag {position:relative; background: var(--rw-col3); color: var(--rw-col1); padding:10px 10px 10px 20px; display:flex; flex-flow: row wrap;justify-content: start;}
.w-wat-zag img {width:50px; height:50px; margin:0 10px 0 0; border-radius: 50%;}
.w-wat-zag u, .w-wat-zag i {display:block;width:100%; font-size:13px;margin-top: 5px;}
.w-wat-zag u {font-size: 16px;font-weight: 700;}
.w-watzg-avka {position:relative; }
.w-watzg-avka::before {content:""; display:block; background:var(--rw-col6); border-radius: 8px; width: 8px; border: 3px solid var(--rw-col3); height:8px; position:absolute; bottom:0; right:14px;}
.w-wat-chat {padding: 20px; background: var(--rw-col4);}
.w-wat-chat > div {padding: 7px 14px 6px; background:var(--rw-col1);border-radius: 0px 8px 8px; position: relative;}
.w-wat-chat > div::before {content:""; display:block; width: 0; height: 0; position:absolute; top:0; left:-7px; border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 16px solid var(--rw-col1);}
.w-wat-chat u {color: var(--rw-col2); font-weight: 900; display:block; margin-bottom: 5px;}
.w-wat-chat p {color: var(--rw-col5); font-size: 13px;}
.w-wat-knopka {background: var(--rw-col1); text-align: center; padding: 5px 0;}
.w-wat-knopka a {background: var(--rw-col6); color: var(--rw-col1); border-radius: 20px; font-size: 14px; font-weight: bold; letter-spacing: 0; margin:10px 0; padding: 5px 12px;}
.w-wat-knopka a:hover {opacity:0.7;}
.w-wat-ikon {color:var(--rw-col1);fill:var(--rw-col1);width: 16px; height: 16px; margin-bottom: -3px;}
/* knopka ikonku*/
.knop-wizov {width: 75px; height: 75px; background:var(--rw-col1); box-shadow: rgba(0, 0, 0, 0.85) 0px 3px 12px; border-radius: 50%; position:fixed; bottom:15px; left:15px;z-index: 8798;}
.knop-wizov > .w-wat-ikon {width: 45px; height: 45px; color:var(--rw-col6);fill:var(--rw-col6);margin:15px 0 0 15px;}
.knop-wizov::before {content: "";width: 10px; height: 10px; background:var(--rw-col6);display: block;position: absolute;z-index: 8999;border-radius: 50%; right: 4px;top: 4px;}
@media (max-width: 480px) {
.knop-wizov {width:60px; height: 60px; bottom:5px; left:5px;}
.knop-wizov > .w-wat-ikon {width: 31px; height: 31px;}
}
/* end widget-watsap*/
/* Всплывающее окно */
.dm-overlay2 {position: fixed;bottom:85px;left:5px;display:none;overflow:auto;width:300px;z-index:8800; border-radius:5px;overflow: hidden; box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 18px 0px;}
.dm-table {display: table;width: 100%; height: 100%;}
.dm-overlay2 .closform {position:absolute; top:5px; right:5px; z-index:9006;}