Integration
The Choozr Widget is the easiest way to integrate the Choozr application into your online store.
The available features include:
- giving size recommendations to the users
- receiving user measurements
- receiving pictures for tailors to the Choozr Dashboard.
The integration through this widget is done completely in the browser through JavaScript.
- Customizable to match your store's design
- Flexible data fetching options for product details
- Event listeners for various integration events
- JavaScript API calls for better control and tracking
Linking The Script¶
The injection script running on the online store is a small and efficient integration. With size recommendations, it gathers product meta details from the rendered web page using either XPath selectors, JS selectors, ld-json, or other means. With measurements and pictures, it simply forwards the data to your front-end.
The latest script can be linked from https://widget.choozr.ai/6.x.x/choozr.js
and included in your HTML file. The library also provides a types.d.ts
for TypeScript definitions.
- The version 6.x.x in this syntax is not just an example but an actual version path for the latest version 6 of the library.
Versioning¶
Choozr follows semantic versioning. It is highly recommended that the 6.x.x
path is used as it will always return the latest major version of the library without breaking changes. Alternatively, you can use 6.0.x
for the latest minor version.
While not recommended, there is also an option to link to a specific version, like 6.0.0
.
An up-to-date machine-readable list of all the versions is always available in versions.txt.
Subresource Integrity¶
As per the W3C SRI specification, all of the versions will be archived and locked at the time of building. The hashes for SHA-256, SHA-384 and SHA-512 are always available through https://widget.choozr.ai/$VERSION/sha$SIZE.txt
and can be securely fetched by the backend if the versioning is automated. Do not use SRI with floating versions, like 6.x.x
but only specific versions, like 6.0.0
.
<script
src="https://widget.choozr.ai/6.4.1/choozr.js"
integrity="sha256-z/9GEGAbpnq3DkQC8eiyMKsVGC/RfmUEMXWTVjTAZSY="
crossorigin="anonymous">
</script>
Warning
Since the hash can only be used with specific versions, you will not get any automatic updates.
Due to this, this feature is only recommended for companies where the security requirements explicitly require SRI to be enabled on all scripts.
A short overview¶
To set up the integration, include the script on your product page and create a new Choozr
instance with the required options.
Make sure to add the integration code after the script for the choozr.js
library code.
Examples¶
The following examples show the basic usage of the library. For more information about the options, please see the Configuration section.
window.choozr = new Choozr({
storeId: "demostore", // (1) ID of the store provided by Choozr
product: {
sku: { // (2)!
type: "xpath",
selector: "//*[@id='product-sku']",
trim: true
},
brand: "brand-name", // example of the brand name as configured statically
category: "product-category", // example of the category as configured statically
},
target: "#choozr", // target element to inject the recommendation, can be querySelector or DOM element
fontColor: "#000000", // font color of the link text
fontSize: "12px", // font size of the link text
brandName: "Brand Name", // brand name to be displayed
brandLogo: "https://example.com/brand-logo.png", // URL to brand logo
backgroundImage: "https://example.com/background-image.png", // URL to background image
primaryColor: "#FFFFFF", // primary color of the recommendation box
languageCode: "en", // language code for the recommendation
type: "size-recommendation", // type of integration to use ("size-recommendation", "measurements", "pictures")
});
- The ID is mandatory and is linked to the company account for service fees. To protect against misuse, the usage is limited through hostnames provided in advance by Choozr.
- SKU is mandatory with the integration type of "size-recommendation" for calculating service fees.
Integration Use Cases¶
You can use the same integration for multiple different use cases depending on your business needs. The general information about the integration is the same for all use cases, but the documentation for each use case is separate.
Please read the Linking The Script and other relevant sections for more information before going into the specific use cases.
- ** Size Recommendation**
Show recommendations based on measurements and a size chart.
Documentation - ** User Measurements** Allows users to send their measurements to your online store. Documentation
- ** Made-to-Measure** Allow tailors to receive pictures and measurements from users. Documentation
Preview¶
An example of how the widget looks by default can be seen below: