Add a Custom Script to Your Event

Tailor your event further by adding custom scripts

Shella avatar
Written by Shella
Updated over a week ago

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 would 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 on the Body Script field, then click Save. Your changes should reflect on the landing page or event hub.


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. A chat bubble will appear at the bottom right corner when added to the landing page.

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

More Landing Page Codes

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 page and check out page.

  • 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>

Change the "Have an Access Code" color

<style>
#isPasted a,
.have-a-access-code {
color: #FE5000 !important;
}
</style>

All Codes Above

<style>
#isPasted a,
.show-text.pointer,
.new-theme-add-to-calendar #ae-dropdown .new-landing-page-add-to-calendar,
.ae-link.primary,
.have-a-access-code {
color: #FE5000 !important;
}

#EventTagLine {
color: #FE5000;
}

</style>

Did this answer your question?