Advanced setup
A number of attributes can be set on the script tag to further customise the ticket shop. The below snippet shows the default values.
<script
src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js"
data-fixr-shop-id="XXXXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXXX"
data-fixr-theme="light"
data-next-event-heading="Next Event"
data-upcoming-events-heading="Upcoming Events"
data-name-filter=""
data-description-filter=""
data-after-filter=""
data-before-filter=""
></script>
| Attribute | Description |
|---|---|
data-fixr-shop-id | Ticket shop ID |
data-fixr-theme | The color scheme to be used (“light” or “dark”) |
data-next-event-heading | The text displayed above the first upcoming event |
data-upcoming-events-heading | The text displayed above the rest of the upcoming events |
data-name-filter | Only show events with names containing the provided string |
data-description-filter | Only show events with descriptions containing the provided string |
data-after-filter | Only show events with start dates after the provided date (UTC Timestamp), e.g. 1564481355 |
data-before-filter | Only show events with start dates after the provided date (UTC Timestamp), e.g. 1564481355 |
The above attributes can also be set as query string parameters:
<script src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js?fixrShopId=XXXXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXXX&fixrTheme=dark"></script>
Styling
You can override styles by targeting the .fixr-events-widget element and its children. Override the below default CSS variables to create your own theme.
<style>
.fixr-events-widget[data-theme="light"] {
/* Colors */
--fixr-primary: #d0021b;
--fixr-on-primary: #e9eaeb;
--fixr-body: transparent;
--fixr-on-body: inherit;
--fixr-background: #f7f7f7;
--fixr-on-background: #1e1e1e;
--fixr-on-background-subdued: #6e6e6e;
--fixr-on-background-subtle: #dddddd;
--fixr-surface: #ffffff;
--fixr-on-surface: #1e1e1e;
--fixr-on-surface-subdued: #6e6e6e;
--fixr-on-surface-subtle: #e9eaeb;
--fixr-input: #fff;
--fixr-on-input: #2e2e2e;
--fixr-input-border: #dddddd;
--fixr-input-placeholder: #7f7f7f;
--fixr-focus: #289df4;
--fixr-image-placeholder: #e9eaeb;
--fixr-scrollbar: #b3b3b3;
--fixr-scrollbar-background: var(--fixr-background);
--fixr-overlay: rgba(0, 0, 0, 0.2);
/* shapes */
--fixr-surface-border-radius: 4px;
--fixr-button-border-radius: 4px;
--fixr-input-border-radius: 4px;
--fixr-surface-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* typography */
--fixr-body-font: "Montserrat", inherit;
--fixr-heading-font: "Montserrat", inherit;
--fixr-button-font: inherit;
--fixr-button-font-size: 14px;
--fixr-button-font-weight: bold;
--fixr-button-text-transform: none;
}
</style>
API
Provide a callback to the script tag to get access to the api object.
<script>
function onShopApiReady(api) {
/*
Updates the ticket shop to show events with names containing "football"
and descriptions containing "world cup"
*/
api.setFilter({
name: "football",
description: "world cup",
});
// log the array of event objects
console.log(api.events);
}
</script>
<script
src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js?callback=onShopApiReady"
data-fixr-shop-id="XXXXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXXX"
data-fixr-theme="light"
></script>
API Properties
events
An array of event objects. Useful for when using the widget in headless mode.
API Methods
setFilter
A function to filter the events that are displayed in the widget. Takes a plain object as its argument, which can contain one or more of the following properties:
api.setFilter({ name, description, before, after })
| Property | Type | Description |
|---|---|---|
name | string | Event name to filter by |
description | string | Event description to filter by |
before | number | Start date before (UTC Timestamp) |
after | number | Start date after (UTC Timestamp) |
clearFilter
Clears all active filters.
api.clearFilter()
showEventDetails
Opens the event details for a single event. Takes the id of the event as parameter.
api.showEventDetails(eventId)
| Parameter | Type | Description |
|---|---|---|
eventId | number | id of the event to view |
hideEventDetails
Hides the acitve event details modal.
api.hideEventDetails()
showCheckout
The showCheckout function lets you open the checkout modal for a specific event. Call this function with the appropriate event ID, and the modal will open up, allowing your users to purchase tickets and complete their transactions.
api.showCheckout(eventId)
| Parameter | Type | Description |
|---|---|---|
eventId | number | id of the event |
Listening to events
If you need to respond to interactions within the widget or track custom analytics, you can take advantage of the events that are emitted via the postMessage API. By listening for these events, you can trigger specific actions or gather valuable data about how users are interacting with your widget.
window.addEventListener("message", (e) => {
if (e.data?.type?.includes("fixr")) {
console.log(`Received message ${e.data.type}`);
console.log("Data: ", e.data);
}
});
Events
fixr:checkout_ready
Triggered when the checkout is ready to receive user input.
| Property | Type | Description |
|---|---|---|
| type | string | Message type (fixr:checkout_ready) |
fixr:reservation_create
Triggered when a reservation is created and checkout flow begins.
| Property | Type | Description |
|---|---|---|
| type | string | Message type (fixr:reservation_create) |
| name | string | Name of sender window |
| payload | object | Order payload with event and reservation details |
fixr:purchase_complete
Triggered when a purchase is successfully completed.
| Property | Type | Description |
|---|---|---|
| type | string | Message type (fixr:purchase_complete) |
| name | string | Name of sender window |
| payload | object | Order payload with event and reservation details |
fixr:view_item
Triggered when user views the ticket listing.
| Property | Type | Description |
|---|---|---|
| type | string | Message type (fixr:view_item) |
| name | string | Name of sender window |
| payload | object | View item payload with currency, value and items |
fixr:add_to_cart
Triggered when items are added to cart.
| Property | Type | Description |
|---|---|---|
| type | string | Message type (fixr:add_to_cart) |
| name | string | Name of sender window |
| payload | object | Cart payload with items details |
fixr:remove_from_cart
Triggered when items are removed from cart.
| Property | Type | Description |
|---|---|---|
| type | string | Message type (fixr:remove_from_cart) |
| name | string | Name of sender window |
| payload | object | Cart payload with items details |
fixr:booking_failed
Triggered when a booking attempt fails.
| Property | Type | Description |
|---|---|---|
| type | string | Message type (fixr:booking_failed) |
| name | string | Name of sender window |
| payload | object | Order payload with error details |
fixr:load_error
Triggered when there is an error loading the widget.
| Property | Type | Description |
|---|---|---|
| type | string | Message type (fixr:load_error) |
| name | string | Name of sender window |
| payload | object | Contains error message |
Headless mode
If you’d like complete control over the appearance of your events, you can put the widget in headless mode by adding the “headless=true” parameter to the script tag. In this mode, the widget won’t render anything, and you’ll need to manually invoke the client-side API methods to display event details or available tickets.
<script src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js?headless=true&callback=fixrApi" data-fixr-shop-id="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></script>