Custom Button Integration

Our default sizing button is a convenient to get up and running fast, since it comes pre-packed with styles and customization options.

But since that button is a widget in itself it also comes with limitations. This guide will show you how to hook up the Online Sizing widget with your totally custom button.

Step 1: Follow Getting Started Guide

Please make sure you followed steps 1-3 outlined in the Getting Started Guide.

Step 2: Setup your custom button

Now that you have the configration setup with API key and that good stuff, we can get to the custom button integration.

A custom button can be any HTML element you'd like it to be, though we'd suggest a regular <button> element, like this:

<button id="my-custom-oz-button">
What's my size?
</button>

Now let's add the necessary infos to that button:

<button
id="my-custom-oz-button"
class="oz-trigger"
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"
data-oz-fullscreen="true"
>
What's my size?
</button>
note

Please make sure to add the class oz-trigger to your button element, so the OZ loader can find your button.

The data-oz-fullscreen="true" controls wether the sizing widget will open in an overlay or as a regular element in the page flow. If you'd rather show Online Sizing directly on your page instead of the default fullscreen overlay, go ahead a remove that data attribute.

Step 3: Checking if the product code exists

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 Events and Callbacks section of the docs.