WEB SDK / API Set up in Webflow

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.

MOBILE APP ā†’

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).

ā† MOBILE APPVIRTUAL DRESSING ROOM ā†’

Reading the setup guide, there is nothing to make me think that this would not be possible with Webflow. However I would need to understand more about what you plan on doing with the Fision library once initialised on your web page.

Also if you are going to go down this path you will need a developer who understands Webflow and setting up this sort of thing. They arenā€™t always easy to come by.

Thanks for getting back to me

This is the platform. The intention initially will be only to capture the clients/visitors measurements once they are taken through the app the client/visitor downloads.

Down the line on the roadmap will be to build in a 3D model that will capture the body. Essentially creating a 3D model with their body image.

With that, the next step would allow a visitor to choose fabrics, design and customize/personalize their garment.

Again the early stages of this will be only to capture their measurements.

Below is the link to the firm with the software/application.

https://www.meepl.com/

Again thanks for the quick response

I think what you are wanting to build would be possible to do with Webflow. Whether or not you should do it with Webflow is another question. IMO Webflow is excellent for building websites, but web apps are best left to proper frameworks where you can control versioning and deployment better. I wrote a whole article on this topic here in case it interests you or your developers.

1 Like

According to this https://www.meepl.com/solutions/virtual-dressing-room. You should be able to do all this on their platform. The only thing you probably have to do in Webflow is to add an Iframe embed that they provide, but to be sure we need more information about the iframe component.

Oh right if you are planning to iframe the whole thing then no worries. Webflow will work just fine.

Iā€™ve got a question as to why an API is even a thing for HTML + CSS and web technology? All systems using HTML + CSS would be easily communicable if respecting the underlying technology.

Application programming interfaces(API) are pretty useful for websites and PWAā€™s. :blush: Without them, you would have no clear way to get data you want to use on the frontend from the backend.

Letā€™s say you want to make a website that displays the current weather. Without an API you would have to make your own backend server and set up all the weather masts. With an API from Openweather, they do all that work, but you are still able to get all the data from their backend and play with it so it fits your needs.

With an iframe you donā€™t get the same flexibility. Yes you can show it to the user, but you canā€™t get the data nor change any html and css inside it, because all that resides on another domain. ( check cross-site scripting/XSS for more)

1 Like

The only APIā€™s I have respect for in terms of being actual tools are ones implemented before the coinage of the abbreviation and are direct connections to the software. Maya 3.0 - (till autodesk) is the only one I can think of that was conceived an implemented by genuine computer scientists, and in iteration is the only one being used in anger for production. It is called MEL and Maya was conceived to solve problems rather than make money directly. It won an Oscar.

1 Like

We donā€™t that is the problemā€¦

And that is why APIā€™s exist :). Just like MEL allows users to program scripts that solves problems inside of Maya. APIs allow web services to connect to other web services that together solves a problem. APIs like Stripe and Algolia pop into my mind. Webflow Ecommerce is built with Stripe. Zapier is built on 1000+ APIs.

The thing is that all servers and databases are coded with different data and logic. Web technology canā€™t access these servers and databases, if there is no public route to it. The API is developed by the developers to be this public route.

Perhaps you could use your knowledge to help the OP?

Hi @shawnjudge ,

Did you figure out how to embed meepl into your webflow template? Trying to launch a similar made to measure e commerce store and would love to do it in webflow