This feature is available for Enterprise and White Label Plans.
What is a Custom Script?
A script is like a set of instructions a computer can understand and follow. It's a way to tell the computer what to do step by step. Imagine you're baking cookies. The recipe you follow is like a script – it tells you what ingredients to use, how to mix them, and when to put the cookies in the oven.
Think of it as giving your computer a to-do list. You write down the steps you want the computer to take, and it follows them exactly.
In Accelevents, you can add custom scripts that allow you to change or add certain elements to your event page or have it do different actions.
Add a Custom Script
Go to Settings > Integrations in your admin console
Scroll down to Custom Scripts
Click Add Custom Script for your Landing Page or Event Hub
Enter your custom script in the Body Script
Click Save. Your changes should be reflected on the landing page or event hub.
Sample Scripts You Can Use
Click the arrow to expand
Hide the "Add a guest" button for signed in attendees for IN-PERSON events
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
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
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 the countdown Timer on the Registration Page
Hide the countdown Timer on the Registration Page
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>
Hide "Free" beside the ticket selection for free tickets
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>
Redirect the register button to a URL
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
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>
Gray out the other ticket types if a ticket is already selected
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 text in steps 2 and 3 of the registration process
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>
Change the "Have an Access Code" color
Change the "Have an Access Code" color
<style>
#isPasted a,
.have-a-access-code {
color: #FE5000 !important;
}
</style>
Change the tagline color
Change the tagline color
<style>
#EventTagLine {
color: #FE5000;
}
</style>
Change the "Add to Calendar" color
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.
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
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);
Add an email address validation for an order form question
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.
<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 "Buyer Details" text in Simple Registration
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>
Add a Strikethrough to the Higher Ticket Price
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>