Add global configuration

info

The global config is set once for all our widgets (Online Sizing, Recommendation Engine, Geometry Display) to work on your site and for the appearance of the widget. The config is a plain JavaScript object and looks like this::

tip

If you already use the Online Sizing Widget you can skip this step.

If you want to use only the Geometry Display widget the following config options apply to the widget.

Options

<script>
  const OZ_CONFIG = {
    settings: {
      apiKey: "",
      language: "",
      primary: "",
      cta: "",
      text: "",
      background: "",
      buttonTextColor: "",
      roundness: "",
      frameSizeDisplay: "",
    },
  };
</script>

Example

<script>
  const OZ_CONFIG = {
    settings: {
      apiKey: "YOUR_API_CODE_HERE",
      language: "de",
      primary: "hsl(187, 74%, 70%)",
      cta: "rgb(150, 186, 50)",
      buttonTextColor: "#FFF",
      roundness: "2px",
    },
  };
</script>

important

These options will be applied to every widget (if you set up multiple widgets on one page). Options you set here can be overridden by local options you set directly on the widget.

API Key

Enter the API_KEY from the previous step here.

settings: {
  apiKey: "YOUR_API_KEY_HERE",
  // more global config options …
}

Language

Set the language for all the widgets on your site. if language config option is not set, the widget will load English as default language.

Currently supported languages are:

• Chinese (Taiwan): zh-TW
• Czech: cs
• Danish da-DK
• Dutch: nl
• English: en (default)
• Estonian: et
• Finnish: fi
• French: fr
• German: de
• German (formal): de-formal
• Hungarian: hu
• Italian: it
• Japanese: ja
• Norwegian: no
• Polish: pl
• Russian: ru
• Spanish: es
• Swedish: sv
• Swiss German: de-CH

settings:
  // more global config options …
  language: "de",
  // more global config options …
}

Colors

To align Online Sizing with your brand perfectly you currently have the following color variables at your disposal:

The color values can be any format accepted by normal CSS: #ffd868, rgb(150, 186, 50), hsl(187, 74%, 70%), …

This is what your config might look like:

settings: {
  // more global config options …
  primary: '#79DDEB',
  cta: 'rgb(150, 186, 50)',
  text: 'black',
  background: 'rgba(0, 0, 0, 0.5)',
  buttonTextColor: '#fff',
  // more global config options …
}

Info

The buttonTextColor and cta attributes affects both the cta button inside the widget and the default widget button.

Roundness

It's also possible to adjust the overall roundness of the widget. The default roundness/corner radius is based on 8px. The roundness value can take any valid CSS value: px, em, etc …

To override this add the following option to your settings:

settings: {
  // more global config options …
  roundness: '2px', //
  // more global config options …
}

Labels (optional)

Launcher Label Show

If you would like to change the standard text Show geometries on the launcher button you can do that easily like this:

settings: {
  // more global config options …
  launcherLabelShow: "Custom text",
  // more global config options …
}

Launcher Label Hide

If you would like to change the standard text Hide geometries on the launcher button you can do that easily like this:

settings: {
  // more global config options …
  launcherLabelHide: "Custom close button",
  // more global config options …
}