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:
Now let's add the necessary infos to that button:
Please make sure to add the class
oz-trigger to your button element, so the OZ loader can find your button.
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.