| Table of Contents |
|---|
Objective:
Thru this functionality users can create their own widget to embebed in web sites to access KIBE (KIU INTERNET BOOKING ENGINE) functionalities.
This document will explain how to configure and show some examples for developers
Concepts
What is a Widget?
- it is a form on HTML with .CSS that could be embebed into an iframe on the client´s web page or other sites.
Does KIU offer a widget?
- Yes, KIU when create the KIBE for clients, supply a standard widget, but maybe this not adjust to the website customer requirements and decide to create one.
Does the custom widget takes the general configuration of the KIBE?
- The widget MUST take the configuration and content of the site in order to be accomplish with the operating and commercial intends of the client. All this information reside on the KIBE backoffice that should be completely configurated at time of widget´s creation. During 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 create a form in order to build a widget for KIBE, there are some mandatory fields that should had 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, the developers have to add the next Script into the head tag of the form.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script>
$(document).ready(function(){
$.ajax({
url: "[KIBE URL domain]/api/get_complete_config_widget/",
success: function(response){ formatResponse(response);},
dataType: "jsonp"
});
//Ejemplo sobre como consumir la 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: It has to be declared the KIBE domain (This data is provided by KIU at time of KIBE creation for client) followed by the parameters /api/get_complete_config_widget/. (Ex: https://kibe-dev-xx.kiusys.net/api/get_complete_config_widget/).
This URL will return the next JSON API.
| Code Block | ||||
|---|---|---|---|---|
| ||||
{
"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 | Hold and object with the configuration of the passenger types supported and max.quantity allowed. | Objecto |
| max_pax_allowed | This key contain the max. quantity passengers allowed. | Integer |
| pax_config | It is an object with with the configuration allowed for categories of passenger types. These are: ADULT, CHILD and INFANT. | Objecto |
| max_age | Related to the max. age allowed per passenger category. It is inside the pax_config node. | Integer / null |
| enable | This is a toggle that indicate if a category is enable or disable. 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 allowd for each category. It is inside the pax_config pax_config node | Integer |
| csrf_token | This is the hash for validation purposes that must be include on the form submit. | HASH |
| airports | It is an object that contain the information of valid airports set for customer. This information is offer for validation purposes of the form at client level. (Front-end validation). | Object |
| keys | Object. List of origins - destinations set on back office as allowed routes. This key is inside the object airport. Represent which origin to which destination is allowed to request content. | Object |
| origin | List of enable airports for origin exclusively. 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 internal for KIBE uses only!. | 4 Alphabetical chars |
| value | Description associated to the airport code. This key is inside the Origin node. | Alphabetical |
| destination | List of enable airports for destination exclusively. This fiel is inside Keys node. | Object |
| code | ISO IATA airport code for origin field. This key is inside the Origin node. | 3 Alphabetical chars |
| data | This is internal for KIBE uses only!. | 4 Alphabetical chars |
| value | Description associated to the airport code. This key is inside the Origin node. | Alphabetical |
| origin_destination | Object. List of routes enables for commercialization into the back-Office of KIBE. | Object |
| keys | List of objects that contain the pair of airports enables to offer. This key is inside the origin_destination node. | Array |
| origin | ISO IATA Airport code corresponding to the origin. It is inside the Keys node. | 3 Alphabetical chars |
| destination | ISO IATA Airport code corresponding to the destination. It is inside the Keys node. | 3 Alphabetical chars |
| not_flying_days_return | List of week days that return flight is not enable to operate. It is inside the Keys node. | 0 to 6 (0:Monday; 1; Tuesday..etc.) |
| not_flying_days_going | List of week´s days that origin flight is not enable to operate. It is inside the Keys node. | 0 a 6 (0: Monday; 1:Tuesday....etc.) |
| frequency_return | List of days of a week that return flight is enable to operate. It is inside the Keys node. | 0 a 6 (0: Monday; 1:Tuesday....etc.) |
| frequency_going | List of days of week days that the origin flight is enable to operate. It is inside the Keys node. | 0 a 6 (0: Monday; 1:Tuesday....etc.) |
| direct_fly | Toggle that display if the flight is direct of allows connections. | true / false |
Developers based on this response have the enough data to build display content on widget field like origin - Destination and make the validations of routes enables to search, Types of passengers and quantity of passengers enable to search and type of trips (One way and round trips).
Search Flights:
At time to process the form and redirect to the KIBE, into the form tag on the action attribute the target URL must be the KIBE domain and the method tag, need to be 'POST'.
Ex:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<form class="searcher" id="search-form" name="searchWidgetForm" action="https://kibe-dev-xx.kiusys.net/" method="POST"> |
Declare this, when the user click over the submit button, KIBE will gather all the parameters Origin, Destination, DepartureDate, ReturnDate (If it´s exists), Adults quantity, Childs quantity, infants quantity, process the request and display the results into the environment of KIBE page and complete the booking flow normally.