Size Recommendation Widget for Bikes Integration Guide
Introduction
This documentation is designed to guide you through the steps to integrate the Size Recommendation Widget into your online shop.
This widget is designed for a generic purpose and can be embedded into any online shop.
Prerequisites
- Access to modify the html code of your online shop.
- The unique Shop ID provided by us.
- You have shared the bike geometry tables with us in advance.
Integration Steps
1. Add code snippet for the script loader
Please add this code snippet to every page where you want to show a Get My Frame Size button.
Append the following code to the end of <body> tag within your HTML page:
<!-- Begin of Size Recommendation Widget loading -->
<!-- Place this block at the end of body -->
<div id='sizeezModal'
data-bikevariant = 'true'
data-shopid='<place your shop id here>'
data-language='<choose the language of the widget>'
data-ean='<enter the EAN for this product>'
>
</div>
<script type="module" crossorigin src="https://resources.sizeez.com/scripts/vrqrsolution/bundle-bike.js"></script>
<!-- End of Size Recommendation Widget loading -->
In the code snippet, set the values for the following parameters:
| Parameter | Description |
|---|---|
data-shopid | Enter the unique shop ID provided by sizeez |
data-language | Set the language for the widget. If no value is given, the widget will use English as default language. Currently supported languages are: English: en ; German: de |
data-ean | Enter associated EAN for this product. |
2. Add the "Get My Frame Size" button to your page
Please add this code snippet to every page where you want to show a Get My Frame Size button.
Insert the following code at the desired location of your HTML page to display the Get My Frame Size button:
<!-- Begin of Size Recommendation Widget button position -->
<!-- Place this block where the button should show up -->
<button id="sizeezButton">Get My Frame Size</button>
<!-- End of Size Recommendation Widget button position -->
3. Styling of the "Get My Frame Size" button
The Get My Frame Size button lives in the main DOM, and you can customize the button’s appearance using CSS or JavaScript and modify its inner text as needed. However, please do not change its type attribute (it must remain button) or its id (it must remain sizeezButton).