Seatmap documentation

Inserting the iframe

  <iframe
    src="seatmapURL"
    ref="scheduleId"
    data-schedule-id="scheduleId">
  </iframe>

attribute ref is used to select the iFrame from the client code.

attribute data-schedule-id is used internally by the seatmap code.

Seatmap URL:

Must have the following structure:

https://{{domain}}.betterez.com/operations/selectable-seatmaps/{{seatMapId}}?routeId={{routeId}}&scheduleId={{scheduleId}}&isBackoffice={{isBackoffice}}&date={{date}}&legFrom={{legFromIndex}}&legTo={{legToIndex}}&
originId={{originId}}&destinationId={{destinationId}}&providerId={{providerId}}&x-api-key={{x-api-key}}

base URL

https://{{domain}}.betterez.com/operations/selectable-seatmaps/

path params

seatMapId (String) (The Id of the seatmap)

query params

routeId (String) The Id of the route

scheduleId (String) The Id of the schedule

date (String with format YYYY-MM-DD) Date of travel for this trip, may be different than the journey if this is a connecting trip that started the previous day on another schedule

isBackoffice (Boolean) Should be false

legFrom (Number) The index in the schedule for the departing station. This index can be found in trip information. Each trip has segments, more than one if it is a connection trip for example, and for each segment in the trip you can find the 'legFrom' field

legTo (Number) The index in the schedule for the arrival station. This index can be found in trip information. Each trip has segments, more than one if it is a connection trip for example, and for each segment in the trip you can find the 'legTo' field

originId (String) The id of the departing station

destinationId (String) The id of the arrival station

providerId (String) The ID of the provider account

x-api-key (String) Identify a partner of the provider or the provider itself

ttlSec (Number) Optional. The expiration time in seconds of a selected seat

Methods/functions needed in client side

All this function must be assigned to the window object of the parent page for the iFrame.

Accessing the seatmap from the client code.

It's a one liner using the ref of the iFrame

Iframe and client in same domain:

  this.$refs[scheduleId].contentWindow;

seatmapReady()

The seatmap in the iframe will call this function and block until this function returns. (Once the function returns the seatmap will be "ready to use").

  window.seatmapReady = function () {
    // do something to interact with the seatmap or nothing
    // This function can be a no-op but it needs to be here
  }

You can use this function to prepare the UI of the client or the seatmap in any way you want. Ex: if you are navigating to the seatmap page to "edit" seats already selected by the customer, you should use this function to interact with the seatmap and pre-select the seats for the customer.

For iframe and client in different domain see this section

addSeatToSelectionNew(seatLocationObject, iFrameInformationObject)

The seatmap will call this function when a customer clicks on a seat inside the seatmap.

You need to use this function to "actually" select the seat in the seatmap.

You should check for example if all seats have been assigned already to all customers or any other business restriction that you want to perform.

The seat at this point is not "selected" in the seatmap itself, until the following code is executed.

For iframe and client in same domain do:

  const seatmap = this.$refs[scheduleId].contentWindow;
  seatmap.selectSeat(seatId);

For iframe and client in different domain do:

  const seatmap = document.getElementsByTagName("iframe")[0].contentWindow; // you can use document.getElementById if you add an id to the iframe
  seatmap.postMessage({eventName: "selectedSeatFromOtherDomain", seatId: seatLocationObject.seatId}, "*");

You should also "remember" the seat selection or capture the seat-selection in the client context to send to the API to complete a booking.

With the params recieved by the listener:

Iframe and client in same domain:

  window.addSeatToSelectionNew = function (seatLocationObject, iFrameInformationObject) {
    const seatmap = this.$refs[scheduleId].contentWindow;
    seatmap.selectSeat(seatLocationObject.seatId);
    // save the seatLocationObject and iFrameInformationObject in the client context
  }

Iframe and client in different domain:

  window.addSeatToSelectionNew = function (seatLocationObject, iFrameInformationObject) {
    const seatmap = document.getElementsByTagName("iframe")[0].contentWindow; // you can use document.getElementById if you add an id to the iframe
    seatmap.postMessage({eventName: "selectedSeatFromOtherDomain", seatId: seatLocationObject.seatId}, "*");
    // save the seatLocationObject and iFrameInformationObject in the client context
  }

In this case, you should then follow the steps of this section

Parameters:

seatLocationObject

  {
    seatId // string with the _id of the seat ex: section-5c13c12d062bb938026c3161-row-1-seat-0
    sectionId // string with the section _id ex: 5c13c12d062bb938026c3161
    rowLabel // string with the name of the row ex: "A"
    seatNumber // string with the number of the seat ex: "6"
    sectionName // string with the section name ex: "Left"
    fee // string with the configured fee Id
  }

iFrameInformationObject

  {
    scheduleId // The id of the schedule, this is particularly useful in the case there are more than one seatmap embedded in the same screen.
  }

To unselect seats, you will need to call the seatmap function unSelectSeat with only one parameter, the seatId. You could do this, with a function like this:

####Iframe and client in same domain:

function unSelectSeat(scheduleId, seatId) {
  const seatmap = this.$refs[scheduleId].contentWindow;
  seatmap.unSelectSeat(seatId);
  // your code to handle this event in your own environment
}

####Iframe and client in different domain:

function unSelectSeat(seatId) {
  const seatmap = document.getElementsByTagName("iframe")[0].contentWindow; // you can use document.getElementById if you add an id to the iframe
  seatmap.postMessage({eventName: "unSelectSeatFromOtherDomain", seatId}, "*");
  // your code to handle this event in your own environment
}

For iframe and client in different domain see this section

The scheduleId and seatId is something that is already leaving in the client context (you got this information before inside the addSeatToSelectionNew function)

Using the iframe on a different domain

In order to communicate between client and iframe from different domains the client needs to add the code that will be listening the iframe events, which are two: addSeatToSelectionNew and seatmapReady.

This can be acomplished like this:

 window.addEventListener("message", function(event) {
  if(event.data.eventName === "addSeatToSelectionNew") {
    // See (1) below
      const {seatLocationObject, iFrameInformationObject} = event.data;
      window.addSeatToSelectionNew(seatLocationObject, iFrameInformationObject);
  }

  if(event.data.eventName === "seatmapReady") {
    // See (2) below
      window.seatmapReady();
  }

  if(event.data.eventName === "expiredSeats") {
    // do whetever you want using event.data.expired array
  }
 }, false);

(1) Here the client should call the function window.addSeatToSelectionNew that was created in section addSeatToSelectionNew

(2) Here the client should call the function window.seatmapReady that was created in section seatmapReady