Components
  1. Arena
Components
  • Components
    • Components Overview
    • Arena
      • Arena Overview
      • Arena Management
      • Seat Selection
      • Seat Reviews
      • Website Integration
      • Customisation Options
      • Designing Maps
        • Arena Designer
        • Keyboard Controls
    • Fixture List
      • Getting started
      • Configuration
      • Generating a JWT
      • Listening to Events
      • Internationalisation
      • Theming
    • F13 JWT Example
      POST
  1. Arena

Customisation Options

Screenshot 2025-04-17 at 12.58.39.png
There are various options for customising the Arena widget, along with events/messages that the can be used to communicate with the component as a part of your website. We intend to maintain a list of these events and options below.
INFO
Please note: if the configuration option or messaging event is not available in the sections below please reach out to the development team. We can modify the system to suite most needs.

Configuration Options (IArenaConfigOptions)#

** Still in development - more options to come**
A partial (or full) IArenaConfigOptions object can be passed in the initialisation of the Arena Widget, an example of which is below:
try {
	await IngressoArena.create({
		apiAuthToken: 'JWT.TOKEN.HERE',
		apiBase: 'https://dogbex.ingresso.co.uk/f13',
		eventId: '7AB',
		perfId: '7AB-D',
		tyrBase: 'https://charts-dev.ticketswitch.io',
		options: {
			controls: {
                            position: 'none',
                        },
		},
	});
} catch {
	// noop
}

Events/Messages#

The only way to communicate with the component is by listening to events. Use the on method to start listening to events.
An example of this is below:
You can stop listening to events using the off method

Types of events#

EventArgumentsDescription
init{id: string; }The app initialised
event-load-success{id: string; }The request loaded successfully
event-load-fail{id: string; }The request failed
seatmap-load-success{id: string; }The request loaded successfully
seatmap-load-fail{id: string; }The request failed
performance-load-success{id: string; }The request loaded successfully
performance-load-fail{id: string; }The request failed
availability-load-success{id: string; }The request loaded successfully
availability-load-fail{id: string; }The request failed
send-methods-load-success{id: string; }The request loaded successfully
send-methods-load-fail{id: string; }The request failed
trolley-load-success{id: string; trolleyToken: string; }The request loaded successfully
trolley-load-fail{id: string; }The request failed
seat-selection{currency: ICurrency, legend: ISeatAvailabilityLegend[], selectedSeats: ISeatData[] or INonSeatData[] }The customer has changed their seat selection

Useful data types#

Modified at 2025-04-17 12:11:07
Previous
Website Integration
Next
Arena Designer
Built with