postMessage API¶
Listening to events¶
If you need to respond to interactions within the FIXR checkout 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.