@wannaby/wanna-ui

WANNA 3D Viewer for Handbags

WANNA 3D Viewer for handbags was specifically crafted to answer the industry's pain point — the high number of returns due to the wrong size of the bag. It provides users with a novel experience to understand the size and capacity of a bag and enables brands to showcase the product with the utmost realism. The WANNA 3D experience is designed to help clients make an informed shopping decision by exploring the product's size, dimensions, texture, and key attributes before purchase.

The WANNA 3D Viewer is delivered as a React component to be used together with the WANNA SDK for Web, which provides the core experiences. The 3D Viewer has a customizable UI that is easy to integrate into a webpage.

See the detailed documentation at the WANNA website.

• License
  • Terms of use
• Installation and use
  • Simple installation
  • Import and launch
    • Example
  • Extended installation
• API Reference
• System requirements

License

WANNA SDK is intended for commercial use and is not open-source. You need a license key to work with the SDK.

To get a license key for WANNA SDK, kindly reach out to us at [e-mail] using your business e-mail address. Please provide:

• a short description of your project
• a link to your company website
• any other information you consider relevant

Terms of use

Working with WANNA SDK is subject to Terms of use. Please review them before downloading the SDK and starting to use it.

Installation and use

Simple installation

To install the WANNA 3D Viewer, add both @wannaby/wanna-ui and @wannaby/wanna-sdk to your project dependencies:

yarn add @wannaby/wanna-ui @wannaby/wanna-sdk

Import and launch

1. Import the WANNA UI component and its styles from wanna-ui.
2. Import WANNA SDK to your project from wanna-sdk library.
3. Launch the 3D viewer by calling the component and passing the following parameters:
   • license — Your license key received from the WANNA team.
   • mode — This parameter is reserved for future use. In this version, only wannaSdk.MODE_TYPE_3D works.
   • modelsType — This parameter is reserved for future use. In this version, only wannaSdk.MODEL_TYPE_BAG works.
   • models — The models list. The current version of the component only displays one model. If you specify several identifiers in the list, only the first one will be used.

Example

import wannaSDK from '@wannaby/wanna-sdk';
import WannaUI, { VIEW_MODE_MOBILE }  from '@wannaby/wanna-ui';
import '@wannaby/wanna-ui/styles.css';

<WannaUI
  wannaSdk={wannaSDK}
  models={[
    {
      id: 'model_id',
      brand: 'Brand Name',
      name: 'Model Name',
      price: '$ 1,200',
      pois: [
        '',
        'Text that will be displayed for the 2nd POI',
        'Text that will be displayed for the 3rd POI',
      ],
    },
  ]}
  license="your_license_key"
  mode={wannaSDK.MODE_TYPE_3D}
  modelsType={wannaSDK.MODEL_TYPE_BAG}
/>

Extended installation

By default, wanna-ui uses an iframe hosted by WANNA, but you can override it by including an iframe in your build and host it yourself.

Add the following rules into your Webpack configuration:

rules: [
  ...
  {
    test: /@wannaby\/wanna-sdk\/.*iframe.html$/,
    loader: 'file-loader',
  },
  {
    test: /@wannaby\/wanna-sdk\/.*core.js$/,
    loader: 'file-loader',
    options: {
      name: 'core.js',
    },
   },
]

If instead of Webpack you use Rollup JS or another module bundler, add similar rules to the configuration. Add core.js and iframe.html files to your public folder. Import iframe.html and core.js to your application and pass the iframeSrc prop to the Wanna UI component:

import wannaSDK from '@wannaby/wanna-sdk';
import WannaUI from '@wannaby/wanna-ui';
import wannaSdkIframe from '@wannaby/wanna-sdk/iframe.html';
import '@wannaby/wanna-sdk/core';
import '@wannaby/wanna-ui/styles.css';

<WannaUI
  wannaSdk={wannaSDK}
  iframeSrc={wannaSdkIframe}
  models={[
    {
      id: 'model_id',
      brand: 'Brand Name',
      name: 'Model Name',
      price: '$ 1,200',
      pois: [
        '',
        'Text that will be displayed for the 2nd POI',
        'Text that will be displayed for the 3nd POI',
      ],
    },
  ]}
  license="your_license_key"
  mode={wannaSDK.MODE_TYPE_3D}
  modelsType={wannaSDK.MODEL_TYPE_BAG}
/>

API Reference

See the complete description of all components on our documentation portal.

System requirements

Supported environments:

• iOS — both iPhone and iPad:
  • Safari 15 and later
  • Safari 15 (in-app) and later
  • Google Chrome on iOS 15 and later
• Android — both smartphones and tablets:
  • Google Chrome 83 and later
  • Android WebView
  • Android Browser 103 and later
  • Samsung Internet 17.0 and later
• Windows:
  • Google Chrome 103 and later
  • Mozilla Firefox 102 and later
  • Edge 103 and later
• macOS:
  • Google Chrome 102 and later
  • Safari 15 and later
  • Mozilla Firefox 102 and later
• Linux:
  • Google Chrome 102 and later