Eventbrite is a ticketing and event technology platform that helps businesses organize and sell tickets to events online while helping people discover events that fuel their passions. You can utilize it to create, manage, promote, and sell your events, workshops, concerts, conferences, and festivals.
In this article, we will learn how to integrate Eventbrite with your LearnWorlds school courses in an embed learning activity.
Create an Event
To create an event on Eventbrite:
1. Visit Eventbrite's official website, log in to your Eventbrite account, and select Create Event at the top of the page.
2. Fill in the basic info, choose a location, and select the date and time of the event.
3. You will be asked to manage your event's details by writing a Description, adding text, images, and video, and clicking on the Save & Continue button.
4. Navigate to the Tickets option, click Create Ticket, enter your ticket information, and make sure to select an option e.g., Free, Paid, or Donation, and click on Save.
5. You are ready to Publish your event! For further information, refer to the relevant article on Eventbrite.
Ensure that you use a Professional or Premium account on Eventbrite.
Embed Eventbrite Events
Let's explore how you can embed Eventbrite into your LearnWorlds courses.
Checkout appearance: A button that overlays a modal window on the page
To add an Eventbrite event to your course content, you need first to create an Embed learning activity. Once you create the EventBrite event:
1. Click on Marketing → Embedded Checkout.
2. Choose the A button that overlays a modal window on the page option.
3. Find the snippet code generated by Eventbrite.
4. In order to work on an embedded learning activity, ue the following snippet of code:
<!-- Noscript content for added SEO -->
<noscript><a href="https://www.eventbrite.com/e/corona-test-party-at-home-tickets-101283469584" rel="noopener noreferrer" target="_blank"></noscript>
<!-- You can customize this button any way you like -->
<button id="eventbrite-widget-modal-trigger-101283469584" type="button">Buy
Tickets</button>
<noscript></a>Buy Tickets on Eventbrite</noscript>
<script type="text/javascript">
var s = document.createElement('script');
s.src = "https://www.eventbrite.com/static/widgets/eb_widgets.js";
s.onload = function () {
var exampleCallback = function() {
console.log('Order complete!');
};
window.EBWidgets.createWidget({
widgetType: 'checkout',
eventId: '101283469584',
modal: true,
modalTriggerElementId: 'eventbrite-widget-modal-trigger-101283469584',
onOrderComplete: exampleCallback
});
}
document.body.appendChild(s);
</script>
5. Before pasting this code on the Embed learning activity, you need to replace the eventId variable with this from the generated Eventbrite code.
Check the following highlighted parts, which are the parts you need to replace:
6. This snippet of code is inserted while editing the embedded learning activity in the respective field.
The final result on the Course player will be the following:
After clicking on the “Buy tickets” button you will be prompted to the checkout page of the event.
The event should be "On Sale" status.Checkout Appearance: Embedded within the content on the page
There is an extra option for the checkout appearance of the EventBrite event. Once you create the EventBrite event:
1. Click on Marketing → Embedded Checkout.
2. Choose the Embedded within the content on the page option.
3. Locate the snippet code generated by Eventbrite.
4. To ensure that this will work in LearnWorlds, use the following snippet of code:
<div id="eventbrite-widget-container-350435511047"></div>
<script type="text/javascript">
var s = document.createElement('script');
s.src = "https://www.eventbrite.com/static/widgets/eb_widgets.js";
s.onload = function () {
var exampleCallback = function() {
console.log('Order complete!');
};
window.EBWidgets.createWidget({
// Required
widgetType: 'checkout',
eventId: '350435511047',
iframeContainerId: 'eventbrite-widget-container-350435511047',
// Optional
iframeContainerHeight: 425, // Widget height in pixels. Defaults to a minimum of 425px if not provided
onOrderComplete: exampleCallback // Method called when an order has successfully completed
});
}
document.body.appendChild(s);
</script>
5. Before pasting the code in an embedded learning activity, you need to replace the eventId, iframeContainerId, eventbrite-widget-containter variables with those that have been generated on the Eventbrite code.
Check the following highlighted parts, which are the parts you need to replace:
The final result in the course player will be the following:
The snippet of code that should be added to the embed learning activity can also be added to an embed section on your LearnWorlds pages.