The API credentials provided to you upon signup.

var onlineSizing = {
    api: {
        username: "YOUR_ID",
        password: "xxx"

This is the Product Title as it appears in your Product Page. Usually you set this with a template tag provided by your platform.

var onlineSizer = {
    bikeName: "{{ product.getTitle() }}"

The URL of the bike image to appear on the result screen of the OnlineSizer Widget. Uses the main product image in this example.


Product Code as either EAN, UPC or Manufacturer SKU.

Please provide this as a string. If provided as an Integer leading zeros will be truncated and the product codes becomes invalid.

Please check the "Manufacturers" page to see which code type we have available for which manufacturers. We will always use the official EAN, UPC and SKU of the bike manufacturer.

Please note: In some cases the "parent article", which holds all the bike's variants (size/color combinations), does not have a product code assigned – since it's not a physical product. If that's the case in your setup, please use any of the variants product code. For example from the smallest variant.


Type of product you're sending. Can be either:

  • 1 for EAN
  • 2 for UPC
  • 3 for SKU

If you don not provide the code type, we will attempt to auto detect it.


The OnlineSizer Widget URL contains your individual ID (YOUR_ID) and the language in which you would like to display the widget.

Currently the following languages are supported:

cs, da, de, de-formal, en, es, fi, fr, it, nl, pl, pt, ru, sv

The widgetUrl looks like this then:

// for German (de)
xhr-onlinesizer.html // Informal, "Du" // Formal, "Sie"

// for any other language

You will have received your specific OnlineSizer Widget URL upon registration.

Please note: Please note that Online Sizing will only work on the domains registered with us (including local dev domains).


A callback function which will be executed as soon as the first call to the Online Sizing API is successful, which means that the product code was found in our database and Online Sizing is ready to go.

You might, for example, use this to show/enable a previously hidden "Find your size" button.


Same as productCodeFound but the other way around :)

This function will be executed when the product cannot be found in our database.


Define a custom selector to trigger the onlineSizer widget.

Default: #trigger-onlineSizer.

Example: .my-custom-trigger-class


When set to "false", the body data entered by the user will not be stored in the Browser's Session Storage.


When enabled, the tag will receive an "overflow: hidden;" css statement, so the page covered by the Online Sizing overlay will not scroll.


Define a callback function which will be triggered when the user clicks on the finish button on the result screen.

A common usecase for this, is to select the recommended bike size in your product variant picker. Please see the example in the "Getting Started" guide.


Custom text to show on the finish button.


Define a callback function of your own, which will be executed when the "No size fits" button on the result screen is clicked (which shows when the users body data fits no frame size).

The onlineSizer widget will close and reset in any case. If you provided a custom function here, that will execute as well.


Custom text on the "No size fits" button.


Define a callback function to check if the sizing result - which is going to be presented to the user - is in stock and available for purchase.

The passed parameter "result" includes the size label, for example "L" or "56" and the EAN code of that product. Your function should return true (product is available) or false (product is sold out).


Define a callback function of your own, which will be executed when the "Show alternatives" button on the result screen is clicked.

This button is shown, only when your shop tells the Online Sizing Widget that the result variant size is not on stock via the "soldOut.checkAvailability" callback function.


Custom alternative button text like "Show alternatives, Show me other bikes in my size, ... etc."


Enables split testing for the Online Sizing widget. When enabled, the following routine will be performed before initialization:

  1. Check if split testing is enabled.
  2. Check if there's a session storage item onlineSizingSplitTest with either OZ_ENABLED or OZ_DISABLED for the value.
  3. If so, that user is already part of the split test.
  4. If not, we'll flip a coin (50% chance) and set the session storage flag.
  5. We'll use the value to either enable or disable Online Sizing for that user; and also make sure the experience is consistent on subsequent page views (If that user saw Online Sizing on a previous product detail page, she/he should see it again).

To add the split test information to a conversion (on the checkout success page), there will a couple session storage items you can use in i.e. Google Tag Manager:

  • onlineSizingSplitTest: Either OZ_ENABLED or OZ_DISABLED.
  • onlineSizingOpened: Will be true when user actually opened the Online Sizing Widget (click the "Find my size" button). If not, the item will not be present.
  • onlineSizingSessionId: That user's session ID. Will be set on the first initialization of Online Sizing on any product detail page. Will not be set if user is in the OZ_DISABLED split test group.
  • onlineSizingData: Will contain the user's data when she/he clicked through to the Online Sizing result screen.

Define a callback function of your own, which will be called if the user gets the OZ_DISABLED flag and won't see Online Sizing.

You could – for example – show an old school sizing table.


Can be set to either metric or imperial. Defaults to metric.


When enabled, a tiny toggle switch will appear above the body height slider on the first screen. Users can then decide for themselves if they want metric or imperial system.


Turns on all available JavaScript console output for debugging purposes


This option allows you to skip the usual, automatic initialization of the Online Sizing widget.

This might be useful if, for example, you'd like to load the onlinesizing.js script when you bootstrap your single page application, and then provide the bike infos later.

In this case you can provide a minimal config like this:

var onlineSizer = { 
    manualInit: true

… and then add all the other config options later.

After adding all the config options you can run the globally exposed function window.onlineSizerInit() to init Online Sizing.


set this option to "female" to preselect Women as the default gender when the widget opens.