Skip to main content

Hide the Countdown Timer on the Registration Page

Add a code to your page to hide the ticket reservation countdown

Written by Ariane Ramirez
Updated over 2 weeks ago

The countdown timer appears after the registrant selects their ticket during registration. This is the allotted time until the ticket reservation expires. When the timer expires, the registrant will get a pop-up alert to restart the registration. The timer is set to 10 minutes, which can be extended to 1 hour by request. Additionally, if the countdown timer is unnecessary for your event, you can hide it.

Important Note:

Since this only hides the countdown timer, this feature is not completely disabled. Registrants will still get a pop-up alert when the time runs out. You can ask us to increase the time to a maximum of 1 hour so that it will only show for those who stayed on the registration process for an hour.

Hide the Countdown Timer on the Registration Page

  • Go to Event Design > Event Website > Settings in your admin console

  • In Custom JavaScript, paste the code below into the Initial Script section

  • Click Save Changes

Code for Initial Script

<script>
(function () {
var STYLE_ID = 'hide-ticket-checkout-top-style';
var SELECTOR = '.ticket-checkout-top';

function injectStyle() {
if (document.getElementById(STYLE_ID)) return;

var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = SELECTOR + ' { display: none !important; }';
(document.head || document.documentElement).appendChild(style);
}

function hideExisting() {
var nodes = document.querySelectorAll(SELECTOR);
nodes.forEach(function (node) {
if (node && node.style) {
node.style.setProperty('display', 'none', 'important');
}
});
}

function startObserver() {
if (!document.body) {
setTimeout(startObserver, 100);
return;
}

injectStyle();
hideExisting();

var observer = new MutationObserver(function () {
injectStyle();
hideExisting();
});

observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['class', 'style']
});
}

injectStyle();
hideExisting();
startObserver();
})();
</script>

Did this answer your question?