Adding a ticket registration widget to your website is a simple yet powerful way to streamline event registrations and boost ticket sales. Instead of redirecting visitors to an external site, the widget lets them purchase tickets directly on your website, creating a seamless and user-friendly experience. This not only improves conversions but also enhances your brand’s credibility while reducing manual work. Whether you’re hosting a conference, concert, or fundraiser, integrating a ticket widget can make the entire process more efficient and engaging.
Customize the Widget by Adding a Code
In this article, we'll give you customization options for the ticket and simple registration widgets beyond the basic options available. You can improve the appearance and style of your widget by adding parameters to the embeddable code, Custom CSS, and JavaScript.
If you haven't used our embeddable widgets yet, please check this article first.
Widget Types
We have 3 types of registration widgets that can be customized for a better user experience.
The Ticket Widget is ideal for selling multiple ticket types. Its registration steps are the same as those on the event landing page.
The Button Widget displays a button and when clicked, the Ticket Widget appears on top of it.
The Simple Registration Widget enables easy sign-ups for free tickets. Rather than choosing a ticket quantity, it automatically sets to 1 ticket per registration; users only need to provide their information to complete the registration.
Auto-select the ticket type and quantity for the Ticket Widget
Updating the embeddable widget code with the quantity and ticket type ID will automatically select the ticket type(s) and the quantities for each ticket. Since they're pre-selected, the first step is skipped for the ticket widget.
Click the arrow to see how to update the code
Click the arrow to see how to update the code
1. Get the Ticket Type ID
The ticket type ID determines which ticket will be pre-selected in the widget.
Go to Settings > Integrations in your Accelevents admin console
Enable Tray Integration Platform
Click Configure
Select the ticket type from the dropdown and copy the ID number in the field below.
If you're including multiple tickets, copy all the ticket type IDs and list which ID is for which ticket.
Click Save.
2. Add the Ticket Type ID and Quantity to the embed code
The widget code would look something like the code below. Before the ></script></div>, you'll need to add the code with the quantity and Ticket Type ID
Below is the code you need to insert, but you need to update 2 with your desired quantity and 12345 with your Ticket Type ID
custom_multiple_ticket_list='[{"ticketQuantity":"2","ticketingTypeId":"12345"}]'The new embed code should look like below:
If multiple ticket types should be pre-selected, you can add another code like this below. Ensure to update the correct quantity and Ticket Type ID. This should be inserted after the }
,{"ticketQuantity":"2","ticketingTypeId":"12345"} The new embed code with multiple ticket types selected should look like this:
Auto-select the ticket type for the Simple Registration Widget
The quantity will always be 1 for the simple registration widget, but updating the embeddable widget code with the Ticket Type ID will pre-select the ticket type if you have multiple free ticket types. The dropdown to select the registration type disappears from the widget.
Click the arrow to see how to update the code
Click the arrow to see how to update the code
1. Get the Ticket Type ID
The ticket type ID determines which ticket will be pre-selected in the widget.
Go to Settings > Integrations in your Accelevents admin console
Enable Tray Integration Platform
Click Configure
Select the free ticket type from the dropdown and copy the ID number in the field below.
Click Save.
2. Add the Ticket Type ID and Quantity to the embed code
The widget code would look something like the code below. Before the ></script></div>, you'll need to add the code with the Ticket Type ID
Below is the code you need to insert, but you need to 2 to your desired quantity and 12345 with your Ticket Type ID
custom_single_ticket='{"ticketingTypeId":"12345"}'The new embed code should look like below:
Remove the Scroller in the Ticket Widget
Add this script to your website to ensure all tickets from the ticket widget can be viewed without scrolling from within the iframe.
Click the arrow to see the script
Click the arrow to see the script
<script>
window.addEventListener('message', function(event) {
// Ensure the message has a valid event name and data structure
if (event.data && event.data.eventName === 'onWidgetResize' && typeof event.data.data.height === 'number') {
// The `widgetContainer` is the ID of the widget container element. You can use it to dynamically adjust the height as needed.
const widgetContainerDiv = document.getElementById('widgetContainer');
if (widgetContainerDiv && event.data.data.height > 0) {
widgetContainerDiv.style.height = event.data.data.height + 'px'; // Set div height
}
}
});
</script>
| View without the script | View with the script |
Laptop |  |  |
Mobile | 
| 
|
Add JavaScript to the Ticket Widget Settings
If you want to further customize the widget like hiding some elements or adding text in the registration steps, check out the sample codes we have in this article:
You can insert the code Custom Java Script section for the ticket widget settings to apply the code to the widget. You may need to remove the <script> and </script> at the start and end to save it.
Remove <script> and </script> and paste the rest of the code.
