Seamlessly Integrate 3D Measure Up’s Photo to Size Tool with Your WIX-Based Site
Seamlessly Integrate 3D Measure Up's Photo to Size Tool with Your WIX-Based Site Objective 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. Integration Steps: 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: Top Navigation Bar. Left Side menu. Product Page. Home Page. Two widgets need to be added to your website Widget to capture user measurements Widget to recommend size Adding Capture Measurements Widget to the 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 Click on preview from editor. Go to the home page. Click on the “Get Measurement” button. It will redirect you to the photo to size page in the new tab. 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')); Conclusion 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
