The run.events Tickets Widget can be configured in many ways to support your event’s registration flow. If you use the widget as-is, out of the box, it will work, enabling you to start selling tickets on your website within minutes:
<runevents-tickets slug="event-slug" api-url="https://api.runevents.net/api" checkout-url="https://e.runevents.net/event-slug/checkout">
This code will show the ticket in its default mode, with default texts and labels. Let's see how we can tweak it to better suit our needs.
One common requirement is to display **net instead of gross prices** in the widget. This can be done by setting the `use-net-price` parameter to "true":
<runevents-tickets
slug="event-slug"
api-url="https://api.runevents.net/api"
checkout-url="https://e.runevents.net/event-slug/checkout"
use-net-price="true"
/>
Translating the Tickets Widget
If you would like to translate the Tickets Widget into another language or if you simply don't like our labels and want to use your own, you can use widget parameters to translate or change any widget label:
- label-order-summary => change or localize 'Order Summary' label
- label-available-tickets => change or localize 'Available Tickets' label
- label-apply => change or localize 'Apply' label
- label-checkout => change or localize 'Checkout' label
- label-redirected => change or localize 'You will be redirected to run.events' label
- label-voucher-info => change or localize 'Voucher info' label
- label-total => change or localize 'Total' label
A fully localized widget code would then look like this:
<runevents-tickets
slug="event-slug"
api-url="https://api.runevents.net/api"
checkout-url="https://e.runevents.net/event-slug/checkout"
label-order-summary="Your Order"
label-available-tickets="Tickets"
label-apply="Apply"
label-checkout="Proceed"
label-redirected="We use run.events, and you will be redirected to their page"
label-voucher-info="Use Voucher"
label-total="Grand Total"
/>
Auto-Applying Vouchers
Vouchers are a Swiss-army knife concept in run.events: they can be used both for defining discounts and for revealing ticket types which will be displayed in the Tickets Widget or on the tickets page.
Let's take as an example that a certain ticket type, e.g. "VIP Ticket," is only available to attendees who present the voucher "SHOWVIP." Of course, they can enter that voucher in the voucher field, but that's an extra step that you might want to avoid in certain situations. You might prefer the voucher to be automatically applied. A good example of this is when you want to create a separate web page just for VIP registration.
For those situations, you'd use the widget parameter "enforce-voucher." Here’s an example of how that would look:
<runevents-tickets
slug="event-slug"
api-url="https://api.runevents.net/api"
checkout-url="https://e.runevents.net/event-slug/checkout"
enforce-voucher="SHOWVIP"
/>
In this case, the widget will show only those tickets revealed by that voucher and apply any discounts associated with it.
It is possible to pass a voucher to the widget without explicitly stating it in the voucher code. If you pass a query parameter "voucher" to the web page where the Tickets Widget is embedded, it will be automatically applied, just as if you had enforced it through the widget parameter.It would look something like this:
https://your-page/registration?voucher=SHOWVIP
This can be handy when you want to create dynamic ticket and registration forms based on the context of the website.
If both query parameters and widget parameters are stated, the widget parameter takes precedence.
Selecting Tickets to be Shown in the Widget
While vouchers can be used to filter which tickets will be shown in the Tickets Widget, sometimes that's not enough. For example, what if you want to show only a subset of ticket types but still allow discount vouchers to be applied to them?
This is often the case when you want to build different registration pages for different attendee groups.
In these cases, the widget parameter "include-ticket-types" can be used. For example:
<runevents-tickets
slug="event-slug"
api-url="https://api.runevents.net/api"
checkout-url="https://e.runevents.net/event-slug/checkout"
include-ticket-types="['Sponsors Ticket', 'Expo pass']"
/>
In this case, only the ticket types with names "Sponsors Ticket" and "Expo pass" will be shown, which might be handy for building the sponsor registration page.
Please note that vouchers can be combined with the `include-ticket-types` parameter, regardless of whether the voucher has been entered manually by the attendee or enforced by the webmaster through the `enforce-voucher` parameter or the "voucher" query parameter.
Preserving marketing tracking info
If you are using social media marketing to bring interested attendees to your website and ticket registration page, we will help you track which marketing campaign has actually brought people to your site. This is part of “Precision Marketing Tracking,” a unique feature of run.events.
However, many attendees don’t buy tickets immediately after seeing or following the ad. They take time to think about it, ask for a budget from their employer, etc. When they return to your website to complete the purchase, the original source of their visit is often lost because the context of their initial visit is no longer available.
You can counteract this to a degree: if you use the “preserve-tracking” parameter and set it to “true,” run.events will try to preserve the origin information as long as possible (until that information is lost from browser's local storage). So even if attendees see and follow your ad today but return to buy their tickets tomorrow or next week, run.events will be able to associate it with the original social marketing campaign.
<runevents-tickets
slug="event-slug"
api-url="https://api.runevents.net/api"
checkout-url="https://e.runevents.net/event-slug/checkout"
preserve-tracking = "true"
/>
Enforcing local currency formatting
run.events tickets widget will try to show the currency formatting in the user's locale, which is defined by their browser or operating system regional settings. However, some users tend to leave those settings at their default (often US / English), but still expect to see the currency formatting in a specific format.
To prevent this confusion, organizers can enforce currency formatting in the tickets widget, by specifying desired format by using the "force-locale" parameter and setting it to a desired locale.
<runevents-tickets
slug="event-slug"
api-url="https://api.runevents.net/api"
checkout-url="https://e.runevents.net/event-slug/checkout"
force-locale="de-de"
/>This example from above will enforce German currency formatting in your tickets widget.
The list of possible locales (formatting standards) can be found here:
[MS-OE376]: Part 4 Section 7.6.2.39, LCID (Locale ID) | Microsoft Learn