Developer Guide
Demo and Configuration
In order to have the best user experience, in the examples below we will show you how can pre-configure some helpful parameters.
Entriva Widget Demo
User Location
By default and to help reduce steps for your traveler, we leverage users’ location to help pre-fill:
- What country they are a resident of — “I live in…”
- What their nationality is — “My passport is from…”
If you want to prevent using the user’s location to pre-fill these fields, add the enableUserLocation key with the value false to the entrivaInit configuration.
enableUserLocation: false
Style Settings
styles {
font: {
fontFamily: '"Roboto", sans-serif',
size: 12px,
},
color: {
primary: {
base: #2191EA,
hover: #1E88E5,
light: #EAF5FD
},
success: {
base: #79FFA7,
hover: #79FFA7,
light: #F7FFFA
},
warning: {
base: #E5DC05,
hover: #E5DC05,
light: #FEFDF0
}
},
padding: {
top: 17px,
right: 10px,
bottom: 17px,
left: 10px,
},
background: {
color: #FFFFFF
}
}
Desktop Width Examples
Regardless of screen size, users are provided with a rich browsing experience without the need for scrolling, facilitating navigation and exploration.
In a spacious, full-width container of 2300 pixels, the widget seamlessly integrates, filling the space perfectly and providing a clear overview of the content.
Within a container width between 660 and 860 pixels, the widget fits perfectly, maintaining clarity and visibility of the content. Elements within the widget are easily visible, offering users a good overview of the content and facilitating usability.
On mobile and in a container as narrow as 659 pixels, the widget adapts to the smaller space with an efficient layout that allows users to still access essential information without compromising functionality. Despite the limited space, the widget enables users to browse content with ease, making the user experience intuitive and efficient.