Introduction Last updated: 2019-06-01

The eStylar software is a solution that will help your users find their correct fit withiin your store in an easy and accurate way. Our solution can be easily installed in your shop, with a simple script. However, you can also further customize this integration to make it match your needs.

Easy integration guide

  1. Go to https://admin.estylar.com and create an account.
  2. In the products tab, create a new garment (give it a name and a SKU. If using any ecommerce platform, use the unique identifier they use to identify the garment as the SKU), click it, and upload it's sizes.
  3. Add the following lines to your garment's page:
    <script>
        window.ESTYLAR_CLIENT_ID = 'YOUR CLIENT_ID';
        window.ESTYLAR_SKU = 'GARMENT SKU'; // You should automate how yo get the SKU. If you used the id of your platform, you will probably have a way to get it from the location pathname or from the platform javascript API. Eg: window.location.pathname.split('product/')[1]
    </script>
    <script src="https://photo-estylar.sfo2.cdn.digitaloceanspaces.com/assets/shopify-script.js" ></script>

    Where YOUR CLIENT ID can be taken from https://admin.estylar.com and the GARMENT SKU is the one you used when creating it in the admin page.

  4. Repeat steps 2 and 3 for each of your garments. If you would like to automate this process, continue to Advanced integration
  5. The following popover will appear when you navigate to that garment's page:

    Figure 1: Popover shown on product page

    After scanning, the user will be returned to that same page and the following modal will appear, showing the user size:

    Figure 2: Modal show after the user scans

How it works

The estylar detector consists on 4 different microservices:
  1. The detection service (hosted at service.estylar.com)
  2. The detector QR scanner (hosted at qr.estylar.com)
  3. The detector API (hosted at backend.estylar.com)
  4. The detector admin (hosted at account.estylar.com)
The detection service and QR are where the real measurement process is done. The first one if the user comes from mobile and the second one if the users comes from desktop (it has a qr scanner for reading the qr that synchronizes the data sent between the integrator’s site and the detection process). Both services receive (in the url as query params) three parameters:
  • client_id: The integrator’s id. It can be gotten from the detector admin
  • callback: Where the user must return after the scanning process is done. It must be noted that this is the second part of the URL, the main host is gotten from the admin. Eg: if the callback url is : https://shop.estylar.com/product/1/white-curly-dress this parameter must be /product/1/white-curly-dress
  • user_id (OPTIONAL): if the user is logged in the integrator’s site, the internal user_id that identifies that user.

The detection service then gets some data from the client id (Eg: the main and secondary color, the logo, if it is active, if it has a predefined gender, etc) and starts the detector (after checking the user is not a robot with the recaptcha v3 from Google).

The detector first asks the user its height, weight (if the user is a recurrent one, these are preset) and gender (if the integrator does not have a predefined one). After the user has finished scanning, three scenarios are possible: there is no user_id present as a parameter in the URL; there is a user_id but it does not exist on the API; there is a user_id and it exists on the API. In the first case, the service generates a random user_id and it creates the user on the API. On the second one, it creates a user on the API with the provided user_id and in the third one, it simply gets the user from the API. In all the scenarios a measure object (the one returned from the detector) is uploaded to the API and the user’s last measurement is updated.

Finally, in the case of the mobile version, the user is redirected back to the callback URL provided (the combination of both ones) and, in the case of the qr, the user is prompted whether it wants to continue on the mobile or return to desktop (in both cases the data is sent via web sockets to the desktop showing the qr).

The detector API or backend is where all data is stored, showed and processed. All its endpoints are secured depending on the security level. It will be more detailed later in the documentation

The admin is were all tasks the integrator has to do are done. It has a login, a configuration page (where the integrator can set its logo, colors, callback, get its client_id, etc), a page to submit the clothes’ categories and subcategories and a page to submit the garments with its SKU and sizes.

Advanced integration

In many cases, the easy integration process is not enough for your use case or you would like to further customize how and when to call the eStylar scanner, or how it looks like. In these cases, an advanced integration could better suit your needs.

Prerequisites

Prior to start using the eStylar scanner, you must upload your garments and its sizes to our backend. To define garments and sizes, the integrator must go to the estylar’s admin page (admin.estylar.com) and login with its username and password or create an account if not done before. For uploading garments, you must go to products tab, click on the plus icon and fill 3 things:

  • Cloth name:a name for easy identification by the integrator of the garment
  • Cloth SKU:all clothes must be uniquely identifiable, so we use the sku for that purpose. It can be the id used on the integrator’s site to identify the garment.

For creating sizes, you must first click on the garment for which you want to add the sizes, then click on the plus icon at the top right corner of the size table on the product detail page. Then, you must fill the size code (eg: XS, S, M or L) for each of the measures of the garment (eg: bust, waist and hip). If a measure must not be taken into account for checking the correct size or no info is available for that measure, leave it with 0 (zero). If a change in units is wanted it must be done on the setup page.

If you have multiple garments that use the same sizes, you can upload a size chart under the sizecharts tab. Click on the upload icon and give it a name. After it is created, click on it and it will take you to a page where you can add the different sizes for that sizechart the same way you would do for a garment.

Afterwards, go to the garment detail page (by clicking on a garment) and click on the "Search sizechart" button. Then find the sizechart the garment belongs to and click on it, and it will automatically populate the sizes with the ones of that sizechart.

Scanning Process

The first thing to do is to create a script tag like this:

<script src="https://photo-estylar.sfo2.cdn.digitaloceanspaces.com/assets/estylar-integration.js"></script>

The next steps involve creating a button or link or anything clickable (in the place where the integrator would like the “Check my size” button to appear) with a unique id. Styling the button must be done by the integrator with the style it wants, the only requirement is that the button must have a unique id.

<button id="estylar-integration-button">Check my size</button>

Finally you must call a function named “EstylarIntegration” that takes an object with 4 properties:

  • client_id: The integrator’s id. It can be gotten from the detector admin
  • callback: Where the user must return after the scanning process is done. It must be noted that this is the second part of the URL, the main host is gotten from the admin. Eg: if the callback url is : https://shop.estylar.com/product/1/white-curly-dress this parameter must be /product/1/white-curly-dress
  • button_id: the id of the button that will fire the scanning process.
  • user_id (OPTIONAL): if the user is logged in the integrator’s site, the internal user_id that identifies that user. It could be his email or a database id.
<script >
        EstylarIntegration({
                client_id : '5d2cd7eb4876b2001673690c',
                callback :'/product/madewell-silk-red-dress', // It could be window.location.pathname for simplicity
                user_id :'example@example.com',
                button_id :'estylar-integration-id'
        })
</script>

From now on, each time a user access the integrator’s site, the scripts perform a query to the estylar API to check if the user agent is a correct one (if it is mobile access). If it is, and it is mobile, whenever the user clicks the button it redirects it to the estylar service (service.estylar.com) with the corresponding parameters. If it is desktop, it shows a modal with a qr that the user can scan to be redirected to the detector qr site (qr.estylar.com) and synchronizes the data shared between mobile and desktop with web sockets.

Customization

At the moment of writing this documentation, just four things can be customized on the detector: the detector's primary color, secondary color, logo and font. All four attributes must be changed on the admin site (admin.estylar.com) on the setup tab.

If, by any chance, something is not working on the detector or you want to disable it, it can be done on the same configuration page on the setup page, by toggling the 'enabled' toggle.

Results

When the user has finished the scanning process it will be redirected (no matter where it came from, desktop, qr, mobile) to the callback url combination between the integrator uploaded one on admin.estylar.com and the one provided on the “EstylarIntegration” javascript function. However, an additional get query parameter will be sent with the redirect: the user_id. This will match the user_id sent on the “EstylarIntegration” function or it will be a brand new one if none is present. Keep this user_id as it will be used for checking things like size or measures.

For getting the user size for a specific garment you must make a get request to the following url: https://backend.estylar.com/api/match with three parameters:

  • client_id: the integrator’s id that can be get from the configuration tab on the admin page
  • user_id: the use id returned by the detector once it has finished the scanning process.
  • sku: The garments’ sku (the same that was used when creating it on the admin). It must uniquely identify a garment for it to work.

This get request will return the following object:


{
	"success": true,
	"data": {
		"sizeCode": "M", 
		"waist": 60,
		"hip": 90,
		"bust": 90,
	}
}
					

If a 400 error (Bad request) is returned the object will be a message with the error found.