Seat Map SDK
Overview
The Distribusion Seat Map JS SDK simplifies the integration of seat selection for API retailers. Instead of handling API calls and rendering seat maps themselves, retailers can simply add the SDK to their website. The SDK will:
- Fetch and display the seat map based on the provided trip details.
- Allow the end customer to select a seat.
- Return the selected seat(s) to the retailer for inclusion in the final reservations API call.
Installation
To integrate the SDK, include it in your website:
<script
src="https://cdn.distribusion.com/seatmap-sdk.js"></script>Initialization
To initialize the SDK, call DistribusionSeatMap.init() with the required parameters:
DistribusionSeatMap.init({ marketingCarrier: 'UTIL',
departureStation: 'BRBHZBHB',
arrivalStation: 'BRLZSRDJ',
departureTime: '2024-09-19T07:00',
arrivalTime: '2024-09-19T14:30',
containerId: 'seatmap-container',
onSelectionConfirmed: function(selectedSeats) {
console.log('Selected seats:', selectedSeats);
// Pass selectedSeats to your booking API call
}
});
API request
The SDK internally calls the following API to retrieve seat map data:
curl --location 'https://api.demo.distribusion.com/retailers/v4/connections/seats?marketing_carrier=UTIL&departure_station=BRBHZBHB&arrival_station=BRLZSRDJ&departure_time=2024-09-19T07%3A00&arrival_time=2024-09-19T14%3A30'
Parameters
Parameter | Type | Description |
|---|---|---|
marketingCarrier | String | The carrier operating the transport |
departureStation | String | The station code for departure |
arrivalStation | String | The station code for arrival |
departureTime | String | Scheduled departure time (ISO 8601) |
arrivalTime | String | Scheduled arrival time (ISO 8601) |
Response to Retailer
Once the customer selects and confirms their seat(s), the SDK triggers the onSelectionConfirmed callback with the selected seat(s) in the following format:
{
"selectedSeats": [
"12A",
"12B"
]
}
The retailer should include these seat selections in their booking API request.
Example Integration
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.distribusion.com/seatmap-sdk.js"></script>
</head>
<body>
<div id="seatmap-container"></div>
<script>
DistribusionSeatMap.init({
marketingCarrier: 'UTIL',
departureStation: 'BRBHZBHB',
arrivalStation: 'BRLZSRDJ',
departureTime: '2024-09-19T07:00',
arrivalTime: '2024-09-19T14:30',
containerId: 'seatmap-container',
onSelectionConfirmed: function(selectedSeats) {
console.log('Seats selected:', selectedSeats);
// Send these seats to the booking API
}
});
</script>
</body>
</html>Conclusion
The Distribusion Seat Map JS SDK offers a seamless solution for retailers to integrate seat selection without handling complex API requests. By adding a simple script and configuring minimal parameters, retailers can enhance the booking experience for their customers efficiently.
On this page
- Seat Map SDK