KIU AUTH User Guide

Owned by Natalia Pacheco (Deactivated)
Last updated: Jun 24, 2019 by Yulmah Betancourt (Deactivated)

Introduction

The purpose of this guide is to ease the understanding of the front-end configuration of Web Check-in and KIBE systems, through the CSS application.

The accesses to each module are divided into the following categories:

  • Backoffice: contains the general administration of each module to perform the tasks of maximum configuration
  • WebApp: access to applications



Kiu Static


Styles settings


The experience of navigation and ease offered by a site to be able to use it is as important as the one that the user experiences through the vision. Both factors influence positively or negatively on him and predispose him in the same way for the rest of the session. There are combinations of shapes and colors that allow the harmony between these elements and a consequent relaxation of the senses, without mentioning how important they are for the identity of the brand. KIU offers the opportunity to customize the typography and colors in the different sections of your page, accompanying the essential style of your product / service. To achieve this, KIU grouped the different sections and functionalities in a standard way to select the colors and fonts that best suit their style.

Access


Design


Allows you to select if the header or footer of the page (s) will contain a custom design or extracted from some URL, so we can load an image by selecting a file (Upload image), from a URL (Upload URL) or not upload nothing at all (Without Header). In the same way, we will proceed with the footer. In both cases, we can always see the file or image currently loaded by clicking on View Current Header or View Current Footer.

Also Cancel / Save: both buttons cancel or save the operation respectively.

Note: in case of loading a URL for header / footer, it must be HTTPS (ONLY FOR PRODUCTION ENVIRONMENT)

 

Avatar 

 

 

Esta sección permite modificar la visualización del estilo de avatar y background-color de los pasajeros correspondiente a la página Passengrs Information.

This section allows the modification of the avatar style and the background color on the Traveller Details page.

 

  • Passenger Type: modifies the avatar style.
  • Background-color: modifies the color scheme of the avatar.

 

 

Example:

 

If you wish to set the configuration back to default, you can reset the background color by clicking in the X


Styles

Styles allow you to modify the color and fonts of the different detailed sections by pressing the button


Title

All texts that are Title type, those that indicate content of a section

  • Color: Changes color scheme of the titles

  • Font-family: changes font type of the titles

A page may contain several titles.

Example

Backoffice

IBE


Body

This configuration allows changing the style of the body of a page.

Body includes booking summary on the right side of the screen

  • Color: Changes color scheme of the titles

  • Font-family: changes font type of the titles

Example

Backoffice

IBE


Header

Page headers and breadcrumbs trail. It also applies for the sides where flight numbers are displayed

  • Background-color: Changes the color scheme of the boxes that contain headers

  • Color: type of font used for headers

Example

Backoffice

IBE


Flight Selection

Highlight of the flight and fare selection by the user and passenger/s selected for checking in, in Web Check-in > Itinerary > Passenger section.

  • Background-color: changes the color scheme of the box that contains the selected fare

  • Color: Changes the color of the box border after the selection is made

Example

Backoffice

IBE

Backoffice

Web Check In


Descriptions

Change of the background color for the box where fare conditions are displayed

  • Background-color: Changes the color scheme of the background where description is displayed

  • Color: changes the Font color of the descriptions

Example

Backoffice

IBE


Breadcrumbs Trail

Change of the right side borders of the breadcrumbs trail and the booking summary

  • Border-Left-Color: Changes color scheme of the figures showed at the example

Example

Backoffice

IBE


Breadcrumbs Trail Back Arrow

Change of the breadcrumbs trail color scheme.

  • Border-bottom-color: Changes color scheme of the back lower part of the figures

  • Border-top-color: Changes the color scheme of the back upper part of the figures

Example

Backoffice

 

IBE


Button

Change of the buttons used on the purchase flow, including those displayed on the pop-up windows

  • Background-color: changes color scheme of the background of the button

  • Color: changes the Font color of the button

Example

Backoffice

 

IBE

 

Backoffice

 

Web Check In

 


Hover Button

Change of the button's color scheme the cursor is over the button

  • Background-color: Changes the color scheme when cursor is over the button.

Example

Backoffice

 

IBE

 

Backoffice

 

Web Check In

 


Active Selection

Change of the background color and font of the active breadcrumb

  • Background-color: Changes the color scheme of the background

  • Color: Font color of the description of the breadcrumb

Example

IBE

Backoffice

 

IBE

Backoffice

 

Web Check In

 


Active Selection Back Arrow

