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>

This will automatically display the Guarantee Widget in 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.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
});

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;
  }
}