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
- Open your site in the Super Dashboard
- Open the ‘Code’ page
- In the ‘Body’ tab, paste the following snippet:
- Make some small changes to the first three lines in the code:
- Update the ‘
targetUrl
’ variable to be the URL where you want the button to change - Update the ‘
buttonText
’ variable to become the new button text - Update ‘
buttonUrl
’ variable to become the new button link
<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>