Size Recommendation Widget 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. If your shop operates on Shopify, Shopware, Magento, or Squarespace, it is recommended to review the platform-specific integration guides.
Prerequisites
- Access to modify the html code of your online shop.
- The unique Shop ID provided by sizeez.
- Access to sizeez Admin Portal to create and manage Size Charts.
Integration Steps
1. Add code snippet for the script loader
Please add this code snipppet to every page where you want to show a Get Size Recommendation 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-shopid='<place your shop id here>'
data-language='<choose the language of the widget>'
data-sizingchartid='<enter the size chart id for this product>'
data-countrycode='<optional: enter the country code used for this size chart>'
>
</div>
<script type="module" crossorigin src="https://resources.sizeez.com/scripts/vrqrsolution/bundle.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-sizingchartid | Enter associated size chart ID for this product. You can easily copy this information from the sizeez Admin Portal. |
data-countrycode | Optionally, enter the country code used for this size chart |
2. Add the "Get Size Recommendation" button to your page
Please add this code snipppet to every page where you want to show a Get Size Recommendation button.
Insert the following code at the desired location of your HTML page to display the Get Size Recommendation button:
<!-- Begin of Size Recommendation Widget button position -->
<!-- Place this block where the button should show up -->
<button id="sizeezButton">Get Size Recommendation</button>
<!-- End of Size Recommendation Widget button position -->
3. Styling of the "Get Size Recommendation" button
The Get Size Recommendation button lives in the main DOM, and you can tailor its look and feel using standard CSS or JavaScript.