Objective:

Thru Through this functionality, users can create their own widget Widget to embebed embed in web sites in order to access KIBE (KIU INTERNET BOOKING ENGINE) functionalities. 

This document will explain explains how to configure the widget and show also shows some examples for developers.

Concepts

What is a Widget?

 -  it  It is a form on HTML with .CSS that could be embebed embedded into an iframe on the client´s web page or other sites.

Does KIU offer a widgetWidget?  

 - Yes, . KIU provides a standard Widget when create creating the KIBE for clients, supply a standard widget, but maybe this it is not adjust adjustable 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 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 be accomplish with the operating and commercial intends requirements of the client. All this information reside resides on the KIBE backoffice that Backoffice and should be completely configurated at time of widget´s creation.  During once the Widget is created. Within this document, you will see the way many examples of how to connect your custom widget Widget with the KIBE.  

How to get KIBE content to build a

Widget

When a user create creates a form in order to build a widget for KIBE, there are some mandatory fields that it should had 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, the 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"
                });
                //EjemploExample on sobrehow comoto consumirconsume lathe 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 The KIBE domain has to be declared the KIBE domain (This data is provided by KIU at time of KIBE creation for client) once KIBE is created), followed by the parameters /api/get_complete_config_widget/ . (ExEg: 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 dictionaryDictionary:

Developers based on this response now have the data enough data to build / display content on widget fields like:

• Origin - Destination: Populate the airports on the origin field and the destination field. Create a validation for pair of airports enables for search.
• Travel Type: Create a routine to allow user to search one way and round trips travels depending the enabled routes. 
• Travelers: List of supported passenger types and the ages for limit and validate each of them. 
• Departure and return Date: Create field that allow user to add departure date and return date in case the Round trip flights is enabled. 

Search Flights:

At time to process the form and redirect to the KIBE with all the parameters, the form tag MUST include:

• action: Target URL must be the KIBE domain:
• method: 'POST'.

ExWidget 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">

 Declared

this, when the user click over When user clicks on the submit button, KIBE will gather all the parameters to execute the query: (Origin, Destination, Departure DateDepartureDate, ReturnDate (- If it´s it exists )- , Adults Adult quantity, Childs Child quantity, infants quantity. The result of the seach will be display into the  KIBE´s result page  and users can complete the booking flow normally. 

Anexo 1:

Validations recommended:

So far the KIBE has back-end validations, we strong recommend to developers pay attention to some validation on the front-end side that will make the process more efficient:

 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.