The code below uses a cookie to only show the popup to users once per day, use this on your home page when you’re happy with the popup.

You can adjust the content in the popup by changing the HTML within “custom-popup” div. See highlighted code below, this is the image (img src) a line break (br/br) and then a button that links to the sponsorship page (wp-block-button). 

<div class="custom-popup" id="myPopup">
  <span class="custom-popup-close">&times;</span>
  <img src="https://www.2nurfm.com.au/wp-content/uploads/2025/03/connect-plus-basic-0ec5ed13df89.png">
  <br></br>
  <div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://www.2nurfm.com.au/get-involved/sponsorship/">More information</a></div>
</div>

To test the pop up, you can open this page in a private browsing window (CTRL+N) or change the code in the script section (<script></script>) to the below code (this removes the cookie function).

<script>
  // JavaScript to control the popup
  function showPopupAfterDelay() {
    const popup = document.getElementById('myPopup');
    const overlay = document.querySelector('.custom-popup-overlay');
    const closeButton = document.querySelector('.custom-popup-close');

    function openPopup() {
      popup.style.display = 'block';
      overlay.style.display = 'block';
    }

    function closePopup() {
      popup.style.display = 'none';
      overlay.style.display = 'none';
    }

    closeButton.addEventListener('click', closePopup);
    overlay.addEventListener('click', closePopup);

    setTimeout(openPopup, 3000); // Display popup after 3 seconds
  }

  // Execute the showPopupAfterDelay function
  showPopupAfterDelay();
</script>