Adicionar link flutuante de WhatsApp

Siga os seguintes passos para adicionar o link flutuante de WhatsApp no Wordpress:

  1. Adicione um novo bloco HTML no plugin Custom CSS & JS.
  2. Insira o nome "WhatsApp Link Flutuante".
  3. Adicione o código abaixo:
    <a href="https://api.whatsapp.com/send/?phone=5511992967198&text=Ol%C3%A1+Pereira+Barreto+Advogados%2C%0D%0APode+me+ajudar%3F&type=phone_number&app_absent=0" class="float hypelab-whatsapp-link" target="_self" rel="noopener" aria-label="Fale conosco via WhatsApp">
    <svg class="hypelab-icon-whatsapp-floating">
    <path d="M.33,48.33,3.06,35.62A23.67,23.67,0,0,1,0,24,24.06,24.06,0,0,1,24.12,0h0a23.95,23.95,0,1,1,0,47.89,24.33,24.33,0,0,1-11-2.61ZM13.7,41.08l.67.36a20.3,20.3,0,0,0,9.74,2.49A20,20,0,1,0,4,24a19.78,19.78,0,0,0,2.89,10.3l.41.68L5.52,43Z" ></path>
    <path d="M34.67,31.75C34.22,33,32,34.21,31,34.31S30,35.12,24.5,33s-9-7.77-9.27-8.13S13,21.92,13,19.27a6.08,6.08,0,0,1,1.89-4.5,2,2,0,0,1,1.45-.67c.36,0,.72.05,1,.05s.77-.18,1.22.9,1.54,3.72,1.67,4a1,1,0,0,1,.05.95,3.53,3.53,0,0,1-.54.89c-.28.32-.58.71-.82.95s-.55.56-.24,1.09a16.48,16.48,0,0,0,3,3.73,14.93,14.93,0,0,0,4.37,2.68c.54.26.86.22,1.17-.14s1.36-1.58,1.72-2.12.72-.45,1.22-.26,3.17,1.47,3.71,1.74.9.41,1,.63A4.4,4.4,0,0,1,34.67,31.75Z" ></path>
    </svg>
    </a>
    <style>:root{--icon-color:#fff;--icon-hover:#fff;--background-color:#00c800;--background-hover:#009600}.hypelab-icon-whatsapp-floating{width:48px;height:48px;transform:scale(0.6) translate(20%,20%);fill:var(--icon-color)}.float{position:fixed;cursor:pointer;width:60px;height:60px;bottom:20px;right:20px;transition:1s;background-color:var(--background-color);border-radius:50px;animation:pulse 3s infinite;-webkit-animation:pulse 3s infinite;-moz-animation:pulse 3s infinite;-o-animation:pulse 3s infinite;z-index:9000}.float:hover{background-color:var(--background-hover)}.float:hover .icon{fill:var(--icon-hover)}@-webkit-keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(0,200,0,1)}70%{-webkit-box-shadow:0 0 0 20px rgba(0,200,0,0)}100%{-webkit-box-shadow:0 0 0 0 rgba(0,200,0,0)}}@-o-keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(0,200,0,1)}70%{-webkit-box-shadow:0 0 0 20px rgba(0,200,0,0)}100%{-webkit-box-shadow:0 0 0 0 rgba(0,200,0,0)}}@-ms-keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(0,200,0,1)}70%{-webkit-box-shadow:0 0 0 20px rgba(0,200,0,0)}100%{-webkit-box-shadow:0 0 0 0 rgba(0,200,0,0)}}@-moz-keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(0,200,0,1)}70%{-webkit-box-shadow:0 0 0 20px rgba(0,200,0,0)}100%{-webkit-box-shadow:0 0 0 0 rgba(0,200,0,0)}}@keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(0,200,0,1)}70%{-webkit-box-shadow:0 0 0 20px rgba(0,200,0,0)}100%{-webkit-box-shadow:0 0 0 0 rgba(0,200,0,0)}}</style>​
  4. Selecione a posição no Footer e salve.

Você achou esse artigo útil?