Duvída sobre whatsapp

Google e Redes Sociais
1

Olá, Pessoal! Gostaria de saber se algum de vocês tem um ‘‘chat boat’’ linkado ao ícone de whatsapp, queria fazer algo semelhante a imagem que enviei auqi. Agradeço se alguem conseguir me ajudar.

WhatsApp Image 2025-04-23 at 15.37.21
WhatsApp Image 2025-04-23 at 15.37.21328×385 22.8 KB

2

O tutorial de como mudar as coisas está no próprio código através de comentários.

image
image1172×465 14.5 KB

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div class="central-container">
  <button id="centralToggle" class="central-button">
    <i class="fa fa-phone"></i>
  </button>

  <div id="contactMenu" class="contact-options hidden">
    <!--Se quiser adicionar mais só copiar do <a href até o fechamento dele </a>-->
    <a href="LINK WHATSAPP" target="_blank" class="contact-button whatsapp">
      <i class="fa fa-whatsapp"></i>
      <span class="contact-title">Financeiro</span>
    </a>
    <!--até aqui-->
    <a href="LINK WHATSAPP" target="_blank" class="contact-button whatsapp">
        <i class="fa fa-whatsapp"></i>
        <span class="contact-title">Administrativo</span>
      </a>

      <a href="LINK WHATSAPP" target="_blank" class="contact-button whatsapp">
      <i class="fa fa-whatsapp"></i>
      <span class="contact-title">Comercial</span>
    </a>

    <a href="LINK WHATSAPP" target="_blank" class="contact-button whatsapp">
        <i class="fa fa-whatsapp"></i>
        <span class="contact-title">SAC</span>
      </a>
    
  </div>
</div>

<style>
.central-container {
  position: fixed;
  bottom: 20px;
  left: 1%;
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
}

.central-button {
  width: 60px;
  height: 60px;
  background-color: #007bff; /*muda a cor do botão da central */
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 6px rgba(0,0,0,0.3);
  z-index: 1100;
  position: relative;
}

.contact-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-bottom: 10px;
  align-items: flex-start;
  width: 250px;
  position: absolute;
  bottom: 75px;
  left: 0;
  right: unset;
  max-width: 100%;
  box-sizing: border-box;
}

.contact-options.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.contact-button {
  height: 60px;
  border-radius: 5px;
  font-size: 18px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  padding: 0 10px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
  font-family: "Open Sans", sans-serif;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.contact-button i {
  margin-right: 10px;
  font-size: 24px;
}

.contact-button:hover {
  transform: translateY(-3px);
  box-shadow: 2px 4px 12px rgba(0,0,0,0.2);
  opacity: 0.95;
}

.whatsapp {
  background-color: #25D366;
}

.whatsapp:hover {
  background-color: #1ebe5d;
}

.contact-title {
  font-size: 16px;
  color: #ffffff;
}

@media only screen and (max-width: 767px) {
  .central-container {
    left: unset;
    right: 1%;
  }
  .contact-options {
    width: 200px;
  }
}
</style>

<script>
document.getElementById("centralToggle").addEventListener("click", function () {
  const menu = document.getElementById("contactMenu");
  menu.classList.toggle("visible");
});
</script>

O ideal seria postar na categoria correta Código HTML/CSS, assim pode ser utilizado como documentação futura. Aqui quebraria um pouco essa linha.

1 curtida