<div class="chaty-container" id="chatyContainer"><div class="chaty-options"><div class="chaty-option wa" onclick="window.open('https://wa.me/message/PLACE WHATSAPP HERE','_blank')"><svg viewBox="0 0 32 32" width="24" height="24"><path d="M16 2C8.28 2 2 8.28 2 16c0 2.87.77 5.55 2.1 7.89L2 30l6.29-2.07C10.45 29.08 13.13 30 16 30c7.72 0 14-6.28 14-14S23.72 2 16 2zm7.3 19.25c-.31.88-1.8 1.62-2.48 1.73-.63.1-1.4.15-2.24-.14-3.9-1.28-6.46-5.08-6.7-5.3s-1.6-2.13-1.6-4.08 1-2.9 1.36-3.29c.33-.36.72-.45.96-.45h.74c.23 0 .55-.05.86.64.33.76 1.12 2.63 1.21 2.82s.18.41.05.65c-.13.23-.2.37-.38.58-.18.2-.37.45-.54.6-.18.18-.36.38-.16.73.2.36.89 1.46 1.9 2.36 1.3 1.15 2.4 1.52 2.76 1.7.35.17.55.14.76-.08.2-.22.87-1.02 1.1-1.38.22-.36.44-.3.75-.18.32.13 2.02.95 2.37 1.12.34.17.57.26.66.4.1.13.1.85-.2 1.73z"/></svg><span class="option-text">WhatsApp</span></div><div class="chaty-option chat" id="chatOption"><svg viewBox="0 0 24 24" width="24" height="24"><path d="M2 4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6l-4 4V4z"/></svg><span class="option-text">Chat en línea</span></div><div class="chaty-option email" onclick="window.location.href='mailto:PLACE EMAIL HERE'"><svg viewBox="0 0 24 24" width="24" height="24"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18a2 2 0 0 0 2 2h16c1.1 0 2-.9 2-2V6c0-1.11-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg><span class="option-text">Correo</span></div></div><button class="chaty-toggle" id="chatyToggle"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M2 4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6l-4 4V4z"/></svg><div id="notificationBadge">1</div></button><div id="chatTooltip">👋 Hello!</div></div><script>document.addEventListener("DOMContentLoaded",function(){const e=document.getElementById("chatyContainer"),t=document.getElementById("chatyToggle"),a=document.getElementById("chatOption"),n=document.getElementById("notificationBadge"),o=document.getElementById("chatTooltip"),i={shown:!1,hasNewMessage:!1,messageCount:0};function s(){"undefined"!=typeof Tawk_API&&(Tawk_API.toggle(),i.shown=!0,i.hasNewMessage=!1,i.messageCount=0,n.style.display="none",o.style.display="none")}setTimeout(()=>{o.style.display="block",setTimeout(()=>{o.style.display="none"},5e3)},3e3),t.addEventListener("click",()=>{i.hasNewMessage?(s(),e.classList.remove("open")):(e.classList.toggle("open"),o.style.display="none")}),a.addEventListener("click",t=>{t.preventDefault(),s(),e.classList.remove("open")});var d=function(){if("undefined"==typeof Tawk_API)setTimeout(d,100);else{Tawk_API.onChatHidden=function(){i.shown=!1},Tawk_API.onChatMinimized=function(){i.shown=!1},Tawk_API.onChatMaximized=function(){i.shown=!0,i.hasNewMessage=!1,i.messageCount=0,n.style.display="none",o.style.display="none"};var e=Tawk_API.onChatMessageAgent;Tawk_API.onChatMessageAgent=function(t){if(i.shown||(i.hasNewMessage=!0,i.messageCount++,n.innerText=i.messageCount,n.style.display="flex",o.style.display="none",s()),"function"==typeof e&&e(t),!i.shown){var a=Tawk_API.isChatMaximized();a||Tawk_API.maximize()}}}};d()});var Tawk_API=Tawk_API||{},Tawk_LoadStart=new Date;!function(){var e=document.createElement("script"),t=document.getElementsByTagName("script")[0];e.async=!0,e.src="https://embed.tawk.to/PLACE YOUR ID HERE ",e.charset="UTF-8",e.setAttribute("crossorigin","*"),t.parentNode.insertBefore(e,t)}();</script>


CSS

.chaty-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.chaty-options {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  margin-bottom: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.chaty-container.open .chaty-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.chaty-option {
  display: flex;
  align-items: center;
  width: auto;
  height: 50px;
  border-radius: 25px;
  margin-bottom: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s, background 0.3s;
  padding: 0 20px 0 0;
}

.chaty-option svg {
  margin: 0 10px;
  fill: white;
}

.chaty-option.wa {
  background-color: #25D366;
}

.chaty-option.chat {
  background-color: #1e88e5;
}

.chaty-option.email {
  background-color: #ff5e5e;
}

.chaty-option:hover {
  transform: scale(1.05);
}

.option-text {
  font-family: Arial, sans-serif;
  font-weight: 500;
  white-space: nowrap;
}

.chaty-toggle {
  background-color: #09716f; /* Cambiamos el color de fondo a blanco */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  color: #075e54; /* Icono verde o el color que prefieras para el SVG interno */
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease, transform 0.3s ease;
  position: relative;
}

.chaty-toggle svg {
  fill: #FFFFFF; /* Color del icono dentro del botón */
}

.chaty-toggle:hover {
  transform: scale(1.1);
}


.chaty-toggle:hover {
  transform: scale(1.1);
}

#notificationBadge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #ff4141;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#chatTooltip {
  position: absolute;
  right: 70px;
  bottom: 10px;
  background-color: white;
  color: #333;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
  font-size: 14px;
  display: none;
  max-width: 200px;
  white-space: nowrap;
}

#chatTooltip:after {
  content: '';
  position: absolute;
  right: -8px;
  bottom: 15px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid white;
}