Add Widget

info

We now need to add the widget code which will open the widget. This is a server side rendered custom html element.

There are three different options for the code.

Default Sizing Button is a convenient way to get up and running fast, since it comes pre-packed with styles and customization options in the Smartfit Analytics backend.
Custom Sizing Button is fully customizable and meets the highest design standards.
Custom Sizing Button with Fallback is the same as the custom sizing button but additonally shows a fallback element of your choice if the sizig widget can't be loaded.

Regardless of which code you choose, the following attributes are mandatory. You would set those config attributes using your usual template variables, for example Liquid tags:

name: 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.
global-id: 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.
variant-id: Unique product identifier that must be the same identifier used in the feed for that product.
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.
price: The price of the product formatted as a floating number. This is necessary for the Recommendation Engine to work at its best.
product-type: This information is necessary to control which features the widget can offer. Possible values are: Bike, Ski

The following attributes can also be passed optionally.

id: Assign an ID to the widget to make it easier to select it afterwards.
lang: To specify a fix language for the widget. Otherwise the language will be set based on the browser language.
workflow: If we have set up a custom workflow for you you can specify the workflow to be loaded here by the workflow name.
styleName: If we have set up a custom style for you you can specify the style to be applied on the widget here by the style name.

important

The widget should only be loaded on relevant product pages. This can be achieved e.g. with a condition that checks if the product belongs to a certain category or is of a certain type. The condition is individual and depends on the conditions given in the online shop (e.g. categories, product types etc.).

Default Sizing Button
Custom Sizing Button
Custom Sizing Button with Fallback

<!-- Add a condition so that the widget code is loaded only on relevant product pages. -->
<oz-widget  
  name="{{ Product title variable }}" 
  global-id="{{ Product GTIN variable }}" 
  variant-id="{{ Product Variant-ID }}" 
  image="{{ Product image url }}"
  price="{{ Product price }}" 
  product-type="Either Bike or Ski"
>
</oz-widget>

<!-- Add a condition so that the widget code is loaded only on relevant product pages. -->
<oz-widget  
  name="{{ Product title variable }}" 
  global-id="{{ Product GTIN variable }}" 
  variant-id="{{ Product Variant-ID }}" 
  image="{{ Product image url }}"
  price="{{ Product price }}" 
  product-type="Either Bike or Ski"
>
  <button style="visibility: hidden" class="custom-btn"></button>
</oz-widget>

<!-- Add a condition so that the widget code is loaded only on relevant product pages. -->
<oz-widget  
  name="{{ Product title variable }}" 
  global-id="{{ Product GTIN variable }}" 
  variant-id="{{ Product Variant-ID }}" 
  image="{{ Product image url }}"
  price="{{ Product price }}" 
  product-type="Either Bike or Ski"
>
<!-- The element that is shown if the widget cannot be loaded -->
  <a href="#">Your fallback element</a>
  <!-- The template tag must be the direct parent of the button element! -->
  <template>
    <button class="custom-btn"></button>
  </template>
</oz-widget>

Widget code​

Widget code