Configuration¶

This document describes the API options for configuring the Choozr Size Recommendation Service integration.

BasicsMinimal Example

/* (1)! */window.choozr = new Choozr(options/* (2)! */);

While this example uses window as the main namespace, you are free to use whatever scope works best.
Options is an object that contains keys defined below

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

Options¶

The following options are available when initializing the Size Recommendation Service:

Option	Type	Description	Required
storeId	string	The unique identifier for your store, available in the TailorGuide Dashboard	Yes
product	ProductObject	An object containing product details.	For size-recommendation
target	string \| HTMLElement	The target element to inject the recommendation.	Yes
fontColor	string	The font color of the link text.	No
fontSize	string	The font size of the link text.	No
brandName	string	The brand name to be displayed.	No
brandLogo	string	The URL to the brand logo.	No
backgroundImage	string	The URL to the background image.	No
primaryColor	string	The primary color of the recommendation box.	No
languageCode	string	The language code for the recommendation.	No
type	"size-recommendation" \| "measurements" \| "pictures"	The type of integration to use. Defaults to "size-recommendation"	No
autoInit	boolean	Whether to automatically initialize upon instantiation.	No
tailorId	string	The unique identifier for the tailor. Only used with the "pictures" integration type.	No
meta	MetaObject	A meta object containing additional information. Only used with the "pictures" integration type.	No
logLevel	"info" \| "debug" \| "error" \| "warn"	Set the log level for the script (defaults to "info")	No
onInit	function	A callback function called when the integration is initialized.	No
onLoad	function	A callback function called when the integration has loaded.	No
onRecommendation	function	A callback function called when the size recommendation is given.	No
onMeasurements	function	A callback function called when the user sends their measurements.	No
onPictures	function	A callback function called when the user sends their pictures to a tailor.	No
onError	function	A callback function called when an error occurs.	No
onMoreInfo	function	A callback function called when the user clicks for more information.	No
onCloseMoreInfo	function	A callback function called when the user closes the more information popup.	No

ProductObject¶

The configuration details on either fetching the product data from the page using various different DataFetchObject options, or as recommended, by adding the details as static strings. For example, when using a template engine on an online store, those can be added to the code directly as escaped strings.
This data is used to fetch the correct size chart from the Choozr cloud.

Option	Type	Description	Required
sku	DataFetchObject \| string	An object containing a DataFetchObject or string for the product's SKU.	For size-recommendation
product	DataFetchObject \| string	An object containing a DataFetchObject or string for the product's name.	No
brand	DataFetchObject \| string	An object containing a DataFetchObject or string for the product's brand.	No
category	DataFetchObject \| string	An object containing a DataFetchObject or string for the product's category.	No
chart	DataFetchObject \| string	An object containing a DataFetchObject or string for the product's size chart identifier.	No

Info

For the service fees to be calculated correctly, the SKU is mandatory and must be set correctly if using "size-recommendation" as the type.

DataFetchObject¶

Option	Type	Description	Required
type	string	The type of data fetching method to use (one of "querySelector", "dom", "xpath", "ldjson", "dataLayer").	Yes
selector	string	The selector used to define where the data is fetched from (e.g., querySelector selector or XPath query).	Yes
trim	boolean	Whether to trim whitespace from the fetched data (optional).	No
regex	string	A string to select parts of the text (optional).	No
extract	string	The method to fetch data from the element value or attribute when the type is "dom" (either "text" or "attribute").	No

MetaObject¶

The meta-object can be used to send detailed information about the user from the online store to Choozr. This can for example be details about the user that will be visible in the TailorGuide Dashboard, such as name, email, customer ID, or other details that help the tailors identify the user. Using this feature is optional but highly recommended for the "pictures" integration type to ensure you can identify anonymous Choozr users.

Option	Type	Description	Required
name	string	A string containing some human-readable identifier of the user. This is visible in the listing of users in the TailorGuide Dashboard.	No
custom	any	A custom field that can contain any data type and any data. The contents are visible in the TailorGuide Dashboard and this field can also be used programmatically when accessing the backend API. We recommend using an object for this field.	No

Customizing Visuals¶

You can customize the look and feel of the integration by providing the following options:

fontColor: font color of the link text
fontSize: font size of the link text
brandName: brand name to be displayed in the larger popup
brandLogo: URL to brand logo in the larger popup
backgroundImage: URL to background image shown as the splash screen and to the left side on larger screens
primaryColor: primary color of the recommendation box

JS API Calls¶

You can make the following API calls to the integration:

remove(): removes the recommendation view from the page
reload(): reloads the integration
purchaseComplete(skus[]): event when a purchase has been completed, passed an array of product SKUs that match the SKUs used in the size-recommendation integration. If the product has variations, use the base SKU. e.g. "shirt-abc" instead of "shirt-abc-red".

Example Calls¶

Example:

choozr.purchaseComplete(
    ["1234", "1337", "shirt-abc"] // List of all SKU's in the order
);