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.

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.

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

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

<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 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	is the object that contains the actions of Cancellation and Start on the form.	Object
void_checkin	is the void_checkin object that has the necessary information to create the field in the form.	Object
id	void_checkin, Id to create the Override button.	key
label	void_checkin, is the name of the field that will be shown in the form.	Alpha
start_checkin	is the start_checkin object that has the necessary information to create the field in the form.	Object
id	start_checkin, Id to build the Start button.	key
label	start_checkin, is the name of the field that will be shown in the form.	Alpha

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:

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

Including these attributes when the user submits the form, Web CheckIn will take the parameters:

last name
pnr

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.

KIU Online Documentation

Web Check-in Customizable Widget - Developer guide

Introduction and Concepts

Upoloading Content to Widget

Glossary

Flight Search

Recommended Validations