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.
This feature is available for Enterprise and White Label Plans.
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
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>
Add the social media sharing Icons to the final registration page
Add the social media sharing Icons to the final registration page
<script>
(function () {
let intervalId;
function customScript() {
const isCheckoutCompletedPage = document.getElementsByClassName('checkout-complete');
if (isCheckoutCompletedPage?.length) {
// Make sharable Url
const currentUrl = window.location.href;
let modifiedUrl = currentUrl?.replace('/u/checkout', '');
modifiedUrl = modifiedUrl.replace('/tickets/order', '#');
const encodedUrl = encodeURIComponent(modifiedUrl);
let eventName = '';
const ticketSummmaryEl = document.getElementsByClassName('event-details-summary');
const container = document.createElement('div');
const socialIconsContainer = document.createElement('div');
const labelContainer = document.createElement('span');
const goBackToEventsPageBtn = document.getElementById('goBack');
socialIconsContainer.classList = 'd-flex social-icons-container m-b-15';
container.style = 'padding:0px 16px';
labelContainer.classList = 'ae-label light';
labelContainer.textContent = 'Share this event:';
labelContainer.style = 'color: #1e2137; margin-bottom: 15px; font-weight:600; font-size: 18px';
if (ticketSummmaryEl?.length > 0) {
eventName = ticketSummmaryEl[0]
?.getElementsByClassName('event-details-content')[0]
?.getElementsByClassName('ae-label mt-0 m-b-16 light')[0]?.firstChild?.firstChild?.textContent;
}
const socialIcons = [
{
svg: `<span id='linkedIn'><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="M4.4759 6.85677V16.3803C4.4759 16.5065 4.42573 16.6277 4.33643 16.717C4.24713 16.8063 4.12602 16.8564 3.99973 16.8564H1.61885C1.49256 16.8564 1.37145 16.8063 1.28215 16.717C1.19285 16.6277 1.14268 16.5065 1.14268 16.3803V6.85677C1.14268 6.73048 1.19285 6.60936 1.28215 6.52006C1.37145 6.43076 1.49256 6.3806 1.61885 6.3806H3.99973C4.12602 6.3806 4.24713 6.43076 4.33643 6.52006C4.42573 6.60936 4.4759 6.73048 4.4759 6.85677ZM17.3326 10.5805C17.3485 9.57963 17.022 8.60341 16.4071 7.81359C15.7922 7.02377 14.9259 6.46777 13.9518 6.23774C13.2889 6.09502 12.6016 6.11305 11.9471 6.29033C11.2927 6.46761 10.6902 6.79899 10.19 7.25676V6.85677C10.19 6.73048 10.1398 6.60936 10.0505 6.52006C9.96123 6.43076 9.84011 6.3806 9.71382 6.3806H7.33295C7.20666 6.3806 7.08554 6.43076 6.99624 6.52006C6.90694 6.60936 6.85677 6.73048 6.85677 6.85677V16.3803C6.85677 16.5065 6.90694 16.6277 6.99624 16.717C7.08554 16.8063 7.20666 16.8564 7.33295 16.8564H9.71382C9.84011 16.8564 9.96123 16.8063 10.0505 16.717C10.1398 16.6277 10.19 16.5065 10.19 16.3803V11.009C10.1786 10.5457 10.3308 10.0931 10.6199 9.73086C10.9091 9.3686 11.3166 9.11979 11.7709 9.02813C12.0467 8.98051 12.3296 8.99428 12.5995 9.06843C12.8694 9.14258 13.1197 9.27531 13.3324 9.45716C13.5452 9.63902 13.7153 9.86553 13.8305 10.1206C13.9458 10.3756 14.0035 10.653 13.9994 10.9328V16.3803C13.9994 16.5065 14.0496 16.6277 14.1389 16.717C14.2282 16.8063 14.3493 16.8564 14.4756 16.8564H16.8564C16.9827 16.8564 17.1038 16.8063 17.1931 16.717C17.2824 16.6277 17.3326 16.5065 17.3326 16.3803V10.5805ZM2.5712 0.666504C2.19449 0.666504 1.82624 0.778212 1.51301 0.987503C1.19978 1.19679 0.955653 1.49427 0.811491 1.84231C0.667329 2.19034 0.62961 2.57331 0.703103 2.94279C0.776596 3.31226 0.958001 3.65165 1.22438 3.91803C1.49075 4.1844 1.83014 4.36581 2.19961 4.4393C2.56909 4.51279 2.95206 4.47507 3.3001 4.33091C3.64814 4.18675 3.94561 3.94262 4.1549 3.62939C4.36419 3.31617 4.4759 2.94791 4.4759 2.5712C4.4759 2.06604 4.27523 1.58158 3.91803 1.22438C3.56083 0.867177 3.07636 0.666504 2.5712 0.666504Z"
fill="#626473"></path>
</svg></i></span>`,
url: `https://www.linkedin.com/shareArticle?mini=true&url=${encodedUrl}about`,
classes: 'linkedIn-class new-theme-social-icons-svg social-share-link m-r-20',
},
{
svg: `<span id='linkedIn'><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="M8.79617 3.44428H6.0184C5.77283 3.44428 5.53731 3.54183 5.36367 3.71548C5.19002 3.88912 5.09247 4.12464 5.09247 4.37021V7.14798H8.79617C8.84807 7.14683 8.89948 7.15816 8.94609 7.18102C8.99269 7.20389 9.03312 7.23761 9.06397 7.27935C9.09483 7.32109 9.11521 7.36964 9.12339 7.4209C9.13157 7.47216 9.12732 7.52463 9.11099 7.57391L8.4258 9.61094C8.395 9.70215 8.33653 9.78149 8.25853 9.83791C8.18053 9.89434 8.08688 9.92504 7.99062 9.92576H5.09247V16.8702C5.09247 16.993 5.04369 17.1107 4.95687 17.1976C4.87005 17.2844 4.75229 17.3332 4.62951 17.3332H2.31469C2.19191 17.3332 2.07415 17.2844 1.98733 17.1976C1.90051 17.1107 1.85173 16.993 1.85173 16.8702V9.92576H0.462841C0.340055 9.92576 0.222299 9.87698 0.135477 9.79016C0.0486543 9.70334 -0.00012207 9.58558 -0.00012207 9.4628V7.61095C-0.00012207 7.48816 0.0486543 7.3704 0.135477 7.28358C0.222299 7.19676 0.340055 7.14798 0.462841 7.14798H1.85173V4.37021C1.85173 3.38792 2.24194 2.44587 2.93652 1.75129C3.6311 1.05671 4.57315 0.666504 5.55543 0.666504H8.79617C8.91896 0.666504 9.03672 0.71528 9.12354 0.802103C9.21036 0.888925 9.25914 1.00668 9.25914 1.12947V2.98132C9.25914 3.1041 9.21036 3.22186 9.12354 3.30868C9.03672 3.3955 8.91896 3.44428 8.79617 3.44428Z" fill="#626473"></path></svg></i></span>`,
url: `https://www.facebook.com/sharer/sharer.php?&u=${encodedUrl}about`,
classes: 'social-share-link new-theme-social-icons-svg facebook-class m-r-20',
},
{
svg: `<span id='linkedIn'><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="M13.9047 10.4696L21.3513 2H19.5873L13.1187 9.35254L7.956 2H2L9.80867 13.1194L2 22H3.764L10.5907 14.2338L16.044 22H22M4.40067 3.30158H7.11067L19.586 20.7624H16.8753" fill="#626473"></path></svg></i></span>`,
url: `http://twitter.com/share?url=${encodedUrl}about`,
classes: 'social-share-link new-theme-social-icons-svg twitter-class m-r-20',
},
{
svg: `<span id='linkedIn'><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 fill-rule="evenodd" clip-rule="evenodd" d="M15.7707 12C16.6336 12 17.3332 11.3284 17.3332 10.5V1.5C17.3332 0.67157 16.6336 0 15.7707 0H2.229C1.36606 0 0.666504 0.67157 0.666504 1.5V10.5C0.666504 11.3284 1.36606 12 2.229 12H15.7707ZM8.99984 7.49988C8.24437 7.51159 7.15807 6.51678 6.61009 6.10296C4.12287 4.23327 2.95898 3.34585 2.229 2.77515V1.5H15.7707V2.77515C15.0408 3.34576 13.8772 4.233 11.3896 6.10296C10.8414 6.51693 9.75543 7.51147 8.99984 7.49988ZM15.7707 10.5H2.229V4.69995C2.9749 5.27029 4.03269 6.07062 5.64497 7.28262C6.35644 7.82028 7.60245 9.0072 8.99984 8.99997C10.3904 9.0072 11.6206 7.83749 12.3544 7.28286C13.9667 6.07089 15.0247 5.27035 15.7707 4.69998V10.5Z" fill="#626473"></path></svg></i></span>`,
url: `mailto:${''}?subject=${`You\'re invited to ${eventName}`}&body=${"I'd like to share this event with you!"}${encodedUrl}about`,
classes: 'social-share-link new-theme-social-icons-svg email-class',
},
];
if (ticketSummmaryEl?.length > 0) {
container.appendChild(labelContainer);
socialIcons.forEach((socialIcon) => {
const anchorEl = document.createElement('a');
anchorEl.classList = socialIcon.classes;
anchorEl.innerHTML = socialIcon.svg;
anchorEl.href = socialIcon.url;
anchorEl.rel = 'noopener noreferrer';
anchorEl.target = '_blank';
socialIconsContainer.appendChild(anchorEl);
container.appendChild(socialIconsContainer);
ticketSummmaryEl[0].appendChild(container);
});
}
if (goBackToEventsPageBtn) {
goBackToEventsPageBtn.addEventListener('click', function () {
intervalId = setInterval(customScript, 1000);
});
}
clearInterval(intervalId);
}
}
intervalId = setInterval(customScript, 1000);
})();
</script>