Widget eCommerce
Instructivo en español
Este documento tiene por objetivo explicar las distintas configuraciones posibles para integrar el widget y maneras de visualizarlo.
Iframe
Para integrar el widget se requiere un tag html iframe, por ejemplo
<iframe src="https://ecommerce-gh-stage.kiusys.net/booking/widget?carrier=gh&lang=en"></iframe>
Esta url del widget acepta varios query params (parametros que se configuran en la url) para obtener distintos resultados
Query params disponibles
Los query params comienzan luego del ? y se concatenan con el &
carrier: es mandatorio y debe enviarse el código del carrier
lang: indica el idioma de despliegue del widget, por ejemplo en, es, ft, it. Debe ser alguno de los configurados para el ecommerce del carrier y si el sitio del carrier es multilenguaje, cuando cambie el idioma deberá cambiar el valor del parámetro para que el widget ajuste el idioma
module: este parámetro no es mandatorio y si se especifica mostrar el tab idicado. ejemplo https://ecommerce-gh-stage.kiusys.net/booking/widget?carrier=gh&module=webcheckin&lang=es Valores posibles
ecommerce
webcheckin
manage
no_tab: este parametro indica si se mostrará el tab del modulo selecionado o no. Por ejemplo https://ecommerce-gh-stage.kiusys.net/booking/widget?carrier=gh&module=webcheckin&no_tab=true&lang=es. Valores posibles
true
false
origin: este parámetro indica el origen que deseamos que aparezca seleccionado. Se debe enviar un código de aeropuerto, si no coincide con ninguno de la lista se ignora. Por ejemplo https://ecommerce-gh-stage.kiusys.net/booking/widget?carrier=gh&origin=mia
destination: este parámetro indica el destino que deseamos que aparezca seleccionado. Se debe enviar un código de aeropuerto, si no coincide con ninguno de la lista se ignora. Por ejemplo https://ecommerce-gh-stage.kiusys.net/booking/widget?carrier=gh&origin=mia&destination=cun
Layout
El widget contiene elementos flotantes que el usuario utiliza para seleccionar Origen, Destino, Pasajeros, Códigos Promocionales, etc.
Para una correcta visualización de estos elementos flotantes sobre su sitio es necesario contener al elemento <iframe> dentro de un <div> con la clase “widgetContainer".
<div class="widgetContainer">
<iframe></iframe>
</div>La clase "widgetContainer" especifica las propiedades de estilo que permiten mostrar correctamente estos elementos del widget dentro del layout de su sitio.
Haciendo una aproximación mobile-first determinamos el breakpoint a desktop en un valor mayor a 992px.
:root {
--widgetContainer-height-mobile: 500px;
--widgetContainer-iframe-height-mobile: 750px;
--widgetContainer-height-desktop: 180px;
--widgetContainer-iframe-height-desktop: 520px;
}
.widgetContainer{
position: relative;
height: var(--widgetContainer-height-mobile);
overflow: visible;
z-index: 1000;
}
.widgetContainer iframe{
height: var(--widgetContainer-iframe-height-mobile);
}
@media screen and (min-width: 992px){
.widgetContainer{
height: var(--widgetContainer-height-desktop);
}
.widgetContainer iframe{
height: var(--widgetContainer-iframe-height-desktop);
}
}Este código especifica comportamiento para la configuración por defecto del widget, por lo que usted debe modificar los valores de las variables nativas definidas en :root según las especificidades de su sitio.
Otra alternativa de vista
Si se quiere cambiar la versión del widget o combinar elementos de una versión con los de otra versión se debe solicitar a ecommerce.help@kiusys.com.
Versión 1
Versión 2
English instructions
This document explains the possible configurations to integrate a widget and shows the possible visualizations on screen.
Iframe
An html iframe tag is required to integrate the widget , for example
<iframe src="https://ecommerce-gh-stage.kiusys.net/booking/widget?carrier=gh&lang=en"></iframe>
This url’s widget accepts several query params (parameters configured in the url) to obtain different results.
Available query params
Query params begin after ? and are always linked toghether with &
Ejemplo https://ecommerce-gh-stage.kiusys.net/booking/widget?carrier=gh&module=webcheckin&no_tab=true&lang=es
carrier: it is mandatory and the carrier’s code must be sent
lang: it indicates the language in which the widget will be displayed, for example en, es, ft, it. It must be one of the languages already configured for the carrier ecommerce. If the carrier’s website is multilanguage, the value’s parameter should be modified in order for the widget to change to the new language.
module: this parameter is not mandatory, if displaying the tab has been chosen, for example: https://ecommerce-gh-stage.kiusys.net/booking/widget?carrier=gh&module=webcheckin&lang=es Possible values:
ecommerce
webcheckin
manage
no_tab: this parameter indicates whether the tab for the selected module will be displayed or not. For example https://ecommerce-gh-stage.kiusys.net/booking/widget?carrier=gh&module=webcheckin&no_tab=true&lang=es . Possible values:
true
false
origin: this parameter indicates the origin you want to display as selected. An airport code must be sent, if it doesn’t match with any of the list, it will be ignored. For example https://ecommerce-gh-stage.kiusys.net/booking/widget?carrier=gh&origin=mia
destination: this parameter indicates the destination you want to display as selected. An airport code must be sent, if it doesn’t match with any of the list, it will be ignored. For example
Layout
The widget contains floating elements the client may use to select Origin, Destination, Passengers, Promo Codes, etc.
For a good visualization of the floating elements on your website it is neccesary to contain the element <iframe> inside <div> with the class “widgetContainer".
<div class="widgetContainer">
<iframe></iframe>
</div>The class "widgetContainer" especifies the style properties that will allow these elements to be properly displayed in your website layout.
Mobile-first approach determines the breakpoint for desktop in a value higher than 992px.
This code determines the response for the default configuration of the widget. Therefore, you should modify the native variables values :root according to your website needs.
Alternative visualization options
If you want to change the widget’s version or combine elements from different versions, you should send your requirement to ecommerce.help@kiusys.com.
Version 1
Version 2