Seamlessly Integrate 3D Measure Up's Photo to Size Tool with Your WIX-Based Site

This document provides a comprehensive guide for seamlessly integrating 3D Measure Up’s Photo to Size application into WIX-based websites. This cutting-edge application revolutionizes the online shopping experience by allowing customers to obtain size recommendations through a simple photograph. The integration process outlined in this document is designed to enable website administrators and developers to implement the application’s functionality, ensuring that customers can easily capture or upload a photo using their device’s camera.

Upon successful integration, the application will analyze the photo to extract precise body measurements, which are then relayed back to the parent web application. These measurements play a crucial role in enhancing the customer experience by facilitating personalized size and fit recommendations for apparel and other size-sensitive products. By following the steps outlined in this guide, online stores and e-commerce platforms hosted on WIX will be able to offer a more tailored shopping experience, reduce the likelihood of returns due to sizing issues, and increase customer satisfaction and loyalty.

The ultimate goal of this integration is to harness the power of 3D Measure Up’s technology to bridge the gap between virtual shopping and personal fit, thereby elevating the online retail landscape to new levels of efficiency and personalization.

This document assumes that the theme used to build a Store in particular ….. theme. The widget to capture measurements can be placed on any page and the steps of integration will remain the same. You can choose the place of integration that suits your application’s UX design.

Some popular places to add the capture measurements widget are:

1. Top Navigation Bar.
2. Left Side menu.
3. Product Page.
4. Home Page.

Step 1: Go to the Wix Editor

Log into your Wix account and navigate to the Editor.

Step 2: Access the Home Page Settings

In the Editor, click on ‘Pages & Menu’ (located on the left side of the interface) > From the dropdown menu, select ‘Site Menu’. Then, choose the ‘Home Page’.

Step 3: Customize the Home Page

Once you’re on the ‘Home Page’, 

click on Add Element > Embed Code > Embed HTML

This will allow you to add or customize elements as per your needs.

You will now see the following window:

Step 4: Integrating the for capturing measurements

Add the following code snippet in the “add you code here” section and click on update. 

You will see a button like “Get Measurements” this on your selected page : 

<style>

    /* Styles for the popup */

    .center {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }

 

    body {

        overflow: hidden;

        /* Hide scrollbars */

    }

 

    #launchButton {

        background-color: #0074d9;

        /* Set the background color to a blue shade */

        color: #fff;

        /* Set the text color to white */

        padding: 5px 10px;

        /* Add some padding to the button */

        border: none;

        /* Remove the button border */

        cursor: pointer;

        /* Change the cursor to a hand pointer on hover */

        font-size: 20px;

        /* Set the font size */

        border-radius: 0;

        /* Remove border radius */

    }

</style>

<div class="center">

    <button id="launchButton">Get Measurements</button>

</div>

 

<script>

    // Button to launch the Photo To Measurement Web App

    const launchButton = document.getElementById("launchButton");

 

    function getToken() {

        return new Promise((resolve, reject) => {

            const tokenURL = "https://api-p2s.3dmeasureup.ai/domain-auth-token/";

            const xhttp = new XMLHttpRequest();

            xhttp.open("GET", tokenURL, true);

            xhttp.onreadystatechange = function () {

                if (this.readyState == 4) {

                    if (this.status == 200) {

                        const res = JSON.parse(this.responseText);

                        console.log(res.token);

                        resolve(res.token);

                    } else {

                        reject(new Error(`Error: ${this.status} - ${this.responseText}`));

                    }

                }

            };

            xhttp.send();

        });

    }

 

    // Event listener to launch and receive data from the Photo To Measure App

    launchButton.addEventListener("click", () => {

        getToken();

        const tokenURL = "https://api-p2s.3dmeasureup.ai/domain-auth-token";

        var xhttp = new XMLHttpRequest();

        xhttp.open("GET", tokenURL, true);

        xhttp.send();

 

        xhttp.onreadystatechange = function () {

            if (this.readyState == 4) {

                if (this.status == 200) {

                    const res = JSON.parse(this.responseText);

                    const childWindow = window.open(`https://app-p2s.3dmeasureup.ai/index.html?auth_handler=${res.token}`, '_blank');

                    // const childWindow = window.open(`http://127.0.0.1:6591/index.html?auth_handler=${res.token}`, '_blank');

 

                    // Listen for messages from the child window

                    window.addEventListener("message", (event) => {

                        if (event.origin === "https://app-p2s.3dmeasureup.ai") {

                            // Handle data received from the child window

                            const data = event.data;

                            if (data.status == false) {

                                launchButton.textContent = "Try Again...";

 

                                // Set a timeout to revert the text back to "Get Measurements" after 3 seconds

                                setTimeout(() => {

                                    launchButton.textContent = "Get Measurements";

                                }, 3000);

                            } else {

                                const measurement = {};

                                data.forEach(item => {

                                    // Convert label to lowercase and remove spaces

                                    const key = item.label.toLowerCase().replace(/\s/g, '');

                                    // Round length to 2 decimal places

                                    const value = Math.round(item.length * 100) / 100;

                                    // Assign key-value pair to the measurement object

                                    measurement[key] = value;

                                });

                                // Store data in session storage

                                sessionStorage.setItem('measurementData', JSON.stringify(measurement));

                            }

                        }

                    });

                    const parentURL = window.location.href;

                    childWindow.postMessage(parentURL, "*");

                } else if (this.status == 403) {

                    console.log(this.responseText);

                } else if (this.status == 500) {

                    console.log(this.responseText);

                } else if (this.status == 0) {

                    console.log("Request failed");

                }

            }

        };

    });

</script>

Step 5. Save the measurements

The above code saves the measurements to the session store. You can modify the code to push the measurements to a persistent database for reuse.

Step 6: Testing

1. Click on preview from editor.
2. Go to the home page.
3. Click on the “Get Measurement” button.
4. It will redirect you to the photo to size page in the new tab.
5. Click image as mentioned in the GUIDE section.

Now you can go to inspect the window and check measurements are saved in session storage. Or copy paste following code into console of inspect window: console.log(sessionStorage.getItem(‘measurementData’));

The integration of 3D Measure Up‘s Photo to Size application into WIX-based websites represents a significant advancement in the realm of online shopping, particularly for businesses that cater to apparel and other size-dependent products. By leveraging this innovative technology, online stores can offer their customers a highly personalized shopping experience, enabling them to obtain accurate body measurements with just a simple photograph. This not only enhances customer satisfaction by providing size and fit recommendations tailored to each individual but also reduces the rate of returns and exchanges due to sizing issues, thereby improving operational efficiency and sustainability.

Throughout this guide, we have outlined the step-by-step process required to integrate this application seamlessly into your WIX-based web platform. From setting up the initial framework to testing and deploying the application, each step has been designed to ensure a smooth and successful integration process.

As the online retail landscape continues to evolve, staying ahead of technological advancements and integrating solutions that add value to the customer experience is paramount. We encourage you to take the next steps in implementing 3D Measure Up’s Photo to Size application within your web ecosystem. By doing so, you will not only elevate your brand’s online presence but also set a new standard in personalized online shopping.

For further assistance, or technical support, or to schedule a consultation, please do not hesitate to contact our support team. Let’s embark on this transformative journey together, enhancing the way we shop online and setting new benchmarks for customer satisfaction and engagement.

For activation of the capture measurement widget, please contact us at:

photo-to-size@prototechsolutions.com or photo-to-size.3dmeasureup.ai