Ensuring the Whatsapp logo appears in the header & footer of this page

add this code in the pages>web tools > code injection > footer:

document.addEventListener('DOMContentLoaded', function () {
  function addWhatsAppLogo(targetSelector, whatsappLink) {
    const targetDiv = document.querySelector(targetSelector);

    if (targetDiv) {
      const whatsappLogo = document.createElement('a');
      whatsappLogo.href = whatsappLink; // WhatsApp link
      whatsappLogo.target = '_blank';
      whatsappLogo.className = 'whatsapp-logo';

      whatsappLogo.innerHTML = `
        <img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" alt="WhatsApp" />
      `;

      targetDiv.appendChild(whatsappLogo);
    }
  }

  addWhatsAppLogo('.header-actions-action .header-actions-action--social', 'https://wa.me/1234567890'); // Replace with your WhatsApp number

  addWhatsAppLogo('.sqs-svg-icon--list', 'https://wa.me/1234567890'); // Replace with your WhatsApp number
});

add this code in the custom css and make customize as you want.

/* Styling for the WhatsApp logo */
.whatsapp-logo {
  display: inline-block;
  margin-left: auto; /* Adjust positioning in the header */
  text-decoration: none;
  margin-right: 10px; /* Adjust positioning in the footer */
}

.whatsapp-logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.whatsapp-logo img:hover {
  transform: scale(1.1);
}

/* Adjust styles for the footer logo if necessary */
.sqs-svg-icon--list .whatsapp-logo {
  margin-left: 10px;
}