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 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 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 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 many examples of how to connect your custom widget Widget with the KIBE.  

How to get KIBE content to build a widget.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 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:

 <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.