Travel insurance widget
Our travel insurance widget is not really ours, but is rather pulled in by an external script from World Nomads. It is, by default, not styled in any way, so you must provide your own styles. The default style in this example mimics the look of how it is implemented in the Lonely Planet booking page, which you can view in the
widgets/_travel_insurance.sass
file.
There is one known conflict. The World Nomads widget implements an element with a class of
.tooltip
, which is also a Lonely Planet class, so the tooltip that should appear when the "Who's going" input gains focus will not appear in this example.
Arguments
show_sponsor
Setting this to true will display the World Nomad logo beneath the widget.
Usage
The following example demonstrates how to implement.
@import 'components/preloader'If you use show_preloader: true, ensure that preloader sass is included.
= ui_component("widgets/travel_insurance", properties: { show_sponsor: true, show_preloader: true})
To setup the widget, you need to require it, and call .render(). You can optionally use the .then()
to run a function when the widget has loaded.
define(["lib/widgets/travel_insurance"], function(TravelInsurance) {
var widget = new TravelInsurance();
widget.render().then(function() {
// ...
});
});