The following information is a basic example of the steps required to integrate Arena into your website. The code examples are given in html and javascript for simplicity. We would anticipate that when integrating this widget into your own site that you would follow good software design principles like OOP, YAGNI, etc and write functionality in a manner suited to your chosen framework.
Steps to Integration#
2.
Place the elements on your page
3.
Set up an event to listen for messages
We've got a strict CORS policy. Contact your account manager with the domain/s you'll be embedding this application on for access.
Obtain a valid JWT#
For information on how to obtain a valid JWT, please refer to the Ingresso F13 Documentation.Please note that you do not need to have a JWT for each user to your site and that a single token will last 24 hours. Therefore, for efficiency we would recommend making the authentication call once and using the token across all users of your site until it expires. Once a token expires you can then make a new authentication call and store the new token.Place the elements on your page#
The igo-arena element will contain the Arena component. It is recommended that you add classes or styling to this element to give it the biggest possible height and width in the context of your site, and it is recommended on mobile that this is the majority of the screen width/height (if not all).Set up an event to listen for messages#
Communication between the Arena component and the parent site happens by attaching event listeners to the created object, named app in the example. The above example provided logs to the console window the messages received from all events. For specific events to attach handlers to please see the Customisation Options.The create method configuration options are as follows:apiAuthToken: the JWT token created within 24 hours of the page being displayed.eventId: the unique ID of the event.perfId: this is the unique ID of the specific performance you are booking tickets for.tyrBase (optional): default https://charts.ticketswitch.io. If you wish to set the maps to load from the development environment instead of the production environment, include this in your configuration object with a value of https://charts-dev.ticketswitch.io. Please note that tyrBase will be filtered out in future versions.options (optional): This should be a selection of configuration options, full list available on the Customisation Options page.Further Configuration options#
In addition to all the message/event types transmitted by the Arena component, you can find a more comprehensive list of these in the Customisation Options.