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) to work on your site and for the appearance of the widget. The config is a plain JavaScript object and looks like this::

Options

<script>
  const OZ_CONFIG = {
    settings: {
      apiKey: "",
      language: "",
      primary: "",
      cta: "",
      text: "",
      background: "",
      buttonTextColor: "",
      roundness: "",
      units: "",
      unitsToggle: "",
      frameSizeDisplay: "",
      defaultGender: "",
    },
  };
</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
• French (formal): fr-formal
• German: de
• German (formal): de-formal
• Hungarian: hu
• Italian: it
• Japanese: ja
• Norwegian: no
• Polish: pl
• Portuguese: pt
• Russian: ru
• Spanish: es
• Swedish: sv
• Swiss German: de-CH

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

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

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

Frame Size Display Format

By default, Online Sizing displays the results in format defined by the Manufacturer. So for example: L, 48cm, etc …

You also have the option to always display results in numerical format (i.e. 48cm). If for some reason, we don't yet have the numerical size in our database, the result will show in manufacturer format as a fallback.

To enable numerical display of result, add this to your config:

settings: {
  // more global config options …
  frameSizeDisplay: "numerical",
  // 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 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:

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:

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:

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:

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:

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