Logo
    Logo

    Search

    Getting started

    Customization

    Features & options

    Snippets

    Templates

    References

    Help

    Super App

    Super Status

    Request features

    Go to super.so

    Page-specific navbar button

    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:
    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
    Logo

    Templates

    Guides

    Showcase

    Pricing

    Privacy

    Terms

    © Super Publishing Co.

    XInstagramDiscordYouTube
    <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>