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 TailorGuide 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.

Recommended

<script src="https://widget.choozr.ai/6.x.x/choozr.js"></script><!-- (1)! -->

1. 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.

Changelog

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.

With SRI

<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.

MinimalSize Recommendation and StylingMade-to-Measure / Measurements

window.choozr = new Choozr({
    storeId: "demostore", // ID of the store provided by Choozr
    product: {
        sku: "1234"
    },
    target: "#choozr", // target element to inject the recommendation, can be querySelector or DOM element
});

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")
});

1. 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.
2. SKU is mandatory with the integration type of "size-recommendation" for calculating service fees.

window.choozr = new Choozr({
    storeId: "demostore", // ID of the store provided by Choozr
    target: "#choozr", // target element to inject the recommendation, can be querySelector or DOM element
    type: "pictures" // for user measurements without pictures, use "measurements"
});

Configuration Documentation

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:

Code Examples in GitHub