Local Button Configuration Options

note

Work in progress: Config options might change/update quickly. Please expect changes until we're out of the testing phase.

After settings global config options like your API Key we can now configure the product specifics on the find my size button directly.

Minimum Button config

As outlined in the Getting Started Guide, the basic configuration of a find my size button looks like this:

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

As you can see, we provide the button with:

  • The Product Code (which can be either EAN, UPC or even your own flavour of an SKU)
  • The Name/Title of the bike (this is typically the same template tag in your product page which also renders the <h1>)
  • An Image URL (Typically the first image in your product's image gallery)

Custom Buttons Text

If you would like to change the text displayed on the buttons in the result screen, you can do that easily like this:

<div
...
data-oz-confirm-size-label="Custom Confirm Text"
data-oz-confirm-size-unavailable-label="Custom Size Unavailable Text"
></div>
note

The size unavailable button will only show up, if you configured a callback function to check your product stock as outlined here.

Default Gender

If you would like to preselect female in the first screen of Online Sizing, you can do that like this:

<div data-oz-default-gender="female"></div>