Initialization

The widget is available in two formats: EcmaScript module (ESM) and IIFE. ESM provide a default export of the widget and is used/loaded with Ecmascript imports, while the IIFE will automatically inject the widget in the window object when loaded.

Chose the bundle format suitable for your context. However, we highly encourage to use ESM if possible due to its seamless Typescript integration which will make the implementation and future updates easier and safer.

For instructions on how to initialize the widget via CDN, contact us at hello@econans.com.

EcmaScript module

1. Import the widget

import EconansGreenHousing from "@econans/green-housing";

2. Provide an HTML element for the widget to mount in

<div id="econans-green-housing"></div>

3. Run the mount() function with the selector of the HTML element as an argument

EconansGreenHousing.mount("#econans-green-housing");

4. (Optional) Provide a custom configuration object as the second argument to the mount() function

EconansGreenHousing.mount("#econans-green-housing", {
  exampleParameter: "Example value",
});

See Configuration for details about what parameters that can be applied.

IIFE

1. Load the widget

<script src="./some-path/econans-green-housing.iife.js"></script>

2. Provide an HTML element for the widget to mount in

<div id="econans-green-housing"></div>

3. The widget is available as window.EconansGreenHousing after the IIFE file has loaded. Run the mount() function with the selector of the HTML element as an argument. Remember that you also must ensure the file has been loaded before trying to access the window variable.

EconansGreenHousing.mount("#econans-green-housing");

4. (Optional) Provide a custom configuration object as the second argument to the mount() function

EconansGreenHousing.mount("#econans-green-housing", {
  exampleParameter: "Example value",
});

See Configuration for details about what parameters that can be applied.