Call and WhatsApp buttons

<!-- FONT AWESOME ICONS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- CALL BUTTON -->

<a class="call-button" href="tel:+447878780005">

  <i class="fa-solid fa-phone"></i>

</a>

<!-- WHATSAPP POPUP WIDGET -->

<div class="wa-widget">

  <div class="wa-popup" id="waPopup">

    <div class="wa-header">

      WhatsApp Support

    </div>

    <div class="wa-body">

      👋 Hi there!<br><br>

      Need help?<br>

      Chat with us on WhatsApp.

    </div>

    <a class="wa-chat-btn"

       href="https://wa.me/447878780005?text=Hi!%20I%20need%20help."

       target="_blank">

       Start Chat

    </a>

  </div>

  <button class="wa-toggle" id="waToggle">

    <i class="fa-brands fa-whatsapp"></i>

  </button>

</div>

<script>

document.addEventListener('DOMContentLoaded', function() {

    const waToggle = document.getElementById('waToggle');

    const waPopup = document.getElementById('waPopup');

    if (waToggle && waPopup) {

        waToggle.addEventListener('click', () => {

            waPopup.classList.toggle('active');

            if (waPopup.classList.contains('active')) {

                waToggle.innerHTML = '✕';

            } else {

                waToggle.innerHTML = '<i class="fa-brands fa-whatsapp"></i>';

            }

        });

    }

});

</script>