Objective:
Through this functionality, users can create their own Widget to embed in web sites in order to access KIBE (KIU INTERNET BOOKING ENGINE) functionalities.
This document explains how to configure the widget and also shows some examples for developers.
Concepts
What is a Widget?
It is a form on HTML with .CSS that could be embedded into an iframe on the client´s web page or other sites.
Does KIU offer a Widget?
Yes. KIU provides a standard Widget when creating the KIBE, but it is not adjustable to the customer´s web site.
Is the custom Widget based on the KIBE general configuration?
The Widget is indeed based on the configuration and content of the site in order to accomplish the operating and commercial requirements of the client. All this information resides on the KIBE Backoffice and should be completely configurated once the Widget is created. Within this document, you will see many examples of how to connect your custom Widget with the KIBE.
How to get KIBE content to build a Widget
When a user creates a form in order to build a widget for KIBE, there are some mandatory fields that it should have in order to send the minimal information to make it work and get content.
To get that content and the information required for the KIBE application to work, developers have to add the next Script into the head tag of the form.
<script>
$(document).ready(function(){
$.ajax({
url: "[KIBE URL domain]/api/get_complete_config_widget/",
success: function(response){ formatResponse(response);},
dataType: "jsonp"
});
//Example on how to consume the data
function formatResponse(response){
$("#csrfmiddlewaretoken").val(response.csrf_token);
$.each(response.airports.keys.origin, function(i,e){
$("#id_origin").append("<option value='"+ e.data +"'>"+ e.value +"</option>")
})
$.each(response.airports.keys.destination, function(i,e){
$("#id_destination").append("<option value='"+ e.data +"'>"+ e.value +"</option>")
})
}
});
</script>
URL: The KIBE domain has to be declared (This data is provided by KIU once KIBE is created), followed by the parameters /api/get_complete_config_widget/ (Eg: https://kibe-dev-xx.kiusys.net/api/get_complete_config_widget/).
This URL will return the next JSON API:
{
"passengers": {
"max_pax_allowed": 9,
"pax_config": [
{
"max_age": null,
"enable": true,
"name": "ADULT",
"min_age": 12
},
{
"max_age": 12,
"enable": true,
"name": "CHILD",
"min_age": 2
},
{
"max_age": 2,
"enable": true,
"name": "INFANT",
"min_age": 0
}
]
},
"csrf_token": "vgTgLRd6L1XKeeJdWdMSPDOhyUURzF02XJUl0CarwNc3ABHAQeWdMkmgi93QMVOI",
"airports": {
"keys": {
"origin": [
{
"code": "AEP",
"data": "QUVQ",
"value": "BUENOS AIRES (BUE), JORGE NEWBERY AIRPORT (AEP), Argentina"
}
],
"destination": [
{
"code": "MDQ",
"data": "TURR",
"value": "MAR DEL PLATA (MDQ), ASTOR PIAZZOLA AIRPORT - MERY (MDQ), Argentina"
},
{
"code": "LAS",
"data": "TEFT",
"value": "LAS VEGAS (LAS), MCCARRAN INTERNATIONAL AIRPORT (LAS), United States"
}
]
}
},
"origin_destination": {
"keys": [
{
"origin": "AEP",
"destination": "MDQ",
"not_flying_days_return": [],
"not_flying_days_going": [],
"frequency_return": [
0,
1,
2,
3,
4,
5,
6
],
"frequency_going": [
0,
1,
2,
3,
4,
5,
6
],
"direct_fly": false
}
]
}
}
Response Dictionary:
| Key | Description | Values / Format |
|---|---|---|
| Passengers | Supported passenger types and maximum quantity allowed. | Object |
| max_pax_allowed | Maximum quantity of passengers allowed. | Integer |
| pax_config | Supported passenger types (ADULT, CHILD and INFANT). | Object |
| max_age | Maximum age allowed per passenger category. It is inside the pax_config node. | Integer / null |
| enable | This is a toggle that indicates if a category is enabled or disabled. It is inside pax_config node. | true / false |
| name | This is the name of the passenger category. It is inside pax_config. | ADULT / CHILD / INFANT |
| min_age | The minimum age allowed for each category. It is inside the pax_config pax_config node. | Integer |
| csrf_token | This is a hash for validation purposes that must be included in the form submit. | HASH |
| airports | It is an object that contains the information of valid airports set for customer. This information is offered for validation purposes of the form at client level (Front-end validation). | Object |
| keys | Object. List of origins-destinations set on Backoffice as allowed routes. This key is inside the object airport. It represents which origin to which destination is allowed to request content. | Object |
| origin | List of enabled origin airports only. This field is inside Keys node. | Array |
| code | ISO IATA airport code for origin field. This key is inside the Origin node. | 3 Alphabetical chars |
| data | This is for internal KIBE purposes only. | 4 Alphabetical chars |
| value | Description associated to the airport code. This key is inside the Origin node. | Alphabetical |
| destination | List of enabled destination airports only. This field is inside Keys node. | Object |
| code | ISO IATA airport code for destination field. This key is inside the Destination node. | 3 Alphabetical chars |
| data | This is for internal KIBE purposes only. | 4 Alphabetical chars |
| value | Description associated to the airport code. This key is inside the Destination node. | Alphabetical |
| origin_destination | List of enabled commercial routes set in the KIBE Backoffice. | Object |
| keys | List of objects that contains the offered pair of airports enabled. This key is inside the origin_destination node. | Array |
| origin | ISO IATA origin airport code. It is inside the Keys node. | 3 Alphabetical chars |
| destination | ISO IATA destination airport code. It is inside the Keys node. | 3 Alphabetical chars |
| not_flying_days_return | List of week days for return flights not enabled to operate. It is inside the Keys node. | 0 to 6 (0: Monday; 1: Tuesday, etc.) |
| not_flying_days_going | List of week days for origin flights not enabled to operate. It is inside the Keys node. | 0 to 6 (0: Monday; 1: Tuesday, etc.) |
| frequency_return | List of week days for return flight enabled to operate. It is inside the Keys node. | 0 to 6 (0: Monday; 1: Tuesday, etc.) |
| frequency_going | List of week days for origin flights enabled to operate. It is inside the Keys node. | 0 to 6 (0: Monday; 1: Tuesday, etc.) |
| direct_fly | Toggle that display if the flight is direct or allows connections. | true / false |
Developers based on this response now have data enough to build display content on Widget field like origin-destination and make the validations of routes enabled to search, types of passengers and quantity of passengers enabled to search and type of trips (One Way and Round Trip flights).
Search Flights:
When processing the form and redirecting to KIBE, inside the Form tag, in the Action attribute, the destination URL must be the KIBE domain, and the Method tag needs to be POST.
Example:
<form class="searcher" id="search-form" name="searchWidgetForm" action="https://kibe-dev-xx.kiusys.net/" method="POST">
When user clicks on the submit button, KIBE will gather all the parameters (Origin, Destination, DepartureDate, ReturnDate - If it exists - , Adult quantity, Child quantity, Infant quantity) and then it will process the request and display the results into the environment of KIBE page in order to complete the booking flow normally.