Table of Contents

outline	true

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.

Tip

title	ImportanteImportant

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

Tip

title	ImportanteImportant

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 to Web Check-In and in thereby 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>

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

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

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 create 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 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 2	New Version Current
Changes made by	Pablo Cappelletto (Deactivated)	Luga (Deactivated)
Saved on	Jan 08, 2019	Jan 15, 2019

Versions Compared

Key

Introduction and Concepts

Upoloading Content to Widget

Glossary

Búsqueda de Vuelos

Flight Search

Validaciones Recomendadas

Recommended Validations

Page Comparison

Versions Compared

Key

Introduction and Concepts

Upoloading Content to Widget

Glossary

Búsqueda de Vuelos

Flight Search

Validaciones Recomendadas

Recommended Validations