Skip to main content

Add "Find my size" button

info

We now need to add the Find my size button which will open the widget. There are two different options to create that button.

  1. Our default button is a convenient way to get up and running fast, since it comes pre-packed with styles and customization options. This button is also a widget loaded in an iframe and has a bit local configuration

  2. A custom button can be any HTML element you'd like it to be, though we'd suggest a regular <button> element. The custom button can be fully customized.

Regardless of which button you choose, you must pass the following attributes.

  • data-oz-code: This takes the EAN/UPC product code of your ski. This can be the code of any of the sizes you are selling. For example the EAN code for the "178" size. Our API will know which model you are looking for.
  • data-oz-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.
  • data-oz-image: A full URL to the image of the ski which you would like to see in the widget. Typically the first of the product images.

Default button

This button will get its color (cta), roundness and label (launcherLabelShow) from the global configuration.

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

Custom button

This is how a custom button element can be set up. You can give it an own id and additional classes for styling.

<button
id="my-custom-oz-button"
data-oz-widget="ski"
data-oz-embed="custom"
data-oz-code="{{ product.ean }}"
data-oz-name="{{ product.title }}"
data-oz-image="{{ product.image.src }}"
data-oz-fullscreen="true"
>
What's my size?
</button>
.
important

At this point the widget should already work. But we're missing an important piece, which users of the ready made button get out of the box: Checking if the product code actually exists in our database.

To get this functionality, please follow the examples outlined in the Advanced Integration section of the docs.

Labels (optional)

info

Alternatively to override the default labels in the global configuration you can override options and labels for single widgets in the local button configuration. This might be handy if you have multiple widgets on your page.

Launcher Label Show

Launcher Label Show

If you would like to change the standard text Find my size on the launcher button you can do that easily like this:

<div ... data-oz-launcher-label-show="Custom text"></div>

Launcher Label Hide

Launcher Label Hide

If you would like to change the standard text Close Sizing on the launcher button you can do that easily like this:

<div ... data-oz-launcher-label-hide="Custom close button"></div>

Confirm Size Label

Confirm Size Label

If you would like to change the standard text Select Size displayed on the confirm button in the result screen, you can do that easily like this:

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

Size Unavailable Label

Confirm Size Label

If you would like to change the standard text Continue shopping displayed on the confirm size unavailable button in the result screen, you can do that easily like this:

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

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

Size Does Not Fit Label

Confirm Size Label

If you would like to change the standard text Continue shopping displayed on the size does not fit button in the result screen, you can do that easily like this:

<div
...
data-oz-confirm-size-does-not-fit-label="Custom Does Not Fit Text"
></div>