Developer portal

Embedded Seating Plans

How to use our seating plans

The functionality enables our API clients to use our seating plans (very similar to what we use on our website) for tickets selection while in the middle of booking process through our API

Components

ltd-legend

Legend wrapper element. Ticket prices are displayed here.

<div class="ltd-legend"></div>

ltd-seatplan

Seat Plan wrapper element. The whole seat plan is generated inside this element.

<div class="ltd-seatplan"></div>

ltd-seatplan__preloader (optional)

Preloader element. Automatically appears during initialization process. Can be omitted.

<p class="ltd-seatplan__preloader">Preparing Seat Plan...</p>

ltd-basket (optional)

Basket handler component. Provides basic functionalities as display selected tickets or self-updating submit button.

<div class="ltd-basket" display-tickets display-submit submit-class="ltd-button ltd-button--success"></div>

Attributes

All attributes are optional

Name Description
display-tickets Generate selected tickets into this element
display-submit Display submit button inside this element
submit-class Add custom class to the submit button

Initialization

In order to ensure the compatibility with older browsers, we recommend using ES6 polyfills.
Place the following element at the bottom of head section.

<script src="https://finale-cdn.uk/latest/polyfill.js" nomodule></script>

To initialize the Seat Plan, place following code anywhere below the Seat Plan component(s). (Recommended placement is at the bottom of document’s body section)

<script src="https://finale-cdn.uk/latest/seat-plan.js"></script>
<script>
    (function (LTD) {
        LTD.SeatPlan.init({
            clientId: 'your-client-id',
            performanceId: 'performance-id',
        });
    }(window.LTD));
</script>

Initialization properties

Name Type Description Required Default value
clientId string Your client ID (please contact your Sales manager) true
performanceId string ID of desired performance true
displayFacePrice boolean Display face price on popups false false
filterPriceBands boolean Adds filtering seats by price bands functionality to the ltd-legend component false true
limitSelectedSeats number Limits the seats count that can be selected at once false false
margin number Space to be generated around the whole Seat Plan false 0
sandbox boolean If set to true the Seat Plan uses Sandbox availability (for testing purposes). false false
event SeatPlanEventConfigObject Configuration of touch & mouse events false
locale string Valid IETF Language Tag false en
i18n I18nConfigObject Configure Seating Plan's localization false
behavior SeatPlanBehaviorConfigObject Change default behavior of several Seating Plan's functions false
SeatPlanEventConfigObject
Name Type Description Default value
doubletapZoom boolean Zoom in on double-tap event true
scrollZoom boolean Use scroll event to zoom the Seat Plan false
scrollMove boolean Use scroll event to move the Seat Plan false
SeatPlanBehaviorConfigObject
Name Type Description Interface
convertPriceValue function Function to mutate any price value. (input: number): number
formatPrice function Price formatter function. Here you can completely redefine display output of price value. (num: number): string

I18nConfigObject

{
    "faceValueShort": "FV",
    "noFee": "NO BOOKING FEE!",
    "save": "SAVE",
    "descPrefix": "This is a message from the theatre",
    "legend": {
        "all": "All",
        "noFees": "No Fees",
        "offer": "Offer",
    },
    "basket": {
        "addSingle": "Add %d seat to basket",
        "addMultiple": "Add %d seats to basket",
        "addGrand": "Add %d seats to basket",
        "addGrandBreakpoint": 0,
        "add": "Add to basket",
    },
}

Events

Seat Plan can provide communication with your handlers via event handlers bound to following events. Each CustomEvent object can carry additional data bound to the detail property.

Name Description
LTD.SeatPlan.OnAvailabilityFinished Fired when availability data fetch has finished
LTD.SeatPlan.OnAvailabilityStarted Fired when availability data fetch has started
LTD.SeatPlan.OnDrawFinished Fired when Seat Plan rendering has finished
LTD.SeatPlan.OnDrawStarted Fired when Seat Plan rendering has started
LTD.SeatPlan.OnError Fired when any Seat Plan error occurs
LTD.SeatPlan.OnPendingFinished Fired when any data fetch has finished
LTD.SeatPlan.OnPendingStarted Fired when any data fetch has started
LTD.SeatPlan.OnReady Fired when the Seat Plan is ready to interact
LTD.SeatPlan.OnResourcesFetched Fired when all data fetch during initialization has finished
LTD.SeatPlan.OnSeatLimitExceeded Fired when selected seat limit has exceeded
LTD.SeatPlan.OnSeatSelected Fired when a seat was selected
LTD.SeatPlan.OnSeatUnselected Fired when a seat was unselected
LTD.SeatPlan.OnValidateFinished Fired when seat validation has finished
LTD.SeatPlan.OnValidateStarted Fired when seat validation has started
LTD.Basket.OnSubmit Fired on click to basket submit button 
document.addEventListener('LTD.SeatPlan.OnSeatSelected', e => {
    console.log(e.detail)
    /* Output
    *  {
    *      seat: { ... },
    *      selection: [ { ... } ]
    *  }
    */
});

Mobile devices

To fully support mobile devices' capabilities, it is necessary the Seating Plan to have fixed position on touch devices. For this purpose the Seating Plan on mobile devices automaticaly gets class .ltd-seatplan--mobile which sets the position property on the element to fixed value. You can safely adjust it's rules to fit your needs as described in the example:

<style>
    .ltd-seatplan.ltd-seatplan--mobile {
        top: 6rem;
    }
</style>

Keep in mind, that the page layout should be adjusted to cooperate with Seating Plan's fixed positioning on mobile devices.

Full Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- ES6 Polyfills (optional, recommended) -->
        <script src="https://finale-cdn.uk/latest/polyfill.js" nomodule></script>

        <style>
            .ltd-seatplan.ltd-seatplan--mobile {
                top: 6rem;
            }
        </style>
    </head>
    <body>
        <!-- Basket submit container (optional) -->
        <div class="ltd-basket" display-tickets display-submit submit-class="ltd-button ltd-button--success"></div>

        <!-- Main SeatPlan elements -->
        <div class="ltd-legend"></div>
        <div class="ltd-seatplan"></div>

        <!-- Preloader element (optional) -->
        <p class="ltd-seatplan__preloader">Preparing Seat Plan...</p>

        <!-- Main script file -->
        <script src="https://finale-cdn.uk/latest/seat-plan.js"></script>

        <!-- Initialization script -->
        <script>
            (function (LTD) {
                LTD.SeatPlan.init({
                    clientId: 'your-client-id',
                    performanceId: 'performance-id',
                    event: {
                        scrollMove: true
                    }
                });
            }(window.LTD));
        </script>
    </body>
</html>