Seat Selector

The seat selector provides convenience wrappers to render a seat map in the browser. You can modify the behaviour and subscribe to certain callbacks to react to certain events e.g. a user selecting a seat in the map.

Initialize

Required attributes

  • Name
    holder
    Type
    string
    Description

    The id of the element to hold the map

  • Name
    baseUrl
    Type
    enum(https://seatmap.vivenu.com, https://seatmap.vivenu.dev)
    Description

    The baseUrl of the seating backend service

  • Name
    eventId
    Type
    string
    Description

    The ID of the seating event which holds the state.

Optional attributes

  • Name
    childEventIds
    Type
    array<string>
    Description

    An array of IDs of the seating events that belongs to the seating event. Important for season events

  • Name
    callbacks
    Type
    object
    Description

    The callbacks are described in the [callbacks](#callbacks) section

  • Name
    language
    Type
    string
    Description

    The display language of the seatmap

  • Name
    theme
    Type
    enum(light, dark)
    Description

    The color theme to be used to display the map

  • Name
    options
    Type
    object
    Description

    The options are described in the [options](#options) section

Example

{
  "holder": "string",
  "baseUrl": "https://seatmap.vivenu.com",
  "eventId": "507f191e810c19729de860ea",
  "childEventIds": [
    "string"
  ],
  "callbacks": {},
  "language": "string",
  "theme": "light",
  "options": {}
}

Options

Required attributes

  • Name
    categories
    Type
    array<object>
    Description

    A configuration about categories for this event

    Required nested attributes (3)
    • Name
      ref
      Type
      string
      Description

      The reference of the category. This ref is used to map ticketTypes to categories

    • Name
      seatingReference
      Type
      string
      Description

      This reference is used to map a category to a defined category in the seat map

    • Name
      v
      Type
      integer
      Description

      The remaining sale volume for this category

  • Name
    ticketTypes
    Type
    array<object>
    Description

    A configuration about ticket types for this event

    Required nested attributes (4)
    • Name
      categoryRef
      Type
      string
      Description

      The reference of the category this ticket type belongs to

    • Name
      active
      Type
      boolean
      Description

      Whether the ticket type is active and can be purchased

    • Name
      price
      Type
      number
      Description

      The price of this particular ticket type

    • Name
      v
      Type
      integer
      Description

      The remaining sale volume for this category

    Optional nested attributes (1)
    • Name
      ignoredForStartingPrice
      Type
      boolean
      Description

      Whether this ticket type should be ignored for starting price of a seat

Optional attributes

  • Name
    orphan
    Type
    object
    Description
    Optional nested attributes (2)
    • Name
      minSeatDistance
      Type
      integer
      Description

      The minimum number of free seats that should be left in order to avoid orphan seats

    • Name
      edgeSeatsOrphaning
      Type
      boolean
      Description

      Select if orphan seats at aisles should also be avoided.

  • Name
    theme
    Type
    enum(light, dark)
    Description

    The color theme to be used to display the map

  • Name
    contingents
    Type
    array<string>
    Description

    An array of contingents IDs to be available

  • Name
    allowSelectionOfUnavailableObjects
    Type
    boolean
    Description

    Whether unavailable objects can be selected

  • Name
    highlightSeatsBlockedByContingent
    Type
    boolean
    Description

    Whether seats that are blocked by a contingent should be highlighted different

  • Name
    currency
    Type
    enum(EUR, USD, GBP, AUD, CHF, THB, ILS, COP, MXN, DKK, NOK, SEK, QAR, SAR)
    Description

    An ISO 4217 3-character code of the currency

  • Name
    visibleLayers
    Type
    array<string>
    Description

    Array of Layer IDs, which are always displayed, ignoring their hidden layer state. Layer Id 'all' means 'all layers shown'

  • Name
    preloadedMap
    Type
    object
    Description

    Map object to be used. Useful if you want to preload the map before the user access the selector

  • Name
    tooltip
    Type
    object
    Description
    Optional nested attributes (3)
    • Name
      enabled
      Type
      boolean
      Description

      Whether tooltips are enabled

    • Name
      showPrice
      Type
      boolean
      Description

      Whether prices are shown in the tooltip

    • Name
      includeViewFromSeat
      Type
      boolean
      Description

      Whether the view from seat image is shown in the tooltip

Example

{
  "categories": [
    {
      "ref": "68355747-b7c0-4bc4-89c6-38af352e6de1",
      "seatingReference": "6082a1ed75a4b008a1ad4659",
      "v": 200
    }
  ],
  "ticketTypes": [
    {
      "categoryRef": "68355747-b7c0-4bc4-89c6-38af352e6de1",
      "active": true,
      "price": 54.99,
      "v": 200,
      "ignoredForStartingPrice": true
    }
  ],
  "orphan": {
    "minSeatDistance": 1,
    "edgeSeatsOrphaning": false
  },
  "theme": "light",
  "contingents": [],
  "allowSelectionOfUnavailableObjects": false,
  "highlightSeatsBlockedByContingent": false,
  "currency": "EUR",
  "visibleLayers": [
    "layerid1",
    "layerid2"
  ],
  "preloadedMap": {},
  "tooltip": {
    "enabled": true,
    "showPrice": true,
    "includeViewFromSeat": true
  }
}

Seat Object

Required attributes

  • Name
    _id
    Type
    string
    Description

    The id of the seat. This id is used in the callbacks

  • Name
    _type
    Type
    enum(6)
    Description

    Is used to determine the type of the object.

  • Name
    categoryId
    Type
    string
    Description

    The Id of the seating category

  • Name
    groupName
    Type
    string
    Description

    The name of the row group where the seat is located

  • Name
    rowName
    Type
    string
    Description

    The name of the row where the seat is located

  • Name
    seatName
    Type
    string
    Description

    The seat name

  • Name
    statusId
    Type
    string
    Description

    An Id that holds the status of the seat. This id is used to reserve/book/free the seat

Optional attributes

  • Name
    sectionName
    Type
    string
    Description

    The name of the section where the seat is located

  • Name
    gate
    Type
    string
    Description

    The name of the gate to enter the venue

  • Name
    seatType
    Type
    enum(handicapped, limitedView, foldable)
    Description

    Whether the seat has a special type

  • Name
    meta
    Type
    object
    Description

    A Key-Value object with meta information about the object. Those information are user defined

Example

{
  "_id": "507f191e810c19729de860ea",
  "_type": 6,
  "categoryId": "507f191e810c19729de860ea",
  "groupName": "G",
  "rowName": "10",
  "seatName": "55",
  "statusId": "5e7aa965-27b7-4f44-97bd-f4eb62b15243",
  "sectionName": "S",
  "gate": "G-10",
  "seatType": null,
  "meta": {
    "key_1": "value_1",
    "key_2": "value_2"
  }
}

General Admission Object

Required attributes

  • Name
    _id
    Type
    string
    Description

    The id of the seat. This id is used in the callbacks

  • Name
    _type
    Type
    enum(7)
    Description

    Is used to determine the type of the object.

  • Name
    categoryId
    Type
    string
    Description

    The Id of the seating category

  • Name
    statusId
    Type
    string
    Description

    An Id that holds the status of the general admission. This id is used to reserve/book/free seats inside the GA

  • Name
    name
    Type
    string
    Description

    The name for the general admission

Optional attributes

  • Name
    gate
    Type
    string
    Description

    The name of the gate to enter the venue

  • Name
    meta
    Type
    object
    Description

    A Key-Value object with meta information about the object. Those information are user defined

Example

{
  "_id": "507f191e810c19729de860ea",
  "_type": 7,
  "categoryId": "507f191e810c19729de860ea",
  "statusId": "f451e2a4-05a3-43e5-82c2-da5c6c9ecf3b",
  "name": "Standing Block A",
  "gate": "G-10",
  "meta": {
    "key_1": "value_1",
    "key_2": "value_2"
  }
}

Callbacks

EventTrigger
onObjectSelectedWhen an object gets selected. An object is either a Seat or a GeneralAdmission
onObjectDeselectedWhen a Seat gets deselected. This event does not apply to GeneralAdmission
onSelectionValidWhen a selection get validated and is valid
onSelectionInvalidWhen a selection get validated and is invalid. Example for an invalid selection is when the selected seats do not satisfy orphanage constraints
onLoadDoneWhen the initial loading of the Seatmap is done

onObjectSelected

This event occurs when an object gets selected. An object can be of type Seat and of type GeneralAdmission.

/**
* This event occurs when an object gets selected.
* @param {string} type - The type of the event. "onObjectSelected"
* @param {string} id - The id of the object which got selected
* @param {SeatInfo|GeneralAdmissionInfo} - resource The resource
*/
const onObjectSelected = (type, id, resource) => {
    console.log(id);
    console.log(resource);
}

onObjectDeselected

This event occurs when an Seat gets deselected.

Caution: This event does not apply to GeneralAdmission. General admission can only be deselected through the setSelectedObjects method.

/**
* This event occurs when an object gets selected.
* @param {string} type - The type of the event. "onObjectDeselected"
* @param {string} id - The id of the object which got selected
* @param {SeatInfo} resource - The resource
*/
const onObjectDeselected = (type, id, resource) => {
    console.log(id);
    console.log(resource);
}

onSelectionInvalid

When a selection get validated and is invalid. Example for an invalid selection is when the selected seats do not satisfy orphanage constraints

interface Violations {
    orphans?: SeatInfo[];
}
/**
  * The event occurs when a selection get validated and is invalid
  * @param {string} type - The type of the event. "onSelectionInvalid"
  * @param {Violations} violations - An object containing information about invalid selection
  */
const onSelectionInvalid = (type, violations) => {
    console.log(violations);
    if (violations.orphans) {
        console.log("There are orphans in your current selection");
        console.log(violations.orphans);
    }
}

Set selected objects

You can update the selection of the user with calling the function selectObjectsInSeatSelector on the VIInit instance.

Notice: You need to call this function in order to get a general admission deselected.

/**
  * Set the objects of the user selection
  * @param {Array<string>} ids - An array of Object-IDs to be selected
  */
selectObjectsInSeatSelector(ids: string[]): void;

Set categories

You can update the configuration of the category and their availabilities with calling the function setCategories on the VIInit instance.

Notice: Please make sure that you call this function after initialization is done.

/**
  * Set the category configuration
  * @param {Array<SeatMapCategory>} categories - An array of categories
  */
setCategories(categories: SeatMapCategories[]): void;

Get best available seats

Through this function you can get the best available seats on the map. This function takes key-value pairs as parameters, where the key is the categoryRef and the value is the requested amount of seats in this category. The function returns key-value pairs, where the key is the categoryRef and the value is array of SeatInfoResource.

Notice: Best available seats are calculated by the distance to the focal point. If a focal point does not exist on the map then the center of the map is considered as the focal point.

interface BestAvailableSeatsParams {
    [categoryRef: string]: number
}

interface BestAvailableSeatsResponse {
    [categoryRef: string]: SeatInfoResource[]
}
/**
  * Get best available seats
  * @param {BestAvailableSeatsParams}
  */
getBestAvailableSeats(params: BestAvailableSeatsParams): Promise<BestAvailableSeatsResponse>;

Get view from seat

Through this function you can get the closest viewpoint to a seat. This function takes the seat id as a parameter. The function returns the closest viewpoint to the seat, if the seatmap has atleast one viewpoint placed on the seats layer. Otherwise it returns undefined.

interface ViewPoint {
  _id: string
  _type: number
  imageType: ImageType
  image: string
}
/**
  * Get view from seat
    * @param {string} seatId - The id of the seat
  */
getViewFromSeat(seatId: string): Promise<ViewPoint | undefined>;

Unmount

You can unmount the seat selector instance. Useful if you're hosting a single page application.
Will remove any seating frames inside holder and close any open socket connections.

/**
* Unmount the seat selector instance.
*/
unmount(): Promise<void>;

Was this page helpful?