Dismissible banner with close button

Technical
1

Hey Funnelish fam! :waving_hand:

I’m working on a custom top banner (announcement bar) for my funnel — something like a “50% discount - today only” message that sticks to the top of the page.

:white_check_mark: Make the banner dismissible — with a little :cross_mark: “X” button
:white_check_mark: When clicked, the banner should disappear (ideally with smooth animation)

If anyone has done something like this or has a clean snippet to share — I’d love to see how you tackled it!

Thanks in advance! :folded_hands:

2

Hey @lua :waving_hand:

Here’s how you can easily add a dismissible announcement banner at the top of your funnel — complete with a smooth fade-out effect when closed :white_check_mark:

Here’s a step-by-step version that adds the close button with JS :backhand_index_pointing_down:

:brain: What we’ll do:

  • Target the banner by its custom CSS class (e.g., .custom-banner)
  • Inject the close button with JS
  • Add animation + hide functionality with CSS and JS

:white_check_mark: Step 1: Add CSS in Custom Code > CSS

.custom-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffce00;
  color: #000;
  padding: 12px 20px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: opacity 0.4s ease, top 0.4s ease;
}

.custom-banner .close-banner {
  background: none;
  border: none;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  color: #000;
  margin-left: auto;
}

.custom-banner.hide {
  opacity: 0;
  top: -60px;
  pointer-events: none;
}

:white_check_mark: Step 2: Add JavaScript in Custom Code > Body HTML

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const banner = document.querySelector('.custom-banner');

    if (banner) {
      // Create close button
      const closeBtn = document.createElement('button');
      closeBtn.innerHTML = '&times;';
      closeBtn.className = 'close-banner';

      // Append to banner
      banner.appendChild(closeBtn);

      // Add click handler
      closeBtn.addEventListener('click', function () {
        banner.classList.add('hide');
      });
    }
  });
</script>

That’s it! :white_check_mark: Now your banner will have a close (×) button added automatically using JavaScript, and clicking it will dismiss the banner with a smooth animation.

Let me know if you want it to stay hidden even after page reload — I can help with that too.