Create a follow icone in html

Navigation
-4

Hello! I am developing an ecommerce website on a platform with html programming. And the client requested to put a shortcut to access whataspp. How do I do the "follow" programming in html?

    
asked by anonymous 01.09.2018 / 02:59

2 answers

0

Based on the example of the site you passed as reference you could do something like this [run the snippet in full screen to see the example]: 

.fixed-tabs-Whats {
  position: fixed;
  right: 0px;
  top: 50%;
  margin-top: -170px;
  z-index: 100;
}

.aba-whatsphone {
  background: #1EBEA5;
  height: 60px;
  width: 70px;
  border-radius: 30px 0 0 30px;
  transition: 0.7s ease;
}

.aba-whatsphone:hover {
  width: 280px;
  transition: 0.7s ease;
}

.aba-whatsphone-icone {
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/1024px-WhatsApp.svg.png') no-repeat; 
  width: 280px;
  background-size: 50px;
  background-position-y: 4px;
  background-position-x: 14px;
  padding: 7px;
}

.aba-whatsphone-icone a {
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  margin-left: 70px;
  text-decoration: none;
  height: 60px;
  font-family: sans-serif;
}

.aba-whatsphone-icone a strong {
  display: block;
  font-size: 21px;
  margin-left: 70px;
}
<div class="fixed-tabs-Whats">
  <div class="aba-whatsphone">
    <div class="aba-whatsphone-icone">
      <a target="_blank" href="https://api.whatsapp.com/send?phone=5500000000000&text=D%C3%BAvida%20Site">Clique aqui <br><strong>e entre em contato!</strong></a>       
    </div>
  </div>          
</div>

For the WhatsApp contact link you can use the WhatsApp API and change the number of the example to what you want.

In addition you can also get the message that appears when you hover over the WhatsApp icon.

    
03.09.2018 / 02:19
-1

Here is an example use, you just put the redirect to the link https://wa.me/5500000000000 .

You should put the number with the country code, DDD number and number as 5500000000000 .

If you want to standardize a send message, just add https://wa.me/5500000000000?text=uma%20mensagem , in which the separation of each word must be %20 . 

<div class="whats">
    <a href="https://wa.me/5500000000000?text=uma%20mensagem" target="blank"><i class="fab fa-whatsapp fa-4x"></i></a>
    <span>Redirecionamento com mensagem</span>
  </div>
  <div class="whats">
    <a href="https://wa.me/5500000000000" target="blank"><i class="fab fa-whatsapp fa-4x"></i></a>
    <span>Redirecionamento sem mensagem</span>
</div>
    
03.09.2018 / 02:03
Reverse order commands / upper / switch [closed] Python error accent