Introduction and Concepts

Throughout this tutorial, users will be able to create their own widgets to embed in web pages and from this access via parameters to the Web Check-In functionalities.

This document is a guide for the web developer that explains how to obtain and connect the Widget developed with the booking engine.

This guide does not delve into how to create the widget, but rather, the fields and content it must have in order to perform the searches to be displayed later in the KIU web engine.

What is a widget?

It is an HTML form that must contain .CSS styles and that allows embedding within an iframe to the web page of the client and other sites.

Does KIU offer a widget?

Yes. KIU provides a standard widget when the IBE product is created, but, possibly this does not cover all the aspects that the client requires, therefore a widget can created and connect with Web CheckIn.

Should the developed widget consider the Web Check-in general configuration ?

Yes. The Widget must consider and obtain the content based Web Check-in configuration in order to perform searches according to the client business requirements .This information resides in the Backoffice and must be completely configured when developing and implementing the widget. This guide explains how to connect and how to obtain the content to be displayed according to the aforementioned configuration.

Importante

Before executing any request the customer must contact Webservices support at webservices@kiusys.com to inform the URL that hosts the page of the widget and the environment that is pointing in order to inform this site as white list.

Importante

In order for the carrier can use the customizable widget it is necessary to add the following information in the carrier´s settings.

CSRF_TRUSTED_ORIGINS
ALLOWED_HOSTS

Both carrier DNS/HOST.

Upoloading Content to Widget

Whenever a developer creates an HTML form to generate a widget, there are certain mandatory fields that must exist in order to send the minimum necessary information to the Web Check-In and in thereby obtain results.
In order to obtain this content the developer must add the following Script within the <head> tag in the form.

<script type="text/javascript">
	var url = "http://wc2-dev-xx.kiusys.net/api/get_widget_form/?callback";  
	$.ajax({
		url: url+"/api/get_widget_form/",
		success: function(response){ formatResponse(response);},
		dataType: "jsonp"
	});
	function formatResponse(response){
		//Example of how to consume the data
		$("#csrfmiddlewaretoken").val(response.csrf_token);
		$("#pnr_label").html(response.form_inputs.pnr.label);
		$("#pnr").attr("required", response.form_inputs.pnr.required);
		$("#pnr").attr("max_length", response.form_inputs.pnr.max_length);
		$("#pnr").attr("title", response.form_inputs.pnr.tooltip);
		$("#pnr").attr("placeholder", response.form_inputs.pnr.label);
		
		$("#last_name_label").html(response.form_inputs.last_name.label);
		$("#last_name").attr("required", response.form_inputs.last_name.required);
		$("#last_name").attr("max_length", response.form_inputs.last_name.max_length);
		$("#last_name").attr("title", response.form_inputs.last_name.tooltip);
		$("#last_name").attr("placeholder", response.form_inputs.last_name.label);
		
		$("#conditions_url").attr("href", url+response.conditions.file_link);
		$("#conditions_message").html(response.conditions.message);
		form_actions_html = "";
		$.each(response.form_actions, function( index, value ) {
			form_actions_html+=('<div class="col-md-6 col-xs-12 text-center searcher-buttons-form-group"> <button type="submit" name="'+ value.id +'" value="1" class="btn button-search">'+ value.label +'</button></div>');
		});
		$(".button-lists").html(
			form_actions_html
		)  
	}
</script>

Example to create a form:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="POST" >
    <input type="hidden" name="csrfmiddlewaretoken" id="csrfmiddlewaretoken" value="">
    <div class="panel-body">
        <div class="searcher-input">
            <label class="etiqueta" for="url" id="url_label">Introduce una url para comenzar</label><br>
            <input type="text" name="url" id="url" value="" placeholder="http://wc2-uat-xx.kiusys.net" >
        </div>
        <div class="searcher-input">
        Datos:<br>
            <label class="etiqueta" for="id_pnr" id="pnr_label"></label>
            <input type="text" name="pnr" id="pnr" value="" >
        </div>
        <div class="searcher-input">
            <label class="etiqueta" for="id_last_name" id="last_name_label"></label>
            <input type="text" name="last_name" id="last_name" value="" >
        </div>
        
        <div class="col-md-12 row button-lists"></div>
        <div class="row">
            <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 conditions-text">
                <b><a class="termsConditions" href="" id="conditions_url" target="popup"
                      onclick="window.open(this,'condiciones','width=800,height=600'); return false;">
                    <span id="conditions_message"> </span>
                </a></b>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript">
	var url = "";	
	$ ( document ).ready(function(){
        $("input").on("change blur keydown", function(){
            if ($(this).attr("id") == "url") {
                url = $(this).val();
                $("form").attr("action", url+"/");
                get_template_data();
            } else {
                $(this).val($(this).val().toUpperCase())
            }
        })
        function get_template_data() {
            $.ajax({
               url: url+"/api/get_widget_form/",
               success: function(response){ formatResponse(response);},
               dataType: "jsonp"
            });
        }
        function formatResponse(response){
            $("#csrfmiddlewaretoken").val(response.csrf_token);
            $("#pnr_label").html(response.form_inputs.pnr.label);
            $("#pnr").attr("required", response.form_inputs.pnr.required);
            $("#pnr").attr("max_length", response.form_inputs.pnr.max_length);
            $("#pnr").attr("title", response.form_inputs.pnr.tooltip);
            $("#pnr").attr("placeholder", response.form_inputs.pnr.label);
           
            $("#last_name_label").html(response.form_inputs.last_name.label);
            $("#last_name").attr("required", response.form_inputs.last_name.required);
            $("#last_name").attr("max_length", response.form_inputs.last_name.max_length);
            $("#last_name").attr("title", response.form_inputs.last_name.tooltip);
            $("#last_name").attr("placeholder", response.form_inputs.last_name.label);
           
            $("#conditions_url").attr("href", url+response.conditions.file_link);
            $("#conditions_message").html(response.conditions.message);
            form_actions_html = "";
            $.each(response.form_actions, function( index, value ) {
			  	form_actions_html+=('<div class="col-md-6 col-xs-12 text-center searcher-buttons-form-group"> <button type="submit" name="'+ value.id +'" value="1" class="btn button-search">'+ value.label +'</button></div>');
		    });
         	$(".button-lists").html(
         		form_actions_html
     		)   
        }
   });
</script>

URL: The Web Check-In domain must be declared (This information is provided by KIU when creating the product instance for the client) adding the parameters / api / get_widget_form / (Ex: http: // wc2-dev-xx. kiusys.net/api/get_widget_form/?callback).

This URL will return the following response in JSON format:

{
	"form_inputs":{
		"last_name":{
			"required":true,
			"max_length":"100",
			"tooltip":"TOOL ES",
			"label":"Apellido"
		},
		"pnr":{
			"required":true,
			"max_length":"6",
			"tooltip":"TOOL ES",
			"label":"Codigo de reserva"
		}
	},
	"csrf_token":"vgTgLRd6L1XKeeJdWdMSPDOhyUURzF02XJUl0CarwNc3ABHAQeWdMkmgi93QMVOI",
	"conditions":{
		"message":"",
		"file_link":"/media/XX/general/conditions.pdf"
	},
	"form_actions":{
		"void_checkin":{
			"id":"void-check-in-button",
			"label":"Anular Web Check-In"
		},
		"start_checkin":{
			"id":"check-in-button",
			"label":"Comenzar Web Check-In"
		}
	}
}

Glossary

Name	Description	Values / Format
form_inputs	Contains an object with configurations for last_name and pnr.	Object
last_name	Last name object that has the necessary information to create the HTML field in the form.	Object
required	last_name, Indicates if field required or not.	true / false
max_length	last_name, indicates maximum field length.	Numeric
tooltip	last_name, is the help message in tooltip	Alpha
label	last_name,is the field name that will be shown in the form.	Alpha
pnr	PNR object that has the necessary information to create the HTML field in the form.	Alphanumeric 6 characters
required	pnr, Indicates if field required or not	true / false
max_length	pnr, indicates maximum field length.	Numeric
tooltip	pnr, is the help message in tooltip	Number
label	pnr, is the field name displayed in the form	Alpha
csrf_token	It is the validation HASH of DJANGO for SUBMIT validation in the form	HASH
conditions	It is the object conditions that have the necessary information to assemble the field in the form.	Object
message	Message that will be displayed according to the terms and conditions.	Alphanumeric
file_link	Download link that will be indicated for terms and conditions.	Link
form_actions	Es el objeto que contiene las acciones de Anulación e Inicio sobre el formulario.	Object
void_checkin	Es el objeto void_checkin que tiene la información necesaria para armar el campo en el formulario.	Object
id	void_checkin, Id para armar el botón de Anulación.	key
label	void_checkin, es el nombre del campo que se mostrará en el formulario.	Alpha
start_checkin	Es el objeto start_checkin que tiene la información necesaria para armar el campo en el formulario.	Object
id	start_checkin, Id para armar el botón de Inicio.	key
label	start_checkin, es el nombre del campo que se mostrará en el formulario.	Alpha

Búsqueda de Vuelos

Una vez que el formulario ya se encuentra desarrollado y cuenta con el contenido anteriormente descrito, el desarrollador debe enviar estos parámetros a Web CheckIn, para lo cual, debe agregar dentro de la etiqueta <form> :

action: La URL de destino debe ser el dominio de Web CheckIn.
method: El método debe ser POST.

Ejemplo:

 <action="https://wc2-dev-xx.kiusys.net/" method="POST">

Incluidos estos atributos cuando el usuario envía el formulario, Web CheckIn va a tomar los parámetros:

last name
pnr

Realiza una serie de validaciones de datos y procesa el pedido. En este momento, los resultados obtenidos se van a desplegar dentro de la página de Web CheckIn en el ambiente de Web CheckIn.

Validaciones Recomendadas

Mas allá que la aplicación Web CheckIn tiene sus propias validaciones en el backend, debemos realizar ciertas recomendaciones a los desarrolladores sobre algunas validaciones a realizar del lado del cliente (Front-end) con el objetivo de evitar errores de búsqueda inconsistentes y generar un proceso mas eficiente.

last name
Validar si el campo está como requerido.
Validar que sea de máximo 100 caracteres.
Validar que el ingreso sea en mayúscula.
pnr
Validar si el campo está como requerido.
Validar que sea de 6 caracteres.
Validar que el ingreso sea en mayúscula.

Copy of Web Check-in Customizable Widget - Developer guide

Introduction and Concepts

Upoloading Content to Widget

Glossary

Búsqueda de Vuelos

Validaciones Recomendadas