Change of the color scheme of the back arrows on the active breadcrumb

  • Border-bottom-color: Changes color scheme of the back lower part of the figures

  • Border-top-color: Changes the color scheme of the back upper part of the figures

Example

IBE

 

Backoffice

 

IBE

 

Backoffice

 


Active Selection Front Arrow

Change of the color scheme of the right borders of the breadcrumbs trail when active.

  • Border-Left-Color: changes the color scheme

Example

IBE

 

Backoffice

 


Accepted Payment Transaction

Change of the background color of the Accepted Payment Transaction message.

Ejemplo

IBE

 

Backoffice

 


Rejected Payment Transaction

Change of the color scheme of the Rejected Payment Transaction

Example

IBE

 

Backoffice

 


Next and Back - Flight Selection

Change of the background color scheme of the dates from the result of a flight search and its navigation options

Example

IBE

 

Backoffice


Summary Arrow

Change of the arrow background color used in the itinerary summary

Example

IBE

 

Backoffice

 


Seat Selection

Allows to modify seat selection. (Web Check In > Seat Selection).

  • Color: Changes icon color for selected seat.

Example

Backoffice

Web Check In

 


Action buttons

Changes background and text color from edition buttons in each passenger card of Web Check In's Boarding pass step.

  • Background-color: Changes buttons' background color.

  • Color: Changes text / icon color.

Example

Backoffice

 

Web Check In

 


Expand buttons

Allows to modify text, arrow and dynamic button color, from Passenger data step in Web Check In flow

  • Color: Changes text, arrow and cynamic button for expand / collapse section.

Example

Backoffice

 

Web Check In

 


Terms & Conditions

It modifies text color located in Web Check-in Portal Landing, which allows to show pop up of terms & conditions file.

  • Color: Changes text color.

Example

Backoffice

Web Check In


Warning

Allows to modify text & background-color for warning sections, i.e (Segments in TK/KL status, shown as a warning for changes in an old itinerary and flights yet in status CLOSED for web check in).

  • Background-Color: Modifies warning background color.

  • Color: Modifies text of message.

Example

Backoffice

Web Check In


Rows

Modifies rows in a list which are not in active selection but showing all available options to navigate i.e (Web Check-in > Seat selection > Itinerary (flights non selected and passengers list not selected but listed in).

  • Background-color: Modifies box color.

  • Color: Modifies text color.

Example

Backoffice

Web Check In

 


Itinerary route

Allows to modify text for itinerary route, in seat selection page.

  • Color: Changes text color.

Example

Backoffice

Web Check In


Seat Unavailable

Modifies the color of unavailable seats at the seat map:

  • Background-color: Modifies the color of unavailable seats at the seat map.

  • Color: Indicates the color of unavailable seats.

Example

IBE

Backoffice Unavailable Seat


Seat Available

Modifies the color of available seats at the seat map:

  • Background-color: Modifies the color of available seats at the seat map.

  • Color: Modifies the color of available seats at the seat map.

Example

IBE

Backoffice Available Seat


Background color to Web Check in


Modifies application background color.:


  • Background-color: Modifies the background color of elements, like body.


Example

Backoffice

Web Check In


Passenger Box on Itinerary of web check in


Change of the background color of passenger box:


  • Background-color: Modifies the background color of elements, like body.


Example

Backoffice

Web Check In



Kiu Account Manager


Profile configuration


The permissions contained in the roles that will access the applications are available for administration in the Account Manager. These are assigned to users to enter the application with a certain profile or level of access.

As we have already mentioned, the administrator roles in the highest hierarchy are computer security users / systems that have this privilege from BackOffice.

We will use the WebApp button:


This will allow to access to:

  • User creation
  • Accounts 

User Creation


In this form, we can create the users that will acces the system that we choose 

By completing the fields and assigning each application a role, when creating that user he will obtain a role in those applications to be able to access and use it.

The visible roles and applications will be the same as the authenticated user has associated with their account.

We can delete, modify or consult the users created in the applications by accessing Accounts.

Accounts


Here we will see if the user is active or not and which role has assigned in a quick way.

Through this options we will consult , edit  or delete 

Consult

Edit

Its possible to edit all the visible users in Accounts, including your own. In case of editing an authenticated user, there is an additional option of modify the password

Here we see the additional option of CHANGE PASSWORD to edit the validated user


NOTE:each time that you modify a validated user, they will be logged off and must log in again on to the plattform


Log Out

In order to avoid wrong use of the tool, It is important to remember always log off the applications once you have finished your usual tasks.