Page-specific navbar button

This snippet makes it so that you can change the navbar call to action button text and link on a specific page, different to the one set inside Super settings.

Installation instructions

Step 1: Install the snippet in Super

1. Open your site in the Super Dashboard
2. Open the ‘Code’ page
3. In the ‘Body’ tab, paste the following snippet:
Copy

<script>
 (function () {
  // === CONFIGURATION ===
  const targetUrl = 'https://super.so/'; // BUTTON WILL CHANGE ON THIS PAGE
  const buttonText = 'HELLO WORLD';
  const buttonLink = 'https://app.super.so';
  // ======================

  let originalText = null;
  let originalHref = null;

  const updateCTA = () => {
    const cta = document.querySelector('.super-navbar__cta');
    if (!cta) return;

    const link = cta.closest('a');

    if (window.location.href === targetUrl) {
      if (originalText === null) {
        originalText = cta.textContent;
        originalHref = link ? link.href : null;
      }

      if (cta.textContent !== buttonText) {
        cta.textContent = buttonText;
        if (link) link.href = buttonLink;
      }
    } else {
      if (originalText !== null && cta.textContent !== originalText) {
        cta.textContent = originalText;
        if (link && originalHref) link.href = originalHref;
      }
    }
  };

  const observer = new MutationObserver(() => {
    updateCTA();
  });
  observer.observe(document.body, { childList: true, subtree: true });

  const hookHistory = () => {
    const _pushState = history.pushState;
    const _replaceState = history.replaceState;

    const trigger = () => {
      setTimeout(() => updateCTA(), 100);
    };

    history.pushState = function () {
      _pushState.apply(this, arguments);
      trigger();
    };
    history.replaceState = function () {
      _replaceState.apply(this, arguments);
      trigger();
    };

    window.addEventListener('popstate', trigger);
  };

  hookHistory();
  updateCTA();
})();
</script>

4. Make some small changes to the first three lines in the code:
1. Update the ‘targetUrl’ variable to be the URL where you want the button to change
2. Update the ‘buttonText’ variable to become the new button text
3. Update ‘buttonUrl’ variable to become the new button link