Versions Compared

Version Old Version 2 New Version Current
Changes made by

Natalia Pacheco (Deactivated)

Yulmah Betancourt (Deactivated)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
troduction

Introduction

The purpose of this manual 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.

 

Image Added

 

Example:

Image Added

 

Note

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


Styles

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


Title

They correspond to all

All texts that are

titles

Title type,

that is,

those that indicate

the

content of

the

a section

.

  • Color:

modifies the color tone on which the titles on the page will be displayed

  • Changes color scheme of the titles

  • Font-family:

 allows to indicate the

  • changes font type of

typography on which the letter corresponding to

  • the titles

will be shown

NOTE: There can be several titles on one page.

Examples:Backoffice:

Image Removed

Result on display:

Image Removed

Body

This will allow to change

A page may contain several titles.

Example

Backoffice

Image Added

IBE

Image Added


Body

This configuration allows changing the style of the body of

the

a page

, its structure

.

 The

Body

: also

includes

the section of

booking summary

placed

on the right side of the screen

  • Color:

 modify the color tone on which the page source will be displayed

  • Changes color scheme of the titles

  • Font-family:

allows to indicate the

  •  changes font type of

typography on which

  • the

letter corresponding to the

  • titles

will be shown

Example

Backoffice

:

Image Removed

Result on display:
Image Removed

Image Added

IBE

Image Added


Header

The headers is the upper part of the charts and the navigation route.

This type of style will also apply for the sides on the search results, the one where the flight number is shown

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

  • Background-color:

Change

  • Changes the

tone of

  • color scheme of the

background of the chart where the headers are placed.

  • boxes that contain headers

  • Color:

indicates the

  • type of

typography on which the header will be displayed

  • font used for headers

Example

Backoffice

:

 Image Removed

Result on display:
Image Removed

Image Added

IBE

Image Added


Flight

selectionIt corresponds to the modification of step two in the flow, that is, selection of flight in the rate section selected by the user

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

tone

  • color scheme of the

background of

  • box that contains the selected fare

chart selected by the user.

  • Color:

modifies

  • Changes the color of the

edge of the chart formed

  • box border after the selection

of the fare.

  • is made

Example

Backoffice

Image Added

IBE

Image Added

Backoffice

:

Image Removed

Result on display:

Image Removed

Informative Text

This option allows modifying the background color that corresponds to the descriptive text in which the conditions of the rate are indicated.

Image Added

Web Check In

Image Added


Descriptions

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

  • Background-color:

 modifies

  • Changes the

background

  • color

with which the page content will be

  • scheme of the background where description is displayed

  • Color:

 indicates

  • changes the Font color of the

letter corresponding to the descriptive text in which the conditions of the rates are indicated

  • descriptions

Example

Backoffice

:

Image Removed

Result on display:

Image Removed

Navigation bar

Allows to modify the right edges on the section navigation route and in the information summary on the step two of flight selection.

Image Added

IBE

Image Added


Breadcrumbs Trail

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

  • Border-Left-Color:

modify the tone of

  • Changes color scheme of the figures

on

  • showed at the example

. 

Example

Backoffice

:

 Image Removed

Result on the screen:

Image Removed

 Back Arrow Navigation bar

It allows the modification of the color in the navigation route located at the top of the screen

Image Added

IBE

Image Added


Breadcrumbs Trail Back Arrow

Change of the breadcrumbs trail color scheme.

  • Border-bottom-color:

mofidies the tone of color in the bottom (posterior)

  • Changes color scheme of the back lower part of the figures

  • Border-top-color:

modifies

  • Changes the

tone

  • color scheme of

color in

  • the back upper part

(posterior)

  • of the figures

Example

Backoffice

Image Removed

Result on display:
Image Removed

 Image Added

IBE

Image Added


Button

This option allows the modification of the styles corresponding to the buttons that are in the flow of the KIBE.

Note: pop-up buttons are included in this section. An example is when the user presses the option to return from the browser.
  • Background-color: will permit the change of the background color of the buttons
  • Color: Allows the option of changing the color of the letters of each button
ExampleBackoffice:

Image Removed

Result on the screen :

Image Removed

Over Button

Allows to modify the background of the button once the cursor (mouse) is positioned on it

  • Background-color:  modifiys the tone of color of the background of the button when the button is positioned on it
ExampleBackoffice:

Image Removed

Result on display:

Image Removed

 

NOTE: in case of not being able to see correctly the changes, you must erase the cache of the web browser and try it again.

 

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

 Image Added

IBE

 Image Added

Backoffice

 Image Added

Web Check In

 Image Added


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

 Image Added

IBE

 Image Added

Backoffice

 Image Added

Web Check In

 Image Added


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

Image Added

Backoffice

 Image Added

IBE

Image Added

Backoffice

 Image Added

Web Check In

 Image Added


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

 Image Added

Backoffice

 Image Added

IBE

 Image Added

Backoffice

 Image Added


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

 Image Added

Backoffice

 Image Added


Accepted Payment Transaction

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

Ejemplo

IBE

 Image Added

Backoffice

 Image Added


Rejected Payment Transaction

Change of the color scheme of the Rejected Payment Transaction

Example

IBE

 Image Added

Backoffice

 Image Added


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

 Image Added

Backoffice

Image Added


Summary Arrow

Change of the arrow background color used in the itinerary summary

Example

IBE

 Image Added

Backoffice

 Image Added


Seat Selection

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

  • Color: Changes icon color for selected seat.

Example

Backoffice

Image Added

Web Check In

 Image Added


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

 Image Added

Web Check In

 Image Added


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

 Image Added

Web Check In

 Image Added


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

Image Added

Web Check In

Image Added


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

Image Added

Web Check In

Image Added


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

Image Added

Web Check In

 Image Added


Itinerary route

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

  • Color: Changes text color.

Example

Backoffice

Image Added

Web Check In

Image Added


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

Image Added

Backoffice Unavailable Seat

Image Added


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

Image Added

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

Image Added

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

Image Added

Web Check In

Image Added



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.