Migrate to version 2

What has changed?

There has been many updates to the Green Housing widget in version 2. Some of them affect how the widget is configured and therefore you will likely need to do some adaptions in case you provide custom configuration parameters when mounting the widget.

Read more on how to configure the widget here.

Leads

Leads has been much restructured and the leads parameter is now an object instead of an array of lead objects. Effectively, the former leads array is now leads.regular. See below for further details.

const configurationOverrides = {
  ...
  leads: {
      highlighted: {...},
      regular: [{...}]
  },
  ...
}

The new structure of leads

Highlighted leads

onCTAClick(), onFirstCTAButtonClick() and onSecondCTAButtonClick() has been removed in favor of leads.highlighted. A “highlighted lead” is displayed separately, just like the previous “CTA”.

leads: {
    highlighted: {
        heading: "Example heading text",
        description: "Example description text",
        buttons: {
            first: {
                text: "Click me!",
                onClick: () => window.open("https://econans.com", "_blank"),
            },
            second: {
                text: "Click me too!",
                onClick: () => window.open("https://econans.com", "_blank"),
            },
        },
    },
}

Example configuration of a highlighted lead

Note that parts of a highlighted lead might be pre-configured by Econans and you can then just pass in any parameters you want to change.

leads: {
    highlighted: {
        buttons: {
            first: {
                text: "Only change this text",
            },
        },
    },
}

Example of a change to a pre-configured lead

Regular leads

Regular leads are displayed in a list at the bottom of the result page. The structure of the leads themselves is the same as before, but they are now placed in leads.regular. A heading and at least one button is required for a lead to be displayed.

leads: {
  regular: [
    {
      heading: "Example heading text", // Required
      description: "Example description text", // Optional
      buttons: {
        // At least one button is required
        first: {
          text: "Click me!",
          onClick: () => window.open("https://econans.com", "_blank"),
        },
        second: {
          text: "Click me too!",
          onClick: () => window.open("https://econans.com", "_blank"),
        },
      },
    },
  ];
}

Configuration of a regular lead

Translations

Translations has been completely restructured and none of the translation keys from v1 are valid anymore. This means that you must update any translations added to your configuration object.

Read more about translations (including all the keys) here.

Tracking

If you utilize the onEvent() function to track events you will need to do some adaptions:

• The category parameter of an event has been renamed to source.
• All input fields has been renamed, so you might need to take that into consideration when analyzing the data.

Read more about tracking events here.

Calculation parameters

calculationParameters.CO2Conversions.electricityHouse has been renamed to calculationParameters.CO2Conversions.electricity.