Hi, im looking at a possible new project with a Webflow template that I am hoping can work. Essentially it will be a plug in that will guide my visitors to their app to download and capture their measurement profile. I will then be able to access the measurement data.
I am not proficient nor even a classified as a beginner in code - SDK or API setup but the tech firm that I am potentially working with requires specific code to be embedded.
Does anyone know if this can work and the difficulty level of installing this type of API into a project?
I hope to switch everything over to webflow. Details from the app company are below.
Setting up the Web SDK
Using the Fision Web SDK you can integrate our products into web applications. In this guide we will show you how to do so.
Get your API Key
To use the Fision Web SDK you need to first obtain an API key. Please contact Fision AG via info@fision-technologies.com if you didnāt already get one. When you do please provide us with the following information for all pages where you want to integrate:
- your website URL
- protocol (http/https)
- port (if different from 80/443)
If you do local development you should also include information about your localhost setup.
Include the script
The Fision Web SDK is provided as a standalone script file which you should include in your website by placing the following script tag in the head tag of your html file:
<script type="text/javascript" src="https://web-sdk.fision.cloud/fision_sdk.js"></script>
After this script is loaded you will have access to the global FisionSDK
variable.
Initialize the SDK
Once your page has loaded you can initialize the SDK as follows:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var API_KEY = '<your_api_key_here>';
FisionSDK.initialize({
apiKey: API_KEY,
// ... other configuration
}).then(function(sdk_instance) {
// do stuff with the loaded sdk instance
});
});
</script>
Calling initialize loads all required dependencies and returns a promise. The returned promise resolves once the sdk has finished loading and returns an sdk instance. This is the object you can use to interact with our products. In the following sections we will explain the API of that object.
Extracting a Users Body Features
Using the Fision Web SDK you can request access to the body features of your current user.
Adding the āBody Profileā button
To request body features of a user you can add the āBody Profileā button to your web page like this:
FisionSDK.initialize(options).then(function (fisionSDK) {
fisionSDK.bodyProfileButton({
parentElement: document.getElementById('button_container'),
onBodyProfileReceived: function (bodyFeatures) {
console.log('Received bodyfeatures:', bodyFeatures);
},
onSignOut: function () {
console.log('The user has been signed out.');
},
});
});
The bodyProfileButton
-method will add the body profile button to the specified parentElement
.
Button action: overlay
- When the user clicks the button, an overlay will appear.
- If the user is not yet signed in he will be able to sign in to his meepl account or create a new meepl account.
- If the user has no body profile yet, he will be able to create one.
- The user will be asked to share his body features with your company.
Result
When the body features are available the onBodyProfileReceived
-function is called with the bodyFeatures argument. The body features will be available in JSON as you can see here:
{
"gender": "female" // possible value: 'female' | 'male' | 'other',
"bodyRepresentationURL": "http://somewhere/someobject.obj", // link to the 3D model of the user
"measurements": // object with measurement names as keys and their values (all values are numbers in cm (lengths) or degree (angles))
{
"bodyHeight": 174,
"innerLegLength": 68.85,
"waistCircumference": 86.86,
"armLength": 71.25,
"waistbeltCircumference": 88.3,
"chestCircumference": 91.7,
"hipCircumference": 95.81,
// ...
}
}
For a full list of available measurements and their definitions please contact support@fision-technologies.com.
Example: Custom Tailored Clothing Shop
The following is a demo of how this integration will work.
Custom Tailored Clothing Example
Deprecated: Requesting Body Features
To request body features of your user load the body profiler and request body features like this:
FisionSDK.initialize(options).then(function (sdk) {
return sdk.loadBodyProfiler();
}).then(function (body_profiler) {
body_profiler.getBodyFeatures()
.then(function (bodyFeatures) {
console.log('Received bodyfeatures', bodyFeatures);
})
.catch(function (error) {
console.error('An error happened while requesting the body features: ' + error);
});
});
getBodyFeatures
returns a Promise that resolves once the user has given your website access to his data (this might take a while).