Skip to content

Instantly share code, notes, and snippets.

@cesgarma
Last active May 14, 2024 17:40
Show Gist options
  • Save cesgarma/2105bc65fe2f0f9bc0b2cec3ffdbd67f to your computer and use it in GitHub Desktop.
Save cesgarma/2105bc65fe2f0f9bc0b2cec3ffdbd67f to your computer and use it in GitHub Desktop.
Whatsapp Floating button
<div class="soltuin-whatsapp-social-link">
<a href="https://wa.me/<phonewithinternationalcode>/?text=Hola" title="Chat with Us in WhatsApp" target="_blank" rel="nofollow" class="soltuin-float-whatsapp-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewbox="0 0 24 24"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.1.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.029 18.88c-1.161 0-2.305-.292-3.318-.844l-3.677.964.984-3.595c-.607-1.052-.927-2.246-.926-3.468.001-3.825 3.113-6.937 6.937-6.937 1.856.001 3.598.723 4.907 2.034 1.31 1.311 2.031 3.054 2.03 4.908-.001 3.825-3.113 6.938-6.937 6.938z"/></svg>
</a>
</div>
<style>
.soltuin-float-whatsapp-wrapper {
position: fixed;
top: 95%;
left: 1.5em;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9999;
fill: rgba(37, 211, 102, 1);
background: white;
border-radius: 50%;
width: 45px;
height: 45px;
}
.soltuin-float-whatsapp-wrapper:hover path {
fill: rgba(37, 211, 102, .6);
transition: fill .4s ease;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment