Versions Compared

Version Old Version 5 New Version 6
Changes made by

Luga (Deactivated)

Yulmah Betancourt (Deactivated)

Saved on

Key

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

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)


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, that is

Title type, 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.

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

  • Background-color:

will permit the change

  • changes color scheme of the background

color

  • of the

buttons

  • button

  • Color:

Allows the option of changing the

  • changes the Font color of the

letters of each

  • button

Example

Backoffice

 Image Added

IBE

 Image Added

Backoffice

:

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

 Image Added

Web Check In

 Image Added

Hover Button

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

  • Background-color:

  modifiys the tone of color of the background of the button when the button is positioned on itExampleBackoffice:

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.

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

Example

IBE

Image Removed

 Image Added

Backoffice

Image Removed

Image Added

Summary Arrow

Change of the arrow background color used in the itinerary summary

IBE

Image Removed

Backoffice

Image Removed

 

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

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.