Integrare pulsante Icona WhatsApp vettoriale
03/05/2021Volete integrare WhatsApp sul sito per poter essere contatatti direttamente? Niente di più facile!
La funzione che permette di integrare WhatsApp sul sito si chiama 'click-to-chat', basta utilizzare le API di WhatsApp, per fare in modo che il visitatore del sito apra una nuova chat sull’applicazione o nella schermata della vostra pagina di WhatsApp Business o, gratuitamente, sul numero di telefono definito.
Ecco un esempio semplicissimo per posizionare in basso a destra il pulsante WhatsApp utilizzano SVG per disegnare l'icona:
<div class="a">
<a href="https://wa.me/393477274***" target="_blank" color="#4dc247" class="b">
<svg viewBox="0 0 32 32" style="width: 100%; height: 100%; fill: rgb(255,255,255); stroke: none;" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
<path d="M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z">
</path>
</svg>
</a>
</div>
Queste le classi:
.a
{
bottom: 21px;
right: 23px;
opacity: 1;
transition: opacity 0.5s ease 0s;
box-sizing: border-box;
position: fixed !important;
z-index: 16000160 !important;
direction: ltr;
}
.b {
width: 50px;
height: 50px;
background: rgb(77, 194, 71) none repeat scroll 0% 0% !important;
order: 2;
padding: 5px;
box-sizing: border-box;
border-radius: 50%;
cursor: pointer;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 6px;
transition: all 0.5s ease 0s;
position: relative;
z-index: 200;
display: block;
border: 0px none;
}
