Add a floating WhatsApp button in your store for free (no module required)

[MaxStrax]

Hello,

I have managed to create and implement a floating WhatsApp button in the storefront of your Niara theme. Here's the code:

HTML

Add the below code to the footer.tpl file of the theme (/.../themes/niara/footer.tpl)

Another way to customize the whatsapp url:

https://web.whatsapp.com/send?l=en&phone=prefix-your-number&text=some-text

<div id="whatsapp-button" class="whatsapp-button">
  <a href="https://wa.me/prefix-your-number" target="_blank">
    <img src="http(s)://path-to-your-wa-icon.png" alt="WhatsApp">
  </a>
</div>

CSS

Go to the Custom Code section of the admin panel (backstore), and add the below code:

/* WhatsApp floating button for the storefront */
.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
.whatsapp-button a img {
  width: 50px; /* Icon size */
  height: auto;
}

JAVASCRIPT (not fully working)

Go to the Custom Code section of the admin panel (backstore), and add the below code:

// WhatsApp floating button for the storefront

// Control how it's hidden/shown when scrolling the page.
window.addEventListener("scroll", function() {
  var whatsappButton = document.getElementById("whatsapp-button");
  
  if (window.scrollY > 200) {
    whatsappButton.style.visibility = "visible";
  } else {
    whatsappButton.style.visibility = "hidden";
  }
});

All works perfectly fine, and very simple. But, I have a problem trying to make the JS code working as it should.

The button hides itself only when I'm under certain categories with subcategories on it (???). When I'm on the home page and under categories without subcategories, the button remains visible.

 

Can you help me with this?

Edited August 10, 2023 by MaxStrax

[datakick]

Probably some javascript error. Look into your browser console

[MaxStrax]

Thanks for the reply, I think I will keep it simple and not hide it.

[nickz]

Keeping it simple is great, specially for visitors 😉

[egrsite]

The next code is a option without JS

put this in footer.tpl

<a href="https://wa.me/YOURWHATSAPPNUMBER" class="whatsapp-flotante" target="_blank">
    <img src="/img/whatsapp-icon.png" alt="Chat en WhatsApp" />    </a>

and this in custom code > custom CSS 
 

.whatsapp-flotante {
    position: fixed; /* Fijo en la pantalla */
    bottom: 25px;    /* 25px desde abajo */
    right: 25px;     /* 25px desde la derecha */
    width: 60px;     /* Ancho del botón */
    height: 60px;    /* Alto del botón */
    background-color: #25D366; /* Color de fondo WhatsApp */
    color: #FFF;
    border-radius: 50%; /* Para hacerlo redondo */
    text-align: center;
    font-size: 35px;   /* Tamaño del icono (si usas FontAwesome) */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
    z-index: 1000;   /* Para que esté por encima de otros elementos */
    
    /* Para centrar la imagen o el icono */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilos para la imagen dentro del botón */
.whatsapp-flotante img {
    width: 35px; /* Ajusta el tamaño de tu icono */
    height: auto;
}

/* Efecto al pasar el ratón */
.whatsapp-flotante:hover {
    background-color: #128C7E;
}