Integrating with Widget

The Sensible Weather Guarantee Widget provides a seamless way to integrate Sensible Weather guarantees into your existing checkout flow.

First install the Sensible SDK

The Sensible Weather Guarantee Widget is built on top of the Sensible Weather JavaScript SDK. To begin, first follow the instructions to include the JavaScript SDK within your app, as outlined here.

Once you have the SDK installed and configured, you can use the Guarantee Widget to display quotes on your page.

Including the Guarantee Widget

To include the Guarantee Widget, insert the following html snippet on your page in the desired location.

<swui-theme>
  <sensible-weather-guarantee/>
</swui-theme>

The widget will load language and styling specific to the product configuration that the SDK has been initialized with.

Once included, the Guarantee Widget will automatically display a loading state. To display a quote, call the following method on the Sensible JavaScript SDK.

Sensible.mountComponent({
  coverageStartDate: "2024-01-01",
  coverageEndDate: "2024-01-05",
  currency: "usd",
  exposureName: "Example Exposure Name",
  exposureLatitude: 37.77664018315584,
  exposureLongitude: -111.63836828825272,
  exposureTotalCoverageAmount:  10,
  langLocale: "en-us"
})

This method will generate a quote and use it to populate the details of the Guarantee Widget.

Registering Callbacks

In order to be notified when a quote is selected or deselected from the Guarantee Widget, you can register custom callback functions to the Guarantee Widget as follows:

Sensible.setCreateGuaranteeCallback((quote) => {
  // Inspect the quote as soon as it is generated
});

Sensible.setSelectGuaranteeCallback((quote) => {
  // Add the selected quote to your customer's cart here
});

Sensible.setUnselectGuaranteeCallback((quote) => {
  // Remove the selected quote from your customer's cart here
});

These callbacks should be set prior to mounting the widget component to ensure that no triggers are missed.

The quote object passed to these callback functions has the following shape:

interface Quote {
  quoteData: {
    id: string;
    pricePerDay: number;
    totalPrice: number;
    dailyCoverageStartHour: number;
    dailyCoverageEndHour: number;
    sortedTiers: { 
      hours: number; 
      reimbursementRate: number 
    }[];
    exposureProtections: { 
      name: string; 
      unit: string;
      upperThreshold?: number;
      lowerThreshold?: number;
    }[];
    currency: "usd" | "eur" | "gbp";
  },
  main: {
    title: string;
    suggested_price: string;
    suggested_price_total: string;
    body: string;
    action: string;
    open_details: string;
    terms_conditions: string;
    privacy: string;
  },
  details: {
    title: string;
    summary_heading: string;
    summary_times: string;
    summary_tiers: string[];
    summary_subheading: string;
    summary_body: string;
    summary_explainer: string;
    steps_heading: string;
    step_1_heading: string;
    step_1_body: string;
    step_2_heading: string;
    step_2_body: string;
    step_3_heading: string;
    step_3_body: string;
    summary_body: string;
    suggested_price: string;
    suggested_total_price: string;
    action: string;
    close: string;
    terms_conditions: string;
    privacy: string;
  }
}

Multiple Quotes

In the event that a checkout flow would benefit from displaying multiple quotes to the end user, the widget can simply be included onto the page multiple times with unique id values tied to each instance.

<swui-theme>
  <sensible-weather-guarantee id="first-widget-instance"/>
</swui-theme>

. . .

<swui-theme>
  <sensible-weather-guarantee id="second-widget-instance"/>
</swui-theme>

When using the widget in this way, the assigned id values can be used as a second argument to the mountComponent function to specify which instance of the widget should load with the given quote details.

Sensible.mountComponent({
  coverageStartDate: "2024-01-01",
  coverageEndDate: "2024-01-05",
  currency: "usd",
  exposureName: "Example Exposure Name",
  exposureLatitude: 37.77664018315584,
  exposureLongitude: -111.63836828825272,
  exposureTotalCoverageAmount:  10,
  langLocale: "en-us"
}, "first-widget-instance");

Sensible.mountComponent({
  coverageStartDate: "2025-06-01",
  coverageEndDate: "2025-06-05",
  currency: "usd",
  exposureName: "Alternate Example Exposure Name",
  exposureLatitude: 37.77664018315584,
  exposureLongitude: -111.63836828825272,
  exposureTotalCoverageAmount:  25,
  langLocale: "en-us"
}, "second-widget-instance");

Those same id values will also be passed to each callback function as a second argument, in addition to the quote details.

Sensible.setCreateGuaranteeCallback((quote, id) => {
  // Inspect the quote as soon as it is generated
});

Sensible.setSelectGuaranteeCallback((quote, id) => {
  // Add the selected quote to your customer's cart here
});

Sensible.setUnselectGuaranteeCallback((quote, id) => {
  // Remove the selected quote from your customer's cart here
});