Embedding Widgets
Using our embed feature, you can directly embed sections from your Accelevents page, such as ticketing, agenda, countdown timer, or donation widget, into your website. You can also sell tickets directly on your website using the ticketing widget.
Important Notes
When using widgets, registrants should be able to complete the purchase directly from your website. However, if your event is connected to Square (payment processor), your event landing page will open in a new tab for registrants to complete their transactions, even if they selected free tickets from the widget.
If you're using the Tickets widget, the analytics will show you if the ticket is bought through your website through the UTM Referrer column.
When bookmarking or saving seats to sessions through a widget, the user must log in through the widget.
Embed Accelevents Widgets Into Your Site
Go to Settings > Widget Options in the admin console.
Select the widget
Click Copy to copy the embed code
Paste the code to your website's HTML editor (e.g., Wix Page Editor)
Different Types of Event Widgets
Tickets | Add the tickets widget to your website so your page visitors can register directly from your website instead of being redirected to your Accelevents landing page.
You can customize some of the colors in the widget and show or hide ticket step progress on top. |
Simple Registration | Add the simple registration widget to your website so your page visitors can enter their information and easily sign up in just a few clicks. We recommend this if the only requirement for your event is a ticket and if you are not using other registration features like discounts and access codes. You can learn more about simple registration here.
You can customize the button color and the text color. |
Buttons | Add the button widget to your page to redirect visitors to the ticket registration page, where they can start selecting tickets. This will open a new tab.
You can customize the button color and text. |
Countdown | Add a countdown timer to your website to highlight the remaining time until ticket sales begin or the event opens.
You can customize the countdown label, adjust the ending time, and customize some colors. |
Donate | Add the donate option to your website. This is available if you enable the donation module.
You can customize which items on the donate widget to show, change the text and come colors. |
Agenda | Add the agenda widget to display the event's session details and speakers on your website. The widget allows logged-in registrants to bookmark and save seats to sessions.
There is no option to customize the widget, but the customizations you set up in your Event Design tab will also be applied here, or you can add a custom CSS. |
Speakers | Add the speaker widget to display all or featured speakers on your website.
You can customize the card layout, show or hide social media links, highlight specific speakers, and adjust the profile image size. |
Custom Script to Remove the Scroller in the Ticket Widget
Add this script to your page to ensure all tickets from the ticket widget can be viewed without scrolling from within the iframe.
<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 |  |  |
Advanced Customization Through Custom CSS
Each widget has basic customization options, such as changing the text and background colors. If you want to customize the widget's appearance and style beyond the available options, add Custom CSS through Advanced Customization.
Widget CSS Classes
A CSS class name is like a label or a tag that you give to elements on a web page so that you can apply specific styles to them. Think of it as a way to group certain items together so that you can change how they look all at once.
For example, you want a specific background color for the speaker widget. You can use the speaker container CSS class name in your code: ae_widget_speakers_container
Your custom CSS would look something like this:
| Your widget would look something like this: 
|
Ticket CSS Classes
CSS Class Name | Description |
ae_widget_tickets_container | The container of the entire ticket widget. |
ae_widget_tickets_summary | The container above the tickets where the event details are shown. |
ae_widget_tickets_details | The container for the ticket types. |
Simple Registration CSS Classes
CSS Class Name | Description |
ae_widget_simple_registration_container | The container of the entire simple registration widget. |
ae_widget_simple_registration_header | The header of the simple registration widget. |
ae_widget_simple_registration_select_ticket | The container above the dropdown for the ticket type. |
ae_widget_simple_registration_buyer_Details | The container for ticket buyer information. |
ae_widget_simple_registration_holder_Details | The container for ticket holder information. |
ae_widget_simple_registration_button | The button to proceed with registration. |
Button CSS Classes
CSS Class Name | Description |
ae_widget_button_container | The container for the entire button widget. |
ae_widget_button_buy_button | The buy ticket button. |
Countdown CSS Classes
CSS Class Name | Description |
ae_widget_countdown_container | The container for the entire countdown widget. |
ae_widget_countdown_timer | The container for the countdown. |
Donation CSS Classes
CSS Class Name | Description |
ae_widget_donate_container | The container for the entire donate widget. |
ae_widget_donate_donation_box_header | The top container with the donation goal thermometer. |
ae_widget_donate_form | The container with the suggested amounts, amount field, and button. |
Speaker CSS Classes
CSS Class Name | Description |
ae_widget_speakers_container | The container for the entire speaker widget. |
ae_widget_speakers_profile | The container of each speaker profile. |
Agenda CSS Classes
CSS Class Name | Description |
ae_widget_agenda_container | The container of the entire agenda widget. |
ae_widget_agenda_session_header | The header of the agenda widget. |
ae_widget_agenda_session_tab | The second line with the tabs in the widget. |
ae_widget_agenda_session_container | The container for each session. |
Advanced Customization Through Custom Java Script
In addition to CSS, you can add Java Script for more customizations. In this example, we added a Java Script that shows a pop-up when the widget loads on the page.
Sample CSS and JavaScript
Make the Agenda background transparent
Make the Agenda background transparent
Add this CSS:
.ae_widget_agenda_container {
background-color: transparent;
}
Add this JavaScript:
const widgetBodyContainer =document.querySelector('.widget-body-background')
widgetBodyContainer.style.background = 'transparent';