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:
- Log in to Smartfit Analytics here using the username and password provided in the welcome email you received
- 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
- 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
cta you can customize the colors of all widgets.
Step 3: Add the loader script
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.
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:
This would then look like this on any individual product page when looking at the source code: