Table of Contents

outline	true

Introducción y Conceptos

A lo largo de este instructivo, los usuarios podrán crear sus propios widgets para embeber en las páginas web y de este acceder vía parámetros a las funcionalidades de Web CheckIn .

Este documento es una guía para el desarrollador web que explica como obtener y conectar el Widget desarrollado con el motor de reservas.

Esta guía no se adentra en como crear el widget, sino, los campos y contenido que debe contar para poder realizar las búsquedas a desplegarse luego en el motor web de KIU.

Que es un widget?

Es un formulario en HTML que debe contener estilos .CSS y que permite embeberse dentro de un iframe a la página web del cliente y otros sitios.

Ofrece KIU un widget?

Si. KIU provee de un widget estándar cuando el producto IBE es creado, pero, posiblemente este no contempla todos los aspectos que requiere el cliente por lo tanto, este último puede desarrollar su propio widget y conectarse con Web CheckIn.

El widget desarrollado debe contemplar la configuración general de Web CheckIn?

Si. El Widget debe contemplar y obtener el contenido en base a la configuración de la Web CheckIn con el objetivo de realizar las búsquedas de acuerdo a los requerimientos comerciales del cliente. Esta información reside en Backoffice y debe estar completamente configurado al momento de desarrollar e implementar el widget. En esta guía se explica como conectarse y como obtener el contenido a desplegar de acuerdo a la configuración mencionada.

Tip

title	Importante

Para poder hacer un POST al servicio de búsqueda de vuelos, primero es necesario que en Web CheckIn se agregue el host desde donde se va a realizar la búsqueda a los sitios permitidos, para esto es necesario que la aerolínea envía a webservices@kiusys.com el host donde va a estar servido el widget y a cual ambiente de Web CheckIn va a apuntar.

Tip

title	Importante

Para que un carrier pueda utilizar el widget customizable, es necesario agregar en el settings del carrier la siguiente información:

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

Tip

title	Important

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 targetin in order to inform this site as white list.

Tip

title	Important

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

Ambos con el Both carrier DNS/HOST del carrier.

Obtener Contenido para Construir el Widget

Cuando el desarrollador crea el formulario en HTML para generar el widget, hay ciertos campos mandatorios que deben existir para poder enviar la información mínima necesaria a Web CheckIn y de esta manera obtener resultados.
Con el objetivo de obtener este contenido el desarrollador debe agregar el siguiente Script dentro de la etiqueta <head> en el formulario.

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 Web Check-In and ithereby obtain results.
In order to obtain this content the developer must add the following Script within the <head> tag in the form.

Code Block

language	actionscript3
theme	DJango

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

Ejemplo para armar un formularioExample to create a form:

Code Block

language	actionscript3
theme	DJango

<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: Se debe declarar el dominio de Web CheckIn (Este dato es proveído por KIU al momento de crear la instancia del producto para el cliente) agregando los parámetros 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 / (EjEx: http: // wc2-dev-xx. kiusys.net/api/get_widget_form/?callback).

Esta URL va a devolver la siguiente respuesta en formato JSON:This URL will return the following response in JSON format:

Code Block

language	css
theme	FadeToGrey

{
	"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"
		}
	}
}

Diccionario de Respuesta

Glossary

ObjetoAlfabéticoNúmeroAlfabéticoAlfanuméricoObjetoObjetoAlfabéticoObjetoAlfabético

NombreName	DescripciónDescription	Valores Values / FormatoFormat
form_inputs	Contiene un objeto con las configuraciones para el Contains an object with configurations for last_name y el and pnr.	ObjetoObject
last_name	Es el objeto apellido que tiene la información necesaria para armar el campo en el formulario.	Last name object that has the necessary information to create the HTML field in the form.	Object
required	last_name, indica si el campo es requerido o noIndicates if field required or not.	true / false
max_length	last_name, indica la longitud máxima del campoindicates maximum field length.	NuméricoNumeric
tooltip	last_name, es el mensaje de ayuda en el tooltip.	is the help message in tooltip	Alpha
label	last_name, es el nombre del campo que se mostrará en el formulario.	Alfabético
pnr	Es el objeto pnr que tiene la información necesaria para armar el campo en el formulario.	Alfanumérico 6 caracteres
required	pnr, indica si el campo es requerido o no.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, indica la longitud máxima del campo indicates maximum field length.	NuméricoNumeric
tooltip	pnr, es el mensaje de ayuda en el tooltip.	is the help message in tooltip	Number
label	pnr, es el nombre del campo que se mostrará en el formulario.	is the field name displayed in the form	Alpha
csrf_token	Es el HASH de validación de DJANGO para la validación del SUBMIT del formulario. It is the validation HASH of DJANGO for SUBMIT validation in the form	HASH
conditions	Es el objeto condiciones que tiene la información necesaria para armar el campo en el formulario.	Objeto	message	El mensaje que va a mostrarse de acuerdo a los términos y condiciones.	It is the object conditions that have the necessary information to create the field in the form.	Object
message	Message that will be displayed according to the terms and conditions.	Alphanumeric
file_link	Es el link de descarga que se va a indicar para los términos y condiciones 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.	is the object that contains the actions of Cancellation and Start on the form.	Object
void_checkin	Es el objeto void_checkin que tiene la información necesaria para armar el campo en el formulario.	is the void_checkin object that has the necessary information to create the field in the form.	Object
id	void_checkin, Id para armar el botón de Anulación to create the Override button.	key
label	void_checkin, es el nombre del campo que se mostrará en el formulario.	is the name of the field that will be shown in the form.	Alpha
start_checkin	Es el objeto start_checkin que tiene la información necesaria para armar el campo en el formulario.	is the start_checkin object that has the necessary information to create the field in the form.	Object
id	start_checkin, Id para armar el botón de Inicio to build the Start button.	key
label	start_checkin, es el nombre del campo que se mostrará en el formulario.	is the name of the field that will be shown in the form.	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

Flight Search

Once the form is already developed and has the content as described above, the developer must send these parameters to Web Check-In, and then add within the <form> tag:

action: The destination URL must be the Web CheckIn domain.
method: Method must be POST.

Example:

Code Block

language	xml
theme	FadeToGrey

 <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ámetrosIncluding these attributes when the user submits the form, Web CheckIn will take the parameters:

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

A series of data validations is performed and then the request is processed.At this time, the results obtained will be displayed within the CheckIn Web page in the Web CheckIn environment

Recommended Validations

Beyond that Web Check-In application has its own validations in the back-end, we suggest developers certain recommendations about some validations to be made on the client side (Front-end) in order to avoid inconsistent search errors and generate a more efficient process.

last name
validate if the field is as required.
Validate a maximum of 100 characters.
Validate that the input is capitalized.
pnr
Validate if the field is as required.
Validate 6 characters.
Validate that the input is capitalized.

Version	Old Version 1	New Version Current
Changes made by	Pablo Cappelletto (Deactivated)	Luga (Deactivated)
Saved on	Jan 08, 2019	Jan 15, 2019

Versions Compared

Key

Introducción y Conceptos

Introduction and Concepts

Obtener Contenido para Construir el Widget

Upoloading Content to Widget

Glossary

Búsqueda de Vuelos

Flight Search

Validaciones Recomendadas

Recommended Validations

Page Comparison

Versions Compared

Key

Introducción y Conceptos

Introduction and Concepts

Obtener Contenido para Construir el Widget

Upoloading Content to Widget

Glossary

Búsqueda de Vuelos

Flight Search

Validaciones Recomendadas

Recommended Validations