Skip to main content

Add global configuration

tip

You can use the Configurator to easily generate your global config.

info

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

<script>
  const OZ_CONFIG = {
    settings: {
      apiKey: "",
      language: "",
      primary: "",
      cta: "",
      text: "",
      background: "",
      buttonTextColor: "",
      roundness: "",
      units: "",
      unitsToggle: "",
      frameSizeDisplay: "",
      defaultGender: "",
    },
  };
</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.

info

You need the Ski Widget in one of the coming soon languages? Just add it as described above. The Widget will fall back to english, but as soon as we are releasing your desired language, you automatically have it. No changes on your end required.

Currently supported languages for the Ski Sizing are:

  • English: en (default)
  • German: de
  • German (formal): de-formal
  • French: fr coming soon
  • French (formal): fr-formal coming soon
  • Spanish: es coming soon
  • Italian: it coming soon
  • Chinese (Taiwan): zh-TW coming soon
  • Czech: cs coming soon
  • Danish da-DK coming soon
  • Dutch: nl coming soon
  • Estonian: et coming soon
  • Finnish: fi coming soon
  • Hungarian: hu coming soon
  • Japanese: ja coming soon
  • Norwegian: no coming soon
  • Polish: pl coming soon
  • Russian: ru coming soon
  • Swedish: sv coming soon
  • Swiss German: de-CH coming soon
settings:
  // more global config options …
  language: "de",
  // more global config options …
}

Measurement Units​

You can easily define if Online Sizing shows metric or imperial units or allow toggle between these units. Metric units are the default setting.

To enable imperial units, add this to your config:

settings: {
  // more global config options …
  units: "imperial",
  // more global config options …
}

Online Sizing units

To enable toggle between units, add this to your config:

settings: {
  // more global config options …
  unitsToggle: true,
  // more global config options …
}

Online Sizing units toggle

Colors​

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

Color Options

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 find my size 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 …
}

Default gender (optional)​

By default the Online Sizing widget starts with male preselected. To start with female as a default you can add this to your config:

settings: {
  // more global config options …
  defaultGender: "female",
  // more global config options …
}

Labels (optional)​

Launcher Label Show​

If you would like to change the standard text Find my size on the launcher button you can do that easily like this:

Launcher Label Show

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

Launcher Label Hide​

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

Launcher Label Hide

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

Confirm Size Label​

If you would like to change the standard text Select Size displayed on the confirm button in the result screen, you can do that easily like this:

Confirm Size Label

settings: {
  // more global config options …
  confirmSizeLabel: "Custom Confirm Text",
  // more global config options …
}

Size Unavailable Label​

If you would like to change the standard text Continue shopping displayed on the confirm size unavailable button in the result screen, you can do that easily like this:

Size unavailable Label

settings: {
  // more global config options …
  confirmSizeUnavailableLabel: "Custom Size Unavailable Text",
  // more global config options …
}
note

The size unavailable button will only show up, if you configured a callback function to check your product stock as outlined here.

Size Does Not Fit Label​

If you would like to change the standard text Continue shopping displayed on the size does not fit button in the result screen, you can do that easily like this:

Size Does Not Fit Label

settings: {
  // more global config options …
  confirmSizeDoesNotFitLabel: "Custom Does Not Fit Text",
  // more global config options …
}