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.


show_sponsor Setting this to true will display the World Nomad logo beneath the widget.


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() {
    // ...
Powered by