Widget#
You can include your ticket shop on your website by embedding the pretix widget. The widget allows your customers to buy tickets without leaving your website. As an alternative to the widget, you can use the pretix Button. Clicking this button adds a selection of products to the cart and proceeds to checkout for the customer.
Your embedded widget could look like the following:
This article will guide you through the basic setup of the widget and some advanced configuration options.
Prerequisites#
You need to create at least one event before you can offer access to your ticket shop through the widget. The website will only display the widget if your ticket shop is active.
You need to have a website and the ability to make changes to it. Some basic knowledge of JavaScript is helpful.
General usage#
This section explains how to embed the pretix widget or the pretix button on your website either once or multiple times.
Embedding the widget on your website#
You can embed the pretix widget on your website by copying two code snippets from the pretix backend and pasting them into your website's HTML. In order to obtain these snippets, navigate to navigation pathYour Event then Settings then Widget. Choose the "Language" for the widget and click the Generate widget code button.
The website will produce two code snippets.
The first snippet sources the CSS and JavaScript resources for the widget from the pretix server.
Add this snippet to the <head> of your website if you want to comply with general conventions in web design.
This has the advantage of slightly better performance on slow connections.
Alternatively, you can also add it to <body>.
The code snippet will look similar to this:
<link rel="stylesheet" type="text/css" href="https://pretix.eu/demo/democon/widget/v2.css">
<script type="text/javascript" src="https://pretix.eu/widget/v2.en.js" async></script>
Add the second code snippet at the position where you want the widget to appear on your website. It will look similar to this:
<pretix-widget event="https://pretix.eu/demo/democon/"></pretix-widget>
<noscript>
<div class="pretix-widget">
<div class="pretix-widget-info-message">
JavaScript is disabled in your browser.
To access our ticket shop without JavaScript, please <a target="_blank" href="https://pretix.eu/demo/democon/">click here</a>.
</div>
</div>
</noscript>
Note
Some website builders such as Jimdo have trouble with our custom HTML tag.
If that is the case, edit the opening and closing tags in the first line of the second code snippet:
Replace <pretix-widget …> with <div class="pretix-widget-compat" …>.
Replace </pretix-widget> with </div>.
The examples provided in this article all use the base URL pretix.eu, the organizer demo, and the event democon.
If you want to apply these examples to your own event and website, you need to replace these strings with the ones matching your event.
The most straightforward way to obtain the right code is using the code generator. Navigate to navigation pathYour Event then Settings then Widget, click the Generate widget code button, and copy the code snippets from there.
Embedding multiple widgets on your website#
Note
If you want to use the widget for multiple events, then you do not have to embed multiple widgets. See Using the widget for multiple events.
If you want to embed multiple widgets for different events on your website, add the first snippet only once. Generate the second snippet for every event and add each one to your website's HTML.
pretix Button#
As an alternative to the full widget, you can embed a simple button on your website. Clicking this button adds a predefined selection of products to the cart and proceeds to checkout. You can try out this behavior here:
You can embed the pretix Button exactly like the pretix Widget.
In order to do that, add the CSS and JavaScript resources as described under "Embedding the widget on your website".
Instead of the pretix-widget tag, use the pretix-button tag:
<pretix-button event="https://pretix.eu/demo/democon/" items="item_6424=1">
Buy ticket!
</pretix-button>
items attribute to specify the items that the button will add to the cart.
The syntax of this attribute is:
Replace each instance of ITEMID with the ID of the item to be added.
Replace each instance of VARID with the ID of variations of those items.
Omit variation_ITEMID_VARID=4 if the items do not have variations.
Use the number behind the = symbol to specify the number of this item or variation to be added to the cart.
If you do not include the items attribute or do not pass a valid product or variation ID, clicking the button will open your ticket shop in a new browser tab without adding any items to the cart.
If you link the button to an event series, use the subevent attribute to specify the date for which it should add the items to the cart.
The button supports the optional attributes voucher, disable-iframe, and skip-ssl-check.
You can style the button using the pretix-button CSS class.
Applications#
This section covers all applications that go beyond the basic usage of the widget on your website:
- using the widget for multiple events or an event series
- influencing product availability
- customizing the behavior of the widget
- using your website's user data for the widget
- using tracking with the widget
- compatibility with your website's security settings
Using the widget for multiple events#
You can display multiple event shops in a single widget.
If you want to include all public events of your organizer account, remove the event slug from the URL in the event attribute, but leave in your organizer slug:
Using the widget for a selection of events#
If you are hosting multiple events, but only want to display some of them in the widget, then you should use metadata attributes. This section explains how to create metadata attributes, assign them to events, and set a filter in the widget.
You can create metadata attributes by navigating to navigation pathYour organizer then
Settings then Event metadata and clicking the
Create a new property button.
For example, you could set up a metadata property called "Promoted" with the values True and False, the default value being False.
In order to assign the metadata property to an event, navigate to navigation pathYour event then Settings then General. On the Basics tab, edit the relevant property under "Meta data".
For example, if you set up a metadata property called "Promoted" with values True and False that you set to True on some events, you can pass a filter like this:
<pretix-widget event="https://pretix.eu/demo/" list-type="list" filter="attr[Promoted]=True"></pretix-widget>
If you have enabled public filters in your metadata attribute configuration, the widget will display a filter form. To disable the filter form, use:
Using the widget for an event series#
You can link the widget to an event series. By default, the widget will display all dates in the event series. If you only want to display a selection of dates in the widget, you can filter them by metadata attribute. If you only want to display a single date in the widget, use the date ID.
You can use the list-type attribute to define if the widget will display dates in a monthly calendar view, a weekly calendar view, or a list view.
If you do not include this attribute, it will default to the setting you chose under navigation pathYour organizer then
Settings then General.
<pretix-widget event="https://pretix.eu/demo/series/" list-type="list"></pretix-widget>
<pretix-widget event="https://pretix.eu/demo/series/" list-type="calendar"></pretix-widget>
<pretix-widget event="https://pretix.eu/demo/series/" list-type="week"></pretix-widget>
For performance reasons, the system will always display a monthly calendar view if you have more than 100 events. You can see an example here:
Using the widget for a selection of dates#
If you only want to display a selection of dates in the widget, you can filter them by metadata attribute. This section explains how to create metadata attributes, assign them to dates, and set a filter in the widget.
You can create metadata attributes by navigating to navigation pathYour organizer then
Settings then Event metadata and clicking the
Create a new property button.
For example, you could set up a metadata property called "Promoted" with the values True and False, the default value being False.
In order to assign the metadata property to a selection of dates, navigate to navigation pathYour event then
Dates.
Select the dates that you want to display in the widget and click the
Edit selected (#) button.
Under "Meta data", check the box labeled "change" next to the attribute and select the value.
For example, change the value of the attribute "Promoted" to True.
You can also create one or several new dates and set the metadata attribute to the desired value.
Then, you add a filter parameter to your widget code.
In order to display only dates with the "Promoted" metadata attribute set to True, use:
<pretix-widget event="https://pretix.eu/demo/series/" list-type="list" filter="attr[Promoted]=True"></pretix-widget>
If you have enabled public filters in your metadata attribute configuration, the widget will display a filter form. To disable the filter form, use:
Using the widget for a single date#
If you want to use the widget for only a single date within an event series, pass the date ID to the subevent attribute.
In order to find a date's ID, navigate to navigation pathYour event then
Dates.
The page displays the date ID as a number preceded by a hashtag below the date's name in the list.
You need the number without the hashtag.
Alternatively, edit the date.
The number before the last slash in the URL is the product ID.
In order to display only the date #4387749 in the widget, pass them to the subevent attribute like this:
The subevent takes only a single date ID as an argument. It is not possible to filter for more than one date with this method. If you want to display multiple dates from your event series, but not all of them, filter them by metadata attribute.
Product availability#
This section explains how to influence product availability in the widget by using filters or preselecting vouchers.
Offering certain products through the widget only#
If you want to offer certain products through the widget only and not in your shop, then you should preselect a voucher in the widget.
Preselecting a voucher means that the widget will behave as if the customer entered the voucher code.
This section tells you how to make a product only available with a voucher and how to preselect that voucher using the voucher attribute in the widget code.
Navigate to navigation pathYour Event then Products then Products and create or edit the admission product in question. Open the Availability tab and check the box next to "This product can only be bought using a voucher".
Set the visibility toggle next to this option to "Hide product if unavailable" ( ). This will hide the product in your shop. It will only be displayed for voucher holders.
If you want to restrict availability for multiple products, take the steps described above for each product. Create a quota that includes all products that you want to make available only through the widget.
Navigate to navigation pathYour Event then Vouchers and click the Create a new voucher button. Leave the automatically generated suggestion in the "Voucher code" field or provide your own. Set the "Maximum usages" field to a high number such as 999999.
Under "Product", choose the product which you want to make available through the widget. If there is more than one product, select the quota that includes all those products. Check the box next to "Shows hidden products that match this voucher" at the bottom of the page.
Do not send the voucher code as an email or share it with anyone.
Instead, click the Save button, copy the voucher code, and pass it (for example, ABCDE123456) to the voucher attribute:
This way, the widget will only display products that customers can buy with the voucher and prices will change as defined by the voucher. For an example of a widget with a preselected voucher, see Offering discounts through the widget.
Offering only certain products through the widget#
This section explains how to display only some of your products in the widget.
You can filter the products displayed in the widget by passing a list of product IDs separated by commas. In order to find a product's ID, navigate to navigation pathEvent then Products then Products. The page displays the product ID as a number preceded by a hashtag below the product's name in the list. You need the number without the hashtag. Alternatively, edit the product. The number before the last slash in the URL is the product ID.
In order to display only products #562195 and #562202 in the widget, pass them like this:
Offering only certain categories of products through the widget#
You can filter the products you offer through the widget by category.
In order to find a category's ID, navigate to navigation pathYour event then
Products then Categories.
Edit the category in question.
The number before the last slash in the URL is the category ID.
In order to display only products from the categories #162620 and #162647 in the widget, pass them like this:
Offering only certain product variations through the widget#
You can also filter the products you offer through the widget by product variation. In order to find a product variation's ID, navigate to navigation pathEvent then Products then Products. Edit the product in question and open the Variations tab. The page displays the product ID as a number preceded by a hashtag below the variation's name in the list. You need the number without the hashtag.
In order to display only variations #437143, #437154, and #437155 in the widget, pass them like this:
<pretix-widget event="https://pretix.eu/demo/democon/" variations="437143,437154,437155"></pretix-widget>
Pricing and payment#
This section explains how to offer discounts through the widget, how to disable the voucher input and how to use Apple Pay with Stripe through the widget. All other payment providers and methods should work with the widget without issues.
Offering discounts through the widget#
If you want to offer discounts to customers placing their order through the widget, then you should preselect a voucher in the widget.
Preselecting a voucher means that the widget will behave as if the customer entered the voucher code.
This section tells you how to preselect a voucher using the voucher attribute in the widget code in order to offer a widget-exclusive discount.
Create a voucher as explained under offering a limited discount in the article on vouchers.
Do not share the voucher code publicly or directly to your customers.
Instead, pass the voucher code (for example, ABCDE123456) to the voucher attribute:
This way, the widget will only display products that customers can buy with the voucher and prices will change as defined by the voucher. You do not need to copy and edit the code example above. It may be easier to generate a code snippet that includes a voucher by using the "Pre-selected voucher" field on the widget settings page.
Here is an example of a widget with a voucher preselected:
Disabling the voucher input#
If you want to disable voucher input in the widget, you can pass the disable-vouchers attribute:
Offering Apple Pay via Stripe through the widget#
If you are using Stripe as a payment provider and want to offer Apple Pay through the widget, then you have to verify the domain with Apple Pay first. pretix will automatically validate the domain you are using for your shop regardless of the edition of pretix and your domain settings. But when embedding the widget on your website, your domain will also need to get validation in order to be able to use it for Apple Pay.
Refer to the Stripe documentation page on how to register domains for payment methods for further information.
Customizing widget behavior#
This section explains how to customize the widget's styling, the way in which the widget loads and opens, how it opens the checkout page, and how it displays event info.
Styling#
You can use CSS to customize the appearance of the widget or button to match your website.
You can use your browser's developer tools to inspect the rendered HTML of the widget.
Almost every element has a custom class and all classes have the prefix pretix-widget.
You can override the styles or use your own custom stylesheet.
Note
We designed the widget to conform with European Union accessibility standards. Do not break accessibility with your customizations to the widget, for instance by choosing colors with too little contrast.
Opening the widget dynamically#
You can call a function to open the widget dynamically in response to user action. This is similar to the behavior of the pretix Button, but you can call it from any part of your website's code.
Calling the function will open an overlay with your ticket shop. In some circumstances, such as missing HTTPS encryption or a small screen size, it will open a new tab instead. Therefore, you should only call this function in direct response to user action. Otherwise most browsers will block it as an unwanted pop-up.
Call window.PretixWidget.open, which has the following signature:
window.PretixWidget.open(target_url[, voucher[, subevent[, items[, widget_data[, skip_ssl_check]]]]])
Parameters:
- target_url (string): The URL of the ticket shop.
- voucher (string): A voucher code to preselect, or
null. - subevent (string): A date from an event series to preselect, or
null. - items (array): A collection of items to place in the cart, of the form
[{"item": "item_3", "count": 1}, {"item": "variation_5_6", "count": 4}] - widget_data (object): Additional data to pass to the shop.
- skip_ssl_check (Boolean): Whether to ignore the check for HTTPS. Do not skip this check on the active website. Only skip it during development.
Loading the widget dynamically#
You may need to control when and how the widget loads, for example because you want to modify user data dynamically with JavaScript. You can register a listener that will run before creating the widget:
<script type="text/javascript">
window.pretixWidgetCallback = function () {
// Will run before we create the widget.
}
</script>
You can suppress the loading of the widget or modify the user data passed to the widget:
<script type="text/javascript">
window.pretixWidgetCallback = function () {
window.PretixWidget.build_widgets = false;
window.PretixWidget.widget_data["email"] = "test@example.org";
}
</script>
In order to trigger loading the widgets, call window.PretixWidget.buildWidgets().
Waiting for the widget to load or close#
If you want to run custom JavaScript once the widget is fully loaded or when it is closed, you can register callback functions:
<script type="text/javascript">
window.pretixWidgetCallback = function () {
window.PretixWidget.addLoadListener(function () {
console.log("Widget has loaded!");
});
window.PretixWidget.addCloseListener(function () {
console.log("Widget has been closed!");
});
}
</script>
You can run these functions multiple times, for instance, once for every widget on the page or once every time the user changes the list/calendar view.
Always open a new tab#
By default, the checkout process will open in a new tab on devices with smaller screens.
If you want the checkout process to always open in a new tab regardless of screen size, you can pass the disable-iframe attribute:
Show or hide event info#
If you linked the widget to an event series, then it will display event info such as title, location, and front page text by default.
It will not display that info for a single event.
You can pass the optional display-event-info attribute to change this behavior.
If you want the widget to display an event series without information, pass the attribute with the value "false".
Pass the display-event-info attribute with the value "auto" for the default behavior.
If you want the widget to display a singular event with the information, pass it with the value "true".
The widget will handle any value other than "false" or "auto" like "true".
Using your website's user data for the widget#
This section explains how to handle user data using the widget.
If you display the widget on a page that requires user login, you can pre-fill fields in the checkout process with known user data. This can save your users some typing and increase conversions. You can also pass additional data attributes with that information:
<pretix-widget event="https://pretix.eu/demo/democon/"
data-attendee-name-given-name="Jamie"
data-attendee-name-family-name="Doe"
data-invoice-address-name-given-name="Jamie"
data-invoice-address-name-family-name="Doe"
data-email="test@example.org"
data-question-L9G8NG9M="Foobar">
</pretix-widget>
If you want to do this with the pretix Button, then you also have to specify the items attribute.
Data attributes are reactive. Thus, you can use JavaScript to change them. Once the user has started the checkout process, pretix does not update data attributes in the existing checkout process. Doing so would interrupt the process and the user would have to start over.
Updating data attributes through JavaScript, requires a fresh reference to the HTMLNode of the widget. Creating the widget may replace the original HTMLNode, and thus the reference may turn stale. In order to force the use of a fresh reference, use the following code:
document.querySelectorAll("pretix-widget, pretix-button, .pretix-widget-wrapper")
pretix understands the following data attributes:
-
data-emailwill pre-fill the order email field and the attendee email field (if enabled). -
data-question-IDENTIFIERwill pre-fill the answer for the question with the given identifier. You can view identifiers by navigating to navigation pathYour event then Products then Questions. In order to set an internal identifier, edit or create a question, switch to the Advanced tab and use the "Internal identifier" field. -
data-attendee-namewill pre-fill the last part of the name. The exact behavior depends on your configuration under navigation pathYour event then Settings then General, on the Customer and attendee data tab. For more control over the name that is pre-filled, use the following attributes. The best choice depends on your configuration of the naming scheme in the event settings.data-attendee-name-full-namedata-attendee-name-given-namedata-attendee-name-family-namedata-attendee-name-middle-namedata-attendee-name-titledata-attendee-name-calling-namedata-attendee-name-latin-transcription
-
data-invoice-address-FIELDwill pre-fill the corresponding field of the invoice address. Possible values forFIELDare:companystreetzipcodecitycountry(expects a two-character country code)internal-referencevat-idcustom-field- fields specified by the naming scheme such as
name-titleorname-given-namecountry
-
Setting
data-fix="true"means that the user will not be able to change the other given values later. This only works for the order email address and the invoice address. The user will always be able to modify attendee-level fields and questions.
Note
The data-fix="true" attribute is not a security feature.
Your website's users can override it.
Do not rely on this for authentication.
- Setting
data-consent="…"means that the cookie consent mechanism will adopt the consent for the given cookie providers. This will disable all other providers. The widget will not display a consent dialog. It will not be possible to change the cookie settings inside the widget. This is useful if you already asked the user for consent and do not want the widget to ask them again. Example:data-consent="facebook,google_analytics"If the user has refused consent for all cookie providers, usedata-consent="none"to disable all providers. The pretix "Tracking codes" plugin supports the following values:adformfacebookgosquaredgoogle_adsgoogle_analyticshubspotlinkedinmatomotwitter
Any active pretix plugins might understand more data attributes.
For instance, if you are using the campaigns plugin, you can pass a campaign ID as a value to data-campaign.
This way, the plugin will count all orders made through this widget towards this campaign.
Using tracking with the pretix Widget#
If you use the tracking plugin, you can enable cross-domain tracking. This is only necessary if you host your pretix shop and the website on which you embed the widget on two separate domains. If you run your pretix shop on a subdomain of your main tracking domain, then you do not need cross-domain tracking. The tracking plugin supports tracking across subdomains, so a cross-domain tracking setup is not needed in that case. Refer to the article on custom domains for further information.
Add the embedding website to your referral exclusions in your Google Analytics settings.
Add Google Analytics like you would on any other page, including your [window.dataLayer]{.title-ref} and [gtag]{.title-ref} configurations.
Add the widget code.
You have two options:
The first option is blocking the loading of the widget until Google's client and session ID have finished loading, or for a maximum of two seconds. This is similar to loading the widget dynamically. If it takes longer than two seconds to load, client and session ID are not passed to the widget.
The other option is setting data attributes asynchronously. The website will display widgets immediately, but it is not possible to change data attribute once the user has entered checkout.
If you want to use the first method (temporarily blocking the loading of the widget), include the following code on your website.
Replacing all occurrences of <MEASUREMENT_ID> with your Google Analytics MEASUREMENT_ID (G-XXXXXXXX):
<script type="text/javascript">
window.pretixWidgetCallback = function () {
window.PretixWidget.build_widgets = false;
window.addEventListener('load', function() { // Wait for GA to be loaded
if (!window['google_tag_manager']) {
window.PretixWidget.buildWidgets();
return;
}
var clientId;
var sessionId;
var loadingTimeout;
function build() {
// use loadingTimeout to make sure build() is only called once
if (!loadingTimeout) return;
window.clearTimeout(loadingTimeout);
loadingTimeout = null;
if (clientId) window.PretixWidget.widget_data["tracking-ga-id"] = clientId;
if (sessionId) window.PretixWidget.widget_data["tracking-ga-sessid"] = sessionId;
window.PretixWidget.buildWidgets();
};
// make sure to build pretix-widgets if gtag fails to load either client_id or session_id
loadingTimeout = window.setTimeout(build, 2000);
gtag('get', '<MEASUREMENT_ID>', 'client_id', function(id) {
clientId = id;
if (sessionId !== undefined) build();
});
gtag('get', '<MEASUREMENT_ID>', 'session_id', function(id) {
sessionId = id;
if (clientId !== undefined) build();
});
});
};
</script>
If you want to use the other method (setting data attribute asynchronously), include the following code on your website.
Replace all occurrences of <MEASUREMENT_ID> with your Google Analytics MEASUREMENT_ID (G-XXXXXXXX):
<script type="text/javascript">
window.addEventListener('load', function() {
gtag('get', '<MEASUREMENT_ID>', 'client_id', function(id) {
const widgets = document.querySelectorAll("pretix-widget, pretix-button, .pretix-widget-wrapper");
widgets.forEach(widget => widget.setAttribute("data-tracking-ga-id", id))
});
gtag('get', '<MEASUREMENT_ID>', 'session_id', function(id) {
const widgets = document.querySelectorAll("pretix-widget, pretix-button, .pretix-widget-wrapper");
widgets.forEach(widget => widget.setAttribute("data-tracking-ga-sessid", id))
});
});
</script>
Security#
This section explains aspects of embedding the widget that are relevant for security: SSL/HTTPS and policy settings on your website.
SSL#
Buying a ticket usually involves entering sensitive data. Thus, we strongly suggest that you use SSL/HTTPS for the page that includes the widget. Initiatives such as Let's Encrypt allow you to obtain a SSL certificate free of charge.
pretix will use SSL for all data transferred from the widget even if you embed the widget on a non-SSL site. However, if you are not using SSL for your site, it is possible for a man-in-the-middle attacker to make malicious changes to the widget. Using SSL for data transfers is standard practice now. Your customers may only trust your website if their browser displays the secure lock icon while they are accessing it.
If your website does not use SSL, the checkout process will open in a new browser tab for your users.
If you are confident that you have a good reason for not using SSL, you can override this behavior with the skip-ssl-check attribute:
Content Security Policy (CSP)#
If you are using a Content Security Policy (CSP) on your website, you may need to make some adjustments. If your pretix shop is running under a custom domain, you need to add the following rules:
script-src:'unsafe-eval' https://pretix.eu(adjust to your domain for self-hosted pretix)style-src:https://pretix.eu(adjust to your domain for self-hosted pretix and for custom domain on pretix Hosted)connect-src:https://pretix.eu(adjust to your domain for self-hosted pretix and for custom domain on pretix Hosted)frame-src:https://pretix.eu(adjust to your domain for self-hosted pretix and for custom domain on pretix Hosted)img-src:https://pretix.eu(adjust to your domain for self-hosted pretix and for custom domain on pretix Hosted). For pretix Hosted, also addhttps://cdn.pretix.space.
Cross Origin Opener Policy#
If you set Cross-Origin-Opener-Policy: same-origin on your site, then using a payment provider that opens a new window during checkout (such as PayPal) results in an empty popup window opening in the foreground.
This is due to JavaScript not having access to the opened window.
To mitigate this, you need to either always open the widget's checkout in a new tab or set Cross-Origin-Opener-Policy: same-origin-allow-popups.
Cross Origin Embedder Policy#
The pretix Widget is not compatible with Cross-Origin-Embedder-Policy: require-corp.
If you include the crossorigin attributes on the <script> and <link> tag, then the widget can display a calendar or product list.
But it will not be able to open the checkout process in an iframe.
If you also set Cross-Origin-Opener-Policy: same-origin, then the widget will be able to detect that it is running in an isolated environment and will instead open the checkout process in a new tab.
Troubleshooting#
The code copied from this page does not work#
If you want to apply code examples from this page to your own event and website, you need to replace the strings with the ones matching your event.
The examples provided in this article all use the base URL pretix.eu, the organizer demo, and the event democon or the event series series.
Your own event will use different organizer and event slugs.
If you are using a different domain, then you will also need to use a different base URL.
If you want to apply these examples to your own event and website, you need to replace these strings with the ones matching your event. The most straightforward way to obtain the right code is using the code generator. Navigate to navigation pathYour Event then Settings then Widget, click the Generate widget code button, and copy the code snippets from there.
Versioning#
When making changes to the widget, we try to avoid interfering with the configuration options listen on this page or causing compatibility issues with custom styling of your page as far as possible. Occasionally, we do however need to make changes that alter the structure of the widget and might cause incompatibility. In these cases, we release a new version of the widget, indicated by the incremented version number in both the script and stylesheet location.
We announce new versions of the widget with the monthly pretix release notes, also available through our newsletter. You can then switch to the new version at a time of your choice with the chance to test if any changes to your custom styling is necessary.
When announcing a new version, we also announce a date of deprecation for the old version. After this date, we will automatically replace the old version with the new one. In other words, if you do not upgrade to the new version manually, you will automatically be upgraded after the deprecation date. This may lead to issues with custom styling.
Changelog#
Version 2#
-
We changed the HTML structure of the widget to improve the accessibility of the widget. We made the most significant changes to the calendar view, which now resembles the calendar view of the standalone ticket shop more closely. The updated default stylesheet comes with stronger color contrasts, clear highlighting of focused elements and similar accessibility features.
-
We removed the attribute
single-item-select. The widget now always uses a button-style rendering.
Availability: Version 2 is available starting with pretix 2025.5.0 (released late May, 2025).
Deprecation schedule: Starting with pretix 2025.6.0 (released late June, 2025), all users of version 1 will be automatically upgraded to version 2. We are intentionally keeping this time frame short to help users comply with the European Accessibility Act.