Getting Started Guide

Welcome to the Getting Started Guide!

This guide shows you how to get up and running quickly and how easy it is to integrate Online Sizing into your platform.

Step 1: Obtain your API Key and whitelist domains

The Online Sizing widget authenticates against our API using an API token. To get your token please follow these steps:

  1. Log in to Smartfit Analytics here using the username and password provided in the welcome email you received
  2. You should be redirected to OzApi Detail which is the first of two tabs on that page. From there use the eye icon to show the Api-Key and copy that
  3. Then switch to the second tab and add all the domains on which you would like to you the Online Sizing widget.

Here's a quick demo how to use the Admin:

Step 2: Add global configuration

This is the place where you add all the infos which are the same for every widget on your site.

Using the color keys primary and cta you can customize the colors of all widgets.

<script>
const OZ_CONFIG = {
settings: {
apiKey: 'YOUR_API_KEY_HERE',
container: "my-sizing-container", // the ID of your empty target element, which will then contain the generated iframe element
primary: 'hsl(187, 74%, 70%)', // colors can be any format accepted by css. Hey, rgb, hsl, …
cta: 'rgb(150, 186, 50)',
}
};
</script>

Step 3: Add the loader script

Now we're adding the piece of JavaScript code that will read your config and setup a widget on every page where it finds an Online Sizing button.

This loader script can be located anywhere on your page but has to come after the config. Otherwise you will get a JS error telling you that OZ_CONFIG is undefined.

<script>
((win, doc, script, key, config, src) => {
win['___OnlineSizing'] = key;
win['___OnlineSizingConfig'] = config;
const js = doc.createElement(script);
js.id = key;
js.src = src;
js.async = true;
const scripts = doc.getElementsByTagName(script);
const lastScript = scripts[scripts.length - 1];
lastScript.parentNode.insertBefore(js, lastScript);
})(window, document, 'script', 'oz', OZ_CONFIG, 'https://staging-widgets.onlinesizing.bike/loader.js');
</script>

Step 4: Add the "find my size" button

Now finally for the fun part: We get to add the Find my size button which will open the widget.

This button is also a widget loaded in an iframe and has a bit local configuration:

  • data-oz-code: This takes the EAN/UPC product code of your bike. This can be the code of any of the frame sizes you are selling. For example the EAN code for the "XS" frame size. Our API will know which model you are looking for.
  • data-oz-title: The product title as it appears on your product page. You will usually use the same template tag to output this title as you're already using in the headline of your page.
  • data-oz-image: A full URL to the image of the bike which you would like to see in the widget. Typically the first of the product images.

You would set those config attributes using your usual template tags, for example Liquid tags:

<div
class="oz-container"
data-oz-widget="launcher"
data-oz-code="{{ product.ean }}"
data-oz-name="{{ product.title }}"
data-oz-image="{{ product.image.src }}"
></div>

This would then look like this on any individual product page when looking at the source code:

<div
class="oz-container"
data-oz-widget="launcher"
data-oz-code="8053323623809"
data-oz-name="Cinelli Veltrix Potenza Road Bike 2020"
data-oz-image="https://cdn.bike24.net/i/mb/a2/62/2d/301915-00-d-617909.jpg"
></div>