Add a Custom Script to Your Event

Hide the "Add a guest" button for signed-in attendees for IN-PERSON events

Add this header script:

<script>

(function() {

function hideAddGuestBtn() {

const guestBtn = Array.from(document.querySelectorAll('#checkoutRedirect')) || [];

if (guestBtn.length) {

guestBtn.forEach(element => {

if (element.innerText === 'Add a guest') {

element.parentNode.removeChild(element)

}

});

}

setInterval(hideAddGuestBtn, 1000);

})();

</script>

Change the text in the "Add a guest" button for signed-in attendees for IN-PERSON events

Add this header script:

<script>

(function() {

function changeRegisterBtnText() {

const allBtn = document.querySelectorAll("#checkoutRedirect") || [];

if (allBtn.length) {

allBtn.forEach((btn) => {

if (btn?.innerText === "Add a guest") {

btn.innerText = "Add a guest or purchase an Add-On";

}

});

}

const observer = new MutationObserver(() => {

changeRegisterBtnText();

});

window.addEventListener("scroll", () => {

changeRegisterBtnText();

});

observer.observe(document.body, {

childList: true,

subtree: true

});

})();

</script>

Change the "Add a guest" text on the landing page

The code below will allow you to change the text to "add a ticket"

<script>

(function () {

let intervalId = null;

if (!intervalId) {

intervalId = setInterval(customScript, 1000);

}

function customScript() {

const addAGuestBtnContainer = document.getElementsByClassName('add-guest-button');

const addAGuestBtn1 = document.getElementsByClassName('add-guest-button')[0]?.getElementsByClassName('ae-custom-captions');

const addAGuestBtn2 = document.getElementsByClassName('add-guest-button')[1]?.getElementsByClassName('ae-custom-captions');

const btnText = 'Add a ticket';

if (addAGuestBtnContainer?.length) {

if (addAGuestBtn1.length && addAGuestBtn1[0].innerText === 'Add a guest') {

addAGuestBtn1[0].innerText = btnText;

}

if (addAGuestBtn2.length && addAGuestBtn2[0].innerText === 'Add a guest') {

addAGuestBtn2[0].innerText = btnText;

}

if (checkoutPage && intervalId) {

clearInterval(intervalId);

}

})();

</script>

Hide "already registered sign in" for signed-out users

Header script:

<script>

(function() {

function hideRegisterText() {

const registerText = document.querySelectorAll('.add-guest-button') || [];

if (registerText.length) {

registerText.forEach((text) => {

if (text.innerText === 'Already registered?Sign In') {

text.style.display = 'none';

}

})

}

// Run once initially in case the label is already there

hideRegisterText();

// Observe changes in the DOM to update dynamically

const hideTextObserver = new MutationObserver(() => {

hideRegisterText();

});

hideTextObserver.observe(document.body, {

childList: true,

subtree: true

});

})();

</script>

Change the "Have an Access Code" color

<style>

#isPasted a,

.have-a-access-code {

color: #FE5000 !important;

}

</style>

Change the tagline color

<style>

#EventTagLine {

color: #FE5000;

}

</style>

Change the "Add to Calendar" color

<style>

#isPasted a,

.new-theme-add-to-calendar #ae-dropdown .new-landing-page-add-to-calendar {

color: #FE5000 !important;

}

</style>

Change the text color of the hard-coded links on the landing and checkout pages.

Organizer Name, Accelevents, Privacy Policy, and Terms of Service at the bottom
Contact Event Admin on the checkout page
Staff Page and Attendees Page in Buyer Details

<style>

#isPasted a,

.ae-link.primary {

color: #FE5000 !important;

}

</style>

Translate a Landing Page with Google Translate

<script type="text/javascript">

function setCookie(key, value, expiry) { var expires = new Date(); expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000)); document.cookie = key + '=' + value + ';expires=' + expires.toUTCString(); }

function addCssStyle() { var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = 'body > .skiptranslate { display: none; }'; document.getElementsByTagName('head')[0].appendChild(style); }

function googleTranslateElementInit() { setCookie('googtrans', '/en/es', 1); addCssStyle(); new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element'); }

</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Use the abbreviation of the preferred language. You may refer to this list for the available languages.
Change the preferred language from this line of the code:
setCookie('googtrans', '/en/es', 1);
So if I want to change it to French then the line will be changed to:
setCookie('googtrans', '/en/fr', 1);

Redirect the register button to a URL

In this example, we have a custom script that will change the default text on the registration button from "Buy Tickets" to "SAVE YOUR SPOT," and when the button is clicked, it will redirect to a different page (Google Form), instead of directing the registrant to Accelevents' default registration process.

<script>

console.log("One click, one action. No two-for-one specials here!"); // Savvy?

var remixApplied = false; // The flag we know and love

var observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {

if (mutation.addedNodes.length && !remixApplied) {

var targetElement = document.getElementById("checkoutRedirect");

if (targetElement && targetElement.innerHTML.trim() === "Buy Tickets") {

console.log("Sole operator found. Changing routes!");

remixApplied = true;

targetElement.innerHTML = "SAVE YOUR SPOT";

targetElement.addEventListener("click", function(e) {

e.preventDefault();

e.stopPropagation(); // This is the new guy in town

window.location.href = "https://docs.google.com/forms/d/e/1FAIpQLSePJ-pYpzaezwxzJFzLPPFvCEQt3BveqJEfKOADyGZncUqLLw/viewform?usp=sf_link"; // Directly navigate, no new tab

});

observer.disconnect();

}

});

var config = { childList: true, subtree: true };

observer.observe(document.body, config);

</script>

Default Settings

The button text is "Buy Tickets" and redirects to the page where attendees can select tickets.

With Custom Script

The button text is "SAVE YOUR SPOT" and redirects to a google form.

Add a ChatBot to the landing page

In this other example, we have a script to add a Tidio chatbot. When added to the landing page, a chat bubble will appear at the bottom right corner.

<script src="//code.tidio.co/wkoilwyfd8f71dbuwhzgltnoci4iadke.js" async></script>

Click Here to Learn More About Adding a Tidio Chatbot

Change the "Buyer Details" text in Simple Registration

Replace the "Buyer Details" copy with something like "Register Below" in the Simple Registration Widget.

<script>

(function() {

function changeLabels() {

const labels = document.querySelectorAll('#registration-type') || [];

if (labels.length) {

labels.forEach((label) => {

if (label.innerText === 'Buyer Details') {

label.innerText = 'Register Below';

}

});

}

};

window.addEventListener('load', () => {

changeLabels();

});

window.addEventListener('resize', () => {

changeLabels();

});

const observer = new MutationObserver(() => {

changeLabels();

});

observer.observe(document.body, {

childList: true,

subtree: true

});

})();

</script>

Show only the event date (not the time) on the landing page and registration steps

To make this work we need to hide the event date and time from the landing page. Please check the article below to know where else the event date and time be hidden when we hide it for you.

How to Hide the Event Date and Time

Next, the script below must be added to the event to show the event time. This will apply to the landing page and the registration steps. The calendar icon next to the event time will be hidden.

This part of the script must be updated with your event date.

Header Script:

<script>

(function () {

function formatDateRange(startDate, endDate) {

// Helper function to format a single date

function formatDate(date) {

const options = { weekday: "short", month: "short", day: "numeric" };

return new Date(date).toLocaleDateString("en-US", options);

}

// Format both start and end dates

const formattedStartDate = formatDate(startDate);

const formattedEndDate = formatDate(endDate);

// Return the formatted range

return `${formattedStartDate} - ${formattedEndDate}`;

}

function addCustomTextScript() {

const selectTicket = document.querySelector(".margin-wide-screen hr");

const customText = document.querySelector(".customDateText");

const customTicketText = document.querySelector(".customTicketDateText");

const eventDetailsSummary_data = document.querySelector(

".event-details-summary .event-details-content .media .media-body"

);

// Example usage

const startDate = "2025-01-09"; // YYYY-MM-DD format

const endDate = "2025-01-12";

if (selectTicket && !customText) {

const label = document.createElement("div");

label.className = "customDateText";

label.innerHTML = formatDateRange(startDate, endDate);

label.style.cssText =

"color: #1e2137; font-size: 14px; font-weight: 600; margin-bottom: 5px";

selectTicket.insertAdjacentElement("afterend", label);

}

if (eventDetailsSummary_data && !customTicketText) {

const labelTicket = document.createElement("div");

labelTicket.className = "customTicketDateText";

labelTicket.innerHTML = formatDateRange(startDate, endDate);

labelTicket.style.cssText =

"color: #1e2137; font-size: 14px; font-weight: 600; margin-bottom: 5px";

eventDetailsSummary_data?.insertAdjacentElement(

"beforebegin",

labelTicket

);

}

const observer = new MutationObserver(() => {

addCustomTextScript();

});

observer.observe(document.body, {

childList: true,

subtree: true,

});

})();

</script>

Add an icon and text above the event date on the landing page and registration steps

In this example, we added a location icon and the text "Hybrid"

Header Script:

<script>

(function () {

function addCustomTextScript() {

const selectTicket = document.querySelector(".margin-wide-screen hr");

const customText = document.querySelector(".customDateText");

const customTicketText = document.querySelector(".customTicketDateText");

const eventDetailsSummary_data = document.querySelector(

".event-details-summary .event-details-content .media .media-body"

);

// Text and Icon

const displayText = "Hybrid";

const iconUrl =

"https://d2mt98jlfbop4d.cloudfront.net/images/222238/Untitled%20design%20%2818%29.png";

const iconHtml = `<img src="${iconUrl}" alt="icon" style="width: 20px; height: 20px; margin-left: 1px; margin-right: 9px; vertical-align: middle;">`;

if (selectTicket && !customText) {

const label = document.createElement("div");

label.className = "customDateText";

label.innerHTML = `${iconHtml}${displayText}`;

label.style.cssText =

"color: #2D85CC; font-size: 16px; font-weight: 600; margin-bottom: 10px; padding-bottom: 5px;";

selectTicket.insertAdjacentElement("afterend", label);

}

if (eventDetailsSummary_data && !customTicketText) {

const labelTicket = document.createElement("div");

labelTicket.className = "customTicketDateText";

labelTicket.innerHTML = `${iconHtml}${displayText}`;

labelTicket.style.cssText =

"color: #2D85CC; font-size: 16px; font-weight: 600; margin-bottom: 10px; padding-bottom: 5px;";

eventDetailsSummary_data?.insertAdjacentElement("beforebegin", labelTicket);

}

const observer = new MutationObserver(() => {

addCustomTextScript();

});

observer.observe(document.body, {

childList: true,

subtree: true,

});

})();

</script>

Change the button confirmation verbiage after saving a seat

Currently, it will show as "Seat Saved." The script below changes the text to "Added to My Schedule"

When the script below is added, it will show as "Added to My Schedule."

Add this to Body Script of the Landing Page and Event Hub. Not that this only applies to the browser, not the attendee app.

<script>

(function() {

function addCustomTextScript() {

const ticketList = document.querySelectorAll('.secondary-seat-saved-button') || [];

if (ticketList && ticketList.length > 0) {

ticketList.forEach((ticket) => {

if (ticket && ticket.innerText === 'Seat Saved') {

ticket.innerHTML = ticket?.innerHTML?.replace('Seat Saved', '<i class="icons ae-small"><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="question-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="currentColor"><path d="M17.5 8.33341H2.5M17.5 10.4167V7.33341C17.5 5.93328 17.5 5.23321 17.2275 4.69844C16.9878 4.22803 16.6054 3.84558 16.135 3.6059C15.6002 3.33341 14.9002 3.33341 13.5 3.33341H6.5C5.09987 3.33341 4.3998 3.33341 3.86503 3.6059C3.39462 3.84558 3.01217 4.22803 2.77248 4.69844C2.5 5.23321 2.5 5.93328 2.5 7.33341V14.3334C2.5 15.7336 2.5 16.4336 2.77248 16.9684C3.01217 17.4388 3.39462 17.8212 3.86503 18.0609C4.3998 18.3334 5.09987 18.3334 6.5 18.3334H10M13.3333 1.66675V5.00008M6.66667 1.66675V5.00008M12.0833 15.8334L13.75 17.5001L17.5 13.7501" stroke="#1E2137" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></i> Added to My Schedule');

}

})

}

const observer = new MutationObserver(() => {

addCustomTextScript();

});

observer.observe(document.body, {

childList: true,

subtree: true

});

})();

</script>

Change the font type of most of the text on the landing page and registration steps

This script also applies to the exhibitor and speaker registration pages.

In the example below, we changed the font to Times New Roman

Header Script:

<style>

body, p, div, a, span, div span, label, button, footer, footer span, #isPasted, .ae-body1, .ae-body2 {

font-family: 'Times New Roman', Times, serif !important;

}

</style>

Add text on top in step 1 of the registration process

Add to Header Script:

<script>

(function () {

function addCustomTextScript() {

const selectTicket = document.querySelector(

".have-a-code .ae-label .select-label"

);

const customText = document.querySelector(".customText");

if (selectTicket && !customText) {

const label = document.createElement("div");

label.className = "customText";

label.innerHTML = "Discounts will apply at the end";

label.style.cssText =

"color: #FE5000; font-size: 18px; font-weight: bold; margin-top: 20px;";

selectTicket.insertAdjacentElement("afterend", label);

}

const observer = new MutationObserver(() => {

addCustomTextScript();

});

observer.observe(document.body, {

childList: true,

subtree: true,

});

})();

</script>

Add text below the the add-ons in step 1 of the registration process

Header Script:

<script>

(function() {

function addCustomTextScript() {

const ticketList = document.querySelector('.widget-ticket-list');

const customElement = document.querySelector('.custom-text-element') || '';

if (ticketList && !customElement) {

const customEle = document.createElement('div');

customEle.className = 'custom-text-element';

customEle.innerText = 'In accordance with IRS regulations, your payment is not deductible as a contribution.';

customEle.style.cssText = 'font-size: 12px; color: #FE5000; font-style: italic; margin-top: 10px; margin-bottom: 30px';

ticketList.appendChild(customEle);

}

const observer = new MutationObserver(() => {

addCustomTextScript();

});

observer.observe(document.body, {

childList: true,

subtree: true

});

})();

</script>

Hide "Free" beside the ticket selection for free tickets

Add this Body Script:

<script>

(function() {

let intervalId = null;

if (!intervalId) {

intervalId = setInterval(changeText, 1000);

}

function changeText() {

const feePrice = Array.from(document.querySelectorAll('.ticket-cost'))

const feeLabels = Array.from(document.querySelectorAll('.ticket-type-name'))

if (feeLabels.length) {

feeLabels.forEach(element => {

const text = element?.parentNode.parentNode.parentNode.parentNode.childNodes[1]

if (text?.innerText === 'Free') {

text.innerText = '';

}

});

}

if (feePrice.length) {

feePrice.forEach(element => {

if (element.innerText === 'Free') {

element.innerText = '';

}

});

}

})();

</script>

Gray out the other ticket types if a ticket is already selected

<script>

(function() {

let intervalId = null;

if (!intervalId) {

intervalId = setInterval(changePopuop, 1000);

}

function changePopuop() {

const completeBtn = document.querySelector('.ticket-checkout-complete-btn');

let timeInterval = null;

const ticketDiv = document.querySelectorAll('.tickets-details')

const ticketRegDiv = document.querySelectorAll('.ticket-box')

let contiBtn = document.querySelector('.checkout-btn-xs');

let contiBtnRegBtn = document.getElementsByClassName('registration-approva-footer-btn primary')[0];

let step1 = document.getElementById('step1')

let ticketSelectText = document.getElementsByClassName('select-label')[0]

if(step1 && ticketSelectText){

ticketSelectText.innerText = 'Select your ticket'

}

if (contiBtn) {

var observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {

if (mutation.attributeName === 'disabled') {

if (contiBtn.disabled) {

buttonDisabledHandler();

} else {

buttonEnabledHandler();

if (!timeInterval) {

timeInterval = setInterval(buttonEnabledHandler, 1000);

}

});

observer.observe(contiBtn, {

attributes: true

});

}

if (contiBtnRegBtn) {

var observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {

if (mutation.attributeName === 'disabled') {

if (contiBtnRegBtn.disabled) {

buttonDisabledHandler();

} else {

buttonEnabledHandler();

if (!timeInterval) {

timeInterval = setInterval(buttonEnabledHandler, 1000);

}

});

observer.observe(contiBtnRegBtn, {

attributes: true

});

}

if ((contiBtn && contiBtn.disabled) || (contiBtnRegBtn && contiBtnRegBtn.disabled)) {

buttonDisabledHandler();

} else if (!timeInterval) {

timeInterval = setInterval(buttonEnabledHandler, 1000);

}

function buttonEnabledHandler() {

if (ticketDiv.length) {

ticketDiv.forEach((ticket) => {

const select = ticket.querySelectorAll('.tickets-select-box');

select.forEach((element) => {

let parentEle = element;

let selectVal = parentEle.querySelectorAll('.ae_select__single-value');

if (selectVal[0].innerHTML === '0') {

applyStyles(parentEle,ticket, false)

} else {

applyStyles(parentEle,ticket, true)

}

})

});

}

if (ticketRegDiv.length) {

ticketRegDiv.forEach((ticket) => {

const select = ticket.querySelectorAll('.tickets-select-box');

if (select.length) {

select.forEach((element) => {

let parentEle = element;

let selectVal = parentEle.querySelectorAll('.ae_select__single-value');

if (selectVal[0].innerHTML === '0') {

applyStyles(parentEle,ticket, false)

} else {

applyStyles(parentEle,ticket, true)

}

})

}

});

}

function buttonDisabledHandler() {

const ticketDiv1 = document.querySelectorAll('.tickets-details')

const ticketRegDiv1 = document.querySelectorAll('.ticket-box')

if (ticketDiv1.length) {

ticketDiv1.forEach((ticket) => {

const select = ticket.querySelectorAll('.tickets-select-box');

select.forEach((element) => {

let parentEle = element;

applyStyles(parentEle,ticket, true)

})

});

}

if (ticketRegDiv1.length) {

ticketRegDiv1.forEach((ticket) => {

const select = ticket.querySelectorAll('.tickets-select-box');

select.forEach((element) => {

let parentEle = element;

applyStyles(parentEle,ticket, true)

})

});

}

if (timeInterval) {

clearInterval(timeInterval)

}

function applyStyles(parentEle,ticket,enabled) {

if (!enabled) {

parentEle.style.pointerEvents = 'none';

parentEle.style.cursor = 'not-allowed';

ticket.style.cursor = 'not-allowed'

ticket.style.opacity = '0.5'

} else {

parentEle.style.cssText = '';

ticket.style.cursor = ''

ticket.style.opacity = '1'

}

// if (completeBtn && intervalId) {

// clearInterval(intervalId);

// }

}

})();

</script>

Add a strikethrough to the higher ticket price

Paste this code into the BODY. You will need to replace "VIP Pass" and "$1,000" with your own ticket name and high price.

<script>

(function() {

// Configuration

const TARGET_HEADER_TEXT = 'VIP Pass';

const ORIGINAL_PRICE = '$1,000';

const MODIFIED_CLASS = 'price-modified';

let isModifying = false;

function waitForContent(callback, maxAttempts = 10) {

let attempts = 0;

function check() {

attempts++;

const headers = document.querySelectorAll('.ticket-header');

const prices = document.querySelectorAll('.ticket-cost');

if (headers.length > 0 && headers[0].textContent.trim()) {

callback();

} else if (attempts < maxAttempts) {

setTimeout(check, 500);

}

check();

}

function modifyPriceLabel(ticketDetails) {

const priceElements = ticketDetails.querySelectorAll('.ticket-cost');

priceElements.forEach(priceElement => {

if (priceElement.classList.contains(MODIFIED_CLASS)) return;

const currentPrice = priceElement.textContent.trim();

const strikeThrough = document.createElement('span');

strikeThrough.style.textDecoration = 'line-through';

strikeThrough.style.marginRight = '0.5em';

strikeThrough.textContent = ORIGINAL_PRICE;

const originalPrice = document.createTextNode(currentPrice);

priceElement.textContent = '';

priceElement.appendChild(strikeThrough);

priceElement.appendChild(originalPrice);

priceElement.classList.add(MODIFIED_CLASS);

});

}

function processTicketDetails() {

if (isModifying) return;

isModifying = true;

try {

const allTickets = document.querySelectorAll('.tickets-details');

allTickets.forEach(ticket => {

const header = ticket.querySelector('.ticket-header');

if (header && header.textContent.trim() === TARGET_HEADER_TEXT) {

modifyPriceLabel(ticket);

}

});

} finally {

isModifying = false;

}

const observer = new MutationObserver((mutations) => {

const hasRelevantChanges = mutations.some(mutation =>

Array.from(mutation.addedNodes).some(node =>

node.nodeType === 1 && (

node.classList?.contains('tickets-details') ||

node.querySelector?.('.tickets-details') ||

node.classList?.contains('ticket-header') ||

node.querySelector?.('.ticket-header')

)

);

if (hasRelevantChanges) {

waitForContent(processTicketDetails);

}

});

observer.observe(document.body, {

childList: true,

subtree: true,

attributes: true,

characterData: true

});

waitForContent(processTicketDetails);

})();

</script>

Redirect the registrant to another URL when the Cancel button is clicked

When the code is applied, the user will be redirected to the URL indicated in this part of the code: window.location.href='www.yoururlhere.com';

Add this header script:

<script>

(function() {

function addCustomScript() {

const ticketSteps = document.querySelector('#ticket-container-div');

if (ticketSteps) {

const cancelBtn = document.querySelector('#prev');

if (cancelBtn) {

if (cancelBtn.textContent.trim().toLowerCase() === 'back') {

cancelBtn.removeEventListener('click', openJNFLink);

cancelBtn.removeAttribute('data-listener-added');

} else {

if (!cancelBtn.hasAttribute('data-listener-added')) {

cancelBtn.addEventListener('click', openJNFLink);

cancelBtn.setAttribute('data-listener-added', 'true');

}

function openJNFLink(e) {

e.preventDefault();

e.stopPropagation();

window.location.href = 'https://www.accelevents.com/e/demovirtualevent';

}

const observer = new MutationObserver(() => {

addCustomScript();

});

observer.observe(document.body, {

childList: true,

subtree: true

});

})();

</script>

Require at least 1 quantity of a specific ticket type before allowing the registrant to select another ticket type

Example: Guest ticket type is greyed out and can only be selected once there's a quantity allocated for Team Member Ticket

Add this to Body Script:

<script>

(function() {

let intervalId = null;

let fromInitial = false;

if (!intervalId) {

intervalId = setInterval(addCustomScript, 1000);

}

function addCustomScript() {

const ticketDiv = document.querySelectorAll('.tickets-details')

let contiBtn = document.querySelector('.checkout-btn-xs');

if (contiBtn) {

var observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {

if (mutation.attributeName === 'disabled') {

if (contiBtn.disabled) {

buttonEnabledHandler();

} else {

buttonDisabledHandler();

}

});

observer.observe(contiBtn, {

attributes: true

});

}

if ((contiBtn && contiBtn.disabled)) {

buttonEnabledHandler();

}

function buttonEnabledHandler() {

if (ticketDiv.length) {

ticketDiv.forEach((ticket) => {

const select = ticket.querySelectorAll('.tickets-select-box');

select.forEach((element) => {

let parentEle = element;

const ticketName = ticket.querySelector('.ticket-header')?.innerText;

let selectVal = parentEle.querySelectorAll('.ae_select__single-value');

if ((selectVal[0].innerHTML === '0' || fromInitial) && ticketName !== 'Team Member Ticket') {

applyStyles(parentEle,ticket, false)

} else {

applyStyles(parentEle,ticket, true)

}

})

});

}

function buttonDisabledHandler() {

const ticketDiv1 = document.querySelectorAll('.tickets-details');

if (ticketDiv1.length) {

ticketDiv1.forEach((ticket) => {

const select = ticket.querySelectorAll('.tickets-select-box');

select.forEach((element) => {

let parentEle = element;

applyStyles(parentEle,ticket, true)

})

});

}

function applyStyles(parentEle,ticket,enabled) {

if (!enabled) {

parentEle.style.pointerEvents = 'none';

parentEle.style.cursor = 'not-allowed';

ticket.style.cursor = 'not-allowed'

ticket.style.opacity = '0.5'

} else {

parentEle.style.cssText = '';

ticket.style.cursor = ''

ticket.style.opacity = '1'

}

ticketDiv.forEach((ticket) => {

const select = ticket.querySelectorAll('.tickets-select-box');

select.forEach((element) => {

let parentEle = element;

const ticketName = ticket.querySelector('.ticket-header')?.innerText;

let selectVal = parentEle.querySelectorAll('.ae_select__single-value');

if (selectVal[0].innerHTML === '0' && ticketName === 'Team Member Ticket') {

contiBtn.disabled = true;

fromInitial = true;

} else if(selectVal[0].innerHTML !== '0' && ticketName === 'Team Member Ticket'){

contiBtn.disabled = false;

fromInitial = false;

}

})

}

})();

</script>

Replace the heading "Select your registration type" and "Add-Ons" with new text

Header Script:

<script>

function changeAddOnHeader() {

const step1 = document.querySelector('#step1');

if (step1) {

const headings = document.querySelectorAll('#ae-heading3') || [];

if (headings.length > 0) {

headings.forEach((heading) => {

if (heading.innerText === 'Add-ons') {

heading.innerText = 'Select one or more days that you would like to attend';

} else if (heading.innerText === 'Select your registration type') {

heading.innerText = 'How many guests are attending?';

}

});

}

changeAddOnHeader();

const observer = new MutationObserver(() => {

changeAddOnHeader();

});

observer.observe(document.body, {

childList: true,

subtree: true

});

</script>

Remove "Available Until: this date" from all tickets and add ons, and add other text

Header Script:

<script>

(function () {

function changeTicketDate() {

const availableDates = document.querySelectorAll('.availabel-date');

if (availableDates.length) {

availableDates.forEach((date) => {

const label = date.querySelector('label');

if (label && label.innerText.trim().match('(?<=Available until:).*')) {

label.innerHTML = 'How many guests will be attending?<br>Please select the number of attendees';

label.style.color = '#FE4F02'; // Set text color

label.style.fontSize = '16px'; // Set font size to 16px

label.style.lineHeight = '1.5'; // Increase line spacing

}

});

}

const observer = new MutationObserver((mutations) => {

for (let mutation of mutations) {

if ([...mutation.addedNodes].some(node => node.classList?.contains('availabel-date'))) {

changeTicketDate();

break;

}

});

observer.observe(document.body, {

childList: true,

subtree: true

});

changeTicketDate();

})();

</script>

Automatically expands the add on with multiple varieties

This script works for only for the first add on with multiple varieties. If you have more add ons, those will not be expanded.

Add to header script:

<script>

function openAddonCategories() {

const addonCategory = document.querySelector('.addon-category');

const step1 = document.querySelector('#step1');

if (step1 && addonCategory) {

if(addonCategory.classList.contains('active')) return;

addonCategory.classList.add('active');

addonCategory.click();

}

openAddonCategories();

const observerOpenAddonCategories = new MutationObserver(() => {

openAddonCategories();

});

observerOpenAddonCategories.observe(document.body, {

childList: true,

subtree: true

});

</script>

Add a checkbox for "I have read the above and agree to the Terms and Conditions" that if unchecked, the registrant cannot proceed to the next step

This script will add a the checkbox, and the continue button will be grayed out if the box is unchecked. The checkbox information will not appear in any report, but since registrants cannot continue without checking it, you will know that any registration coming from the landing page has agreed to the terms.

Header Script:

<script>

(function() {

// Create the container div for the toggle button

const toggleDiv = document.createElement('div');

toggleDiv.className = 'col-lg-12 col-md-12 col-xs-12 p-0 custom-visibility-toggle';

// Set the exact HTML structure with checkbox initially CHECKED

toggleDiv.innerHTML = `

<div class="ae-label light m-t-15">

<div class="check-button cursor_light d-flex align-items-center ae-caption2" style="color: rgb(64, 66, 85);">

<label class="ae-label-block cursor_light d-flex align-items-center" style="font-weight: 400;">

<input type="checkbox" class="check-button__input cursor_light" id="toggleVisibility" checked>

<span class="check-button__control"></span>

<span class="check-button__label ae-label light" style="white-space: nowrap; margin-left: 8px;">

I have read the above and agree to the Terms and Conditions

</span>

</label>

</div>

`;

function updateContinueButtonState() {

const visibilityCheckbox = document.getElementById('toggleVisibility');

const continueButton = document.querySelector('button#renderContinueBtn') || document.querySelector('button.ae-button.w-350.primary');

const errorInputs = document.querySelectorAll('input.error-input');

if (visibilityCheckbox && continueButton) {

// Disable button if checkbox is unchecked OR there are error inputs

continueButton.disabled = !visibilityCheckbox.checked || errorInputs.length > 0;

}

function addVisibilityCheckBox() {

// Ensure we are on Step 2 ONLY

const isStep2Active = document.querySelector('li.active div#step2') !== null;

const isStep3Active = document.querySelector('li.active div#step3') !== null; // Check for Step 3

if (!isStep2Active || isStep3Active) {

console.log('Step 2 is not active or Step 3 is active. Skipping checkbox injection.');

return; // Stop execution if not in step 2

}

// Avoid duplicate insertion

if (!document.querySelector('.custom-visibility-toggle')) {

const buyerDetailsContainer = document.querySelector('input#email')?.closest('.col-xs-12');

if (buyerDetailsContainer) {

setTimeout(() => {

buyerDetailsContainer.appendChild(toggleDiv);

const visibilityCheckbox = document.getElementById('toggleVisibility');

if (visibilityCheckbox) {

visibilityCheckbox.addEventListener('change', updateContinueButtonState);

}

// Ensure button is updated immediately to reflect checked state

updateContinueButtonState();

// Start interval to continuously check button state

setInterval(updateContinueButtonState, 500);

}, 1000);

} else {

console.error('The email input div was not found.');

}

const customCheckBoxObserver = new MutationObserver(() => {

addVisibilityCheckBox();

});

customCheckBoxObserver.observe(document.body, {

childList: true,

subtree: true

});

// Run once immediately in case step 2 is already active

addVisibilityCheckBox();

})();

</script>

Gray out the Continue button if a particular ticket type is selected, but no add on is selected, and make the add on quantity selection the same number as the ticket type quantity selected.

In the example below, we have a ticket type that is inclusive of meals, so if they select that ticket, they won't be required to buy the add on meals, they can continue with their registration. However if they select the Free Admission ticket, they cannot proceed without selecting at least one of the meal add ons. If they select multiple Free Admission Tickets (e.g. 3), the dropdown to select the add on quantity will display 0 and the same number of Free Admission Tickets selected. This forces them to buy the same meals for all 3 attendees.

Header Script:

<script>

(function () {

const ticketTypes = ["Free Admission", "Ticket Inclusive of Meals"];

const addonTypes = ['Breakfast', 'Lunch', 'Dinner'];

function addOnSelectionScript() {

let ticketCount = 0;

let otherTicketCount = 0;

let addonTicketCount = 0;

const ticketDetails = document.querySelectorAll('.tickets-details');

const contiBtn = document.querySelector('#renderContinueBtn');

const step1 = document.querySelector('#step1');

if(step1 && step1.parentElement.classList.contains('active') && ticketDetails.length && contiBtn) {

ticketDetails.forEach(ticket => {

const selects = ticket.querySelectorAll('.tickets-select-box');

selects.forEach(element => {

const ticketName = ticket.querySelector('.ticket-header')?.innerText?.trim();

let selectVal = element.querySelector('.ae_select__single-value');

if (selectVal) {

let value = parseInt(selectVal.textContent.trim(), 10) || 0;

if (ticketName === 'Free Admission') {

ticketCount = value;

} else if(!addonTypes.includes(ticketName) && ticketName !== 'Free Admission') {

otherTicketCount += value;

}

});

ticketDetails.forEach(ticket => {

const selects = ticket.querySelectorAll('.tickets-select-box');

selects.forEach(element => {

const ticketName = ticket.querySelector('.ticket-header')?.innerText?.trim();

let selectVal = element.querySelector('.ae_select__single-value');

if (selectVal) {

let value = parseInt(selectVal.textContent.trim(), 10) || 0;

if (!ticketTypes.includes(ticketName) && addonTypes.includes(ticketName)) {

const options = document.querySelectorAll('.ae_select__option') || [];

if (options.length > 0) {

const closestEle = options[0]?.closest('.tickets-details');

if (closestEle) {

const closestHeader = closestEle.querySelector('.ticket-header')?.innerText?.trim();

if (!ticketTypes.includes(closestHeader) && ticketCount > 0) {

options.forEach((option) => {

let optionValue = Number(option.innerText);

if (optionValue !== ticketCount && optionValue !== 0) {

option.style.display = 'none';

}

});

}

addonTicketCount += value;

}

});

if(!ticketCount){

document.querySelectorAll('.ae_select__option').forEach(option => {

option.style.display = '';

});

}

contiBtn.disabled = ((ticketCount > addonTicketCount && ticketCount > 0) || (ticketCount === 0 && addonTicketCount > 0) || (!ticketCount && !otherTicketCount)) && step1 ? true : false;

}

const observer = new MutationObserver(() => {

addOnSelectionScript();

});

observer.observe(document.body, { childList: true, subtree: true });

})();

</script>

Hide the countdown timer

Add this header script:

<script>

(function () {

function hideParentNodes() {

const checkoutPage = document.querySelector('.ticket-checkout-complete-btn');

const element = document.getElementsByClassName('ticket-checkout-top')

if(element.length){

element[0].parentNode.style.display = 'none';

if(checkoutPage){

clearInterval(intervalId);

}

var intervalId = setInterval(hideParentNodes, 1000);

})();

</script>

Add text in steps 2 and 3 of the registration process

<script>

(function() {

function addCustomLabel(container, text, className) {

const newElement = document.createElement('label');

newElement.textContent = text;

newElement.className = className;

newElement.style.color = '#43b02a';

newElement.style.fontSize = '16px';

newElement.style.fontWeight = 'bold';

container.style.textAlign = 'left'

container.appendChild(newElement);

}

function applyTextChanges() {

const checkoutPage = document.querySelector('.ticket-checkout-complete-btn');

const getStepThreeElement = document.getElementById('step3');

const buyerDetailsElement = document.getElementsByClassName('buyer-details-header');

const isBuyerTextAdded = document.getElementsByClassName('custom-created-buyer-class');

if (buyerDetailsElement.length && !isBuyerTextAdded.length) {

addCustomLabel(document.querySelectorAll('.buyer-details-header>.label-block')[0], 'The information for the student attending the Summit will be requested on the next page.', 'custom-created-buyer-class')

}

if (getStepThreeElement) {

const ticketsDiv = document.querySelectorAll('.hostOrStaff-ticket-Holder-details')

ticketsDiv.forEach((ele) => {

const collapse_block = ele.querySelector('.collapse_block')

const isHolderTextAdded = collapse_block.getElementsByClassName('custom-created-holder-class');

const isHolderAddDetailsTextAdded = ele.querySelector('.custom-created-holder-addDetails-class');

const holderAdditionalDetails = ele.querySelector('.add-info-div');

if (!isHolderTextAdded.length) {

addCustomLabel(collapse_block.querySelector('.label-block'), 'Please provide only the student’s information, and not the information of the parent.', 'custom-created-holder-class')

}

if (holderAdditionalDetails && !isHolderAddDetailsTextAdded) {

addCustomLabel(holderAdditionalDetails.querySelector('.label-block'), 'Please provide only the student’s information, and not the information of the parent.', 'custom-created-holder-addDetails-class')

}

})

}

// if (checkoutPage) {

// clearInterval(intervalId);

// }

}

var intervalId = setInterval(applyTextChanges, 500);

})();

</script>

Enlarge the Sign In button and change the message in Step 2

Add this header script:

<script>

(function() {

function addCustomText() {

const signInBtn = document.querySelector('.logBtn');

const signInMsg = document.querySelector('.log-msg');

if (signInBtn && signInMsg && signInMsg.innerText === 'Have an account?') {

const parentBtn = signInBtn.parentElement;

if (parentBtn) {

parentBtn.classList.remove('col-md-6');

signInBtn.classList.add('large');

signInBtn.style.cssText = 'background: #FE5000 !important; color: #ffffff !important';

signInMsg.innerText = 'Please click Sign in to start your Registration';

signInMsg.style.color = 'red';

signInMsg.style.fontWeight = 'bold';

signInMsg.style.fontSize = '20px';

}

const observer = new MutationObserver(() => {

addCustomText();

});

observer.observe(document.body, {

childList: true,

subtree: true

});

})();

</script>

Add an email address validation for an order form question

In the example script below, we have an order form question, "Emergency Contact Email Address"

A validation can be added to ensure that registrants enter only email addresses in that field. Tweak the code depending on your order form question. This applies to buyer and holder fields.

<script>

(function() {

let intervalId = null;

let errorRegObj = {};

const emailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

if (!intervalId) {

intervalId = setInterval(checkValidEmail, 1000);

}

function validateEmail(input, labelPrefix, index) {

const checkoutCreatePay = document.getElementById('renderContinueBtn') || document.getElementById('checkoutCreatePay') || document.getElementById('checkoutTicketBtn');

const parent = input.parentNode?.parentNode?.parentNode || '';

const labelId = `${labelPrefix}${index}`;

const existingErrorLabel = document.getElementById(labelId);

if (input.value && !emailFormat.test(input.value)) {

if (!existingErrorLabel) {

errorRegObj[labelId] = true;

createLabelElement(parent, labelId);

}

} else {

if (existingErrorLabel) {

parent.removeChild(existingErrorLabel);

delete errorRegObj[labelId];

}

checkForError(checkoutCreatePay);

}

function createLabelElement(parent, id) {

const label = document.createElement('label');

label.id = id;

label.textContent = 'Please enter valid email address';

label.style.color = '#ec4a40';

parent.appendChild(label);

}

function checkForError(btn) {

const isError = Object.keys(errorRegObj).filter((key) => errorRegObj[key]).length;

if (isError) {

btn.setAttribute('disabled', '')

} else {

btn.removeAttribute('disabled');

}

function checkValidEmail() {

const completeBtn = document.querySelector('.ticket-checkout-complete-btn');

const emailFields = [{

name: 'Emergency Contact Email Address',

labelPrefix: 'custom_reg_Email_Error_'

}

];

emailFields.forEach(field => {

const inputs = document.getElementsByName(field.name);

inputs.forEach((input, index) => {

input.addEventListener('input', () => validateEmail(input, field.labelPrefix, index));

});

if (completeBtn && intervalId) {

clearInterval(intervalId);

}

})();

</script>

Change the "Upload" field label to something else in registration step 2 and 3

The Upload field label cannot be changed in the admin console. This script edits the label to "Upload Capability Statement" for Step 2 and 3.

Header Script:

<script>

(function() {

function changeLabel() {

const uploadLabel = document.querySelector('label[for="Upload"]');

if (uploadLabel && uploadLabel.innerText.includes('Upload File')) {

uploadLabel.innerText = uploadLabel.innerText.replace('Upload File', 'Upload Capability Statement');

}

// Run once initially in case the label is already there

changeLabel();

// Observe changes in the DOM to update dynamically

const uploadLabelObserver = new MutationObserver(() => {

changeLabel();

});

uploadLabelObserver.observe(document.body, {

childList: true,

subtree: true

});

})();

</script>

Add text in step 3 of the registration process

Add to Header Script:

<script>

(function () {

function addCustomTextScript() {

const selectTicket = document.querySelector(".purchaseTicketContainer");

const customText = document.querySelector(".customText");

if (selectTicket && !customText) {

const labelEle = selectTicket.querySelectorAll("#ae-body2") || [];

if (labelEle.length) {

labelEle.forEach((ele) => {

if (

ele.innerText ===

"Send registration details directly to your attendees, or get all the information sent to your email address"

) {

const label = document.createElement("div");

label.className = "customText";

label.innerHTML = `Please enter your information for the first ticket and your guests' information for the next tickets`;

label.style.cssText =

"color: #FE5000; font-size: 20px; font-weight: bold; margin-bottom: 20px";

ele.parentElement.parentElement.style.display = "block";

ele.parentElement.parentElement.appendChild(label);

}

});

}

const observer = new MutationObserver(() => {

addCustomTextScript();

});

observer.observe(document.body, {

childList: true,

subtree: true,

});

})();

</script>

Add text at the very top in step 3 of the registration process and hide the existing message

Header Script:

<script>

(function () {

function modifyTextScript() {

const selectTicket = document.querySelector(".purchaseTicketContainer");

if (selectTicket) {

const labelElements = selectTicket.querySelectorAll("#ae-body2") || [];

if (labelElements.length) {

labelElements.forEach((ele) => {

if (

ele.innerText.trim() ===

"Send registration details directly to your attendees, or get all the information sent to your email address"

) {

ele.style.display = "none";

}

});

if (!document.querySelector(".customText")) {

const label = document.createElement("div");

label.className = "customText";

label.innerHTML = `Please enter your information for the first ticket and your guests' information for the next tickets`;

label.style.cssText =

"color: #FE5000; font-size: 20px; font-weight: bold; margin-bottom: 20px";

selectTicket.prepend(label);

}

const observer = new MutationObserver(() => {

modifyTextScript();

});

observer.observe(document.body, {

childList: true,

subtree: true,

});

})();

</script>

Remove the existing message in step 3 of the registration process

Add to Header Script:

<script>

(function () {

function modifyTextScript() {

const selectTicket = document.querySelector(".purchaseTicketContainer");

if (selectTicket) {

const labelElements = selectTicket.querySelectorAll("#ae-body2") || [];

if (labelElements.length) {

labelElements.forEach((ele) => {

if (

ele.innerText ===

"Send registration details directly to your attendees, or get all the information sent to your email address"

) {

// Hide the parent element containing the specific text

ele.parentElement.parentElement.style.display = "none";

}

});

}

const observer = new MutationObserver(() => {

modifyTextScript();

});

observer.observe(document.body, {

childList: true,

subtree: true,

});

})();

</script>

Hide the option to select who will receive registration details if multiple tickets are selected in step 3

When code is applied:

Add this header script:

<script>

(function() {

function applyCustomScript() {

const holderDetailsFields = document.querySelectorAll('.ticket-Holder-details.ticket-Holder-details-checkout') || [];

if (holderDetailsFields.length > 1) {

const inviteSection = document.querySelector('.copy-data-boxes');

if (inviteSection) {

inviteSection.style.display = 'none';

}

const observer = new MutationObserver(() => {

applyCustomScript();

});

observer.observe(document.body, {

childList: true,

subtree: true

});

})();

</script>

Make some fields required only for Holder 1 in the order

This script adds the asterisk on the Holder 1 fields even though the fields are not required. If left these fields are left blank, the Continue button will be grayed out, so it will only allow them to continue when the required fields are filled out.

In this example we are requiring these fields for Holder 1:

Address
City
Zap/Postal Code
Country
State

Header Script:

<script>

(function () {

const fieldList = {

zipCodeValue: "",

countryValue: "",

stateValue: "",

addressValue: "",

cityValue: "",

};

function addCustomTextScript() {

const holderPage = document.querySelector(`.ticket-Holder-details`);

const zipCodeField = document.querySelector(

`.ticket-Holder-details input[name="Zip/Postal Code"]`

);

const countryField = document.querySelector(

`.ticket-Holder-details select[aria-label="Country"]`

);

const stateField = document.querySelector(

`.ticket-Holder-details select[aria-label="State"]`

);

const addressField = document.querySelector(

`.ticket-Holder-details input[name="Address"]`

);

const cityField = document.querySelector(

`.ticket-Holder-details input[name="City"]`

);

const continueBtn = document.querySelectorAll(

".checkoutNewPage .bottom-footer button"

);

function validateInputField() {

const allFieldsFilled = Object.values(fieldList)?.every(

(value) => value.trim() !== ""

);

continueBtn[1].disabled = !allFieldsFilled;

}

function updateValue(field, variableName) {

if (field) {

field.addEventListener("input", (event) => {

fieldList[variableName] = event.target.value.trim();

validateInputField();

});

// Initial value assignment

fieldList[variableName] = field.value.trim();

validateInputField();

} else if (continueBtn[1]?.disabled && !holderPage) {

continueBtn[1].disabled = false;

}

updateValue(zipCodeField, "zipCodeValue");

updateValue(countryField, "countryValue");

updateValue(stateField, "stateValue");

updateValue(addressField, "addressValue");

updateValue(cityField, "cityValue");

function addAsteriskToLabel(fieldLabel) {

if (fieldLabel && !fieldLabel.innerHTML.includes("*")) {

fieldLabel.innerHTML += ' <span style="color: red;">*</span>';

}

const addressLabel = addressField

.closest(".form-group")

.querySelector("label.inputLabel-text");

const cityLabel = cityField

.closest(".form-group")

.querySelector("label.inputLabel-text");

const zipCodeLabel = zipCodeField

.closest(".form-group")

.querySelector("label.inputLabel-text");

const stateLabel = stateField

.closest(".form-group")

.querySelector(".label-block label");

const countryLabel = countryField

.closest(".form-group")

.querySelector(".label-block label");

addAsteriskToLabel(addressLabel);

addAsteriskToLabel(cityLabel);

addAsteriskToLabel(zipCodeLabel);

addAsteriskToLabel(stateLabel);

addAsteriskToLabel(countryLabel);

}

const observer = new MutationObserver(() => {

addCustomTextScript();

});

observer.observe(document.body, {

childList: true,

subtree: true,

});

})();

</script>

Automatically apply the discount code when the discount code is in the limited display link

Learn About Limited Display Links with Discount Codes

Accessing the limited display link with the discount code won't apply the discount at the end of the registration. Adding the header script below will make it automatically apply.

<script>

(function() {

function getUrlParameter(name) {

const urlParams = new URLSearchParams(window.location.search);

return urlParams.get(name);

}

function setInputValue(input, value) {

// Get the native setter

const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;

// Trigger native setter

nativeInputValueSetter.call(input, value);

// Create and dispatch necessary events

const events = [

new Event('input', { bubbles: true }),

new Event('change', { bubbles: true }),

new KeyboardEvent('keydown', { bubbles: true }),

new KeyboardEvent('keyup', { bubbles: true }),

new KeyboardEvent('keypress', { bubbles: true })

];

events.forEach(event => input.dispatchEvent(event));

}

function handleDiscountCodeAndButton() {

const discountCode = getUrlParameter('discount');

if (!discountCode) return;

const observer = new MutationObserver(function(mutations) {

const discountInput = document.getElementById('discountcoupon');

if (discountInput) {

// Only set if the value hasn't been set yet

if (!discountInput.value) {

console.log('Setting discount code:', discountCode); // Debug log

setInputValue(discountInput, discountCode);

}

// Look for apply button only after input has been set

if (discountInput.value === discountCode) {

const applyButton = document.getElementById('discoupon');

if (applyButton) {

console.log('Found apply button, clicking...'); // Debug log

applyButton.click();

observer.disconnect();

}

});

observer.observe(document, {

childList: true,

subtree: true,

attributes: true,

characterData: true

});

// Initial check

const discountInput = document.getElementById('discountcoupon');

if (discountInput && !discountInput.value) {

console.log('Initial attempt to set discount code:', discountCode); // Debug log

setInputValue(discountInput, discountCode);

// Check for apply button

const applyButton = document.getElementById('discoupon');

if (applyButton && discountInput.value === discountCode) {

console.log('Found apply button on initial check, clicking...'); // Debug log

applyButton.click();

observer.disconnect();

}

// Run when DOM is ready

if (document.readyState === "loading") {

document.addEventListener("DOMContentLoaded", handleDiscountCodeAndButton);

} else {

handleDiscountCodeAndButton();

}

})();

</script>

Hide the Credit Card Payment Option

Add this script if you're not planning to add a payment processor to your event but you have paid tickets that have a pay later option. This way it will not show the "Activate Payment Method"

<script>

(function() {

function hideCardPaymentMethod() {

const paymentMethod = Array.from(document.querySelectorAll('.payment-method-checkbox')) || [];

if (paymentMethod?.length) {

paymentMethod.forEach((item) => {

if(item.innerText === 'Debit or credit card'){

item.style.cssText = 'display: none !important';

} else {

item.click();

}

})

}

const observer = new MutationObserver(() => {

hideCardPaymentMethod();

});

observer.observe(document.body, {

childList: true,

subtree: true

});

})();

</script>

Add text below the credit card fields in the payment link for invoiced transactions

Add to Header Script:

<script>

function addCustomCheckoutText() {

const checkoutPage = document.querySelector('.purchaseTicketContainerorder-2');

const customAddedText = document.querySelector('.custom-added-text');

if (checkoutPage && !customAddedText) {

const customEle = document.createElement('div');

customEle.classList.add('custom-added-text');

customEle.innerHTML = 'You will be charged the amount that is stated on the invoice and not the current ticket cost.';

customEle.style.cssText = 'color: #000; font-size: 16px; line-height: 1.5; font-weight: bold;';

checkoutPage.appendChild(customEle);

}

addCustomCheckoutText();

const observer2 = new MutationObserver(() => {

addCustomCheckoutText();

});

observer2.observe(document.body, {

childList: true,

subtree: true

});

</script>

Change the "Speaker" label in the agenda tab and the session description pop-up

Add to Header Script:

<script>

(function() {

function changeSpeakerLabel() {

const speakerLabel = document.querySelectorAll('#ae-heading4') || [];

if (speakerLabel.length) {

speakerLabel.forEach((label) => {

label.innerText = 'Presenters';

});

}

const speakerTab = document.querySelectorAll('#speakersLabel') || [];

if (speakerTab?.length) {

speakerTab.forEach((tab) => {

tab.innerText = 'Presenters';

});

}

const speakerLinkTab = document.querySelectorAll('#linkspeakers') || [];

if (speakerLinkTab?.length) {

speakerLinkTab.forEach((tab) => {

tab.innerText = 'Presenters';

});

}

const speakerVEHTab = document.querySelectorAll('.tablinks') || [];

if (speakerVEHTab?.length) {

speakerVEHTab.forEach((tab) => {

if (tab.innerText === 'Speakers') {

tab.innerText = 'Presenters';

}

});

}

};

const observer = new MutationObserver(() => {

setTimeout(() => {

changeSpeakerLabel();

}, 1000);

});

observer.observe(document.body, {

childList: true,

subtree: true

});

})();

</script>

Enlarge the text and fields and change the color of the button in the embeddable registration widget

Add this script to the html object in the advanced page builder:

<script>

const applyStyles = () => {

const regForm = document.querySelector('#embeddable-registration-widget-container');

if (regForm) {

const regFormInputs = regForm.querySelectorAll('input');

const ccDropdown = regForm.querySelectorAll('#cc-dropdown');

const regLabels = regForm.querySelectorAll('label');

const holderDetails = regForm.querySelector('.ticket-Holder-details-checkout');

const submitBtn = regForm.querySelector('.ae_widget_simple_registration_button');

const inputStyles = `

background-color: #f8f8fa !important;

color: #4e4763 !important;

border: 1px solid transparent !important;

border-radius: 8px !important;

width: 100%;

height: auto !important;

padding: 22px 23px !important;

font-size: 18px !important;

`;

const labelStyles = `

font-size: 12px !important;

font-weight: 700 !important;

letter-spacing: 1.2px !important;

line-height: 1.266em !important;

margin: 0 0 .4rem !important;

text-transform: uppercase !important;

color: #3d3652 !important;

`;

regForm.setAttribute('style', 'background-color: #fff !important; box-shadow: 0 5px 50px #9f72ff05; border-radius: 12px !important; padding: 2.8rem 2.5rem !important;');

if (holderDetails) {

holderDetails.setAttribute('style', 'background-color: #fff !important;');

}

if (submitBtn) {

submitBtn.setAttribute('style', 'background-color: #8656ef !important;');

}

ccDropdown.forEach(dropdown => {

dropdown.setAttribute('style', 'background-color: #fff !important; padding: 22px 23px !important; height: auto !important;');

});

regLabels.forEach(label => {

label.setAttribute('style', labelStyles);

});

regFormInputs.forEach(input => {

if (!input.classList.contains('search-input') && input.id !== 'selectCategory') {

input.setAttribute('style', inputStyles);

input.setAttribute('placeholder', '');

}

});

}

};

// MutationObserver to detect when the form is added to the page

const observer = new MutationObserver(() => {

if (document.querySelector('#embeddable-registration-widget-container')) {

applyStyles();

}

});

// Start observing the body for changes

observer.observe(document.body, { childList: true, subtree: true });

// Run once in case the form is already loaded

applyStyles();

</script>

Enlarge the text and fields, change the color of the button, and make the embeddable registration widget to dark mode

This script makes the background dark and inverts the text color for contrast. It also enlarges the text and fields.

Add this script to the html object in the advanced page builder:

<script>

const applyStyles = () => {

const regForm = document.querySelector('#embeddable-registration-widget-container');

if (regForm) {

const regFormInputs = regForm.querySelectorAll('input');

const ccDropdown = regForm.querySelectorAll('#cc-dropdown');

const regLabels = regForm.querySelectorAll('label');

const holderDetails = regForm.querySelector('.ticket-Holder-details-checkout');

const submitBtn = regForm.querySelector('.ae_widget_simple_registration_button');

const inputStyles = `

background-color: #fff !important;

color: #4e4763 !important;

border: 1px solid transparent !important;

border-radius: 8px !important;

width: 100%;

height: auto !important;

padding: 22px 23px !important;

font-size: 18px !important;

`;

const labelStyles = `

font-size: 1.25rem !important;

font-weight: 700 !important;

line-height: 1.1em !important;

letter-spacing: -0.03125rem !important;

color: #fff !important;

`;

regForm.setAttribute('style', 'background-color: #1f1a30 !important; box-shadow: 0 5px 50px #9f72ff05; border-radius: 12px !important; padding: 2.8rem 2.5rem !important;');

if (holderDetails) {

holderDetails.setAttribute('style', 'background-color: #1f1a30 !important;');

}

if (submitBtn) {

submitBtn.setAttribute('style', 'background-color: #8656ef !important;');

}

ccDropdown.forEach(dropdown => {

dropdown.setAttribute('style', 'background-color: #fff !important; padding: 22px 23px !important; height: auto !important;');

});

regLabels.forEach(label => {

label.setAttribute('style', labelStyles);

});

regFormInputs.forEach(input => {

if (!input.classList.contains('search-input') && input.id !== 'selectCategory') {

input.setAttribute('style', inputStyles);

input.setAttribute('placeholder', '');

}

});

}

};

// MutationObserver to detect when the form is added to the page

const observer = new MutationObserver(() => {

if (document.querySelector('#embeddable-registration-widget-container')) {

applyStyles();

}

});

// Start observing the body for changes

observer.observe(document.body, { childList: true, subtree: true });

// Run once in case the form is already loaded

applyStyles();

</script>

Remove the text "Select Registration Type" from the embeddable registration widget if there's multiple free ticket types

When code is applied:

Add this to the html object in the advanced page builder:

<script>

(function() {

function addCustomScript() {

const regText = document.querySelector('#registration-type');

if (regText) {

regText.style.display = 'none';

}

const observer = new MutationObserver(() => {

addCustomScript();

});

observer.observe(document.body, {

childList: true,

subtree: true

});

})();

</script>

Make the registration steps dark mode through the registration link

Using this script has a couple of conditions:

Best to use this script if you're using the advanced event website builder page and you have button to redirect to the registration steps.

This will only work if you have enabled dark mode in Event Design > Event Hub > Theme Customization
It works if the direct link to the registration page is accessed (e.g. https://www.accelevents.com/e/u/checkout/youreventname/tickets/order) or if this merge tag ${attendee_registration_url} is added to a button in the advanced event website builder.
If the add a guest / register button is clicked from the landing page, the registration page will not be in dark mode unless the user clicks the refresh button.
The landing page will also be in dark mode if the user clicks the back or cancel button in the first registration step while in dark mode.

Add this header script in Settings > Integrations > Landing Page Custom Scripts:

What is a Custom Script?