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

If instead of Webpack you use Rollup JS, or something similar, you have to add some rules like that to add core.js and iframe.html files into your public folder and get iframe.html path to import it in the example below.

Make sure that your babel.config has modules: 'umd', field in settings (not necessary but may trigger some problems)

Try out WANNA UI component

Import WANNA SDK to your project from wanna-sdk library
Import the iframe from wanna-sdk/iframe
Import wanna-sdk/core
Import the WannaUI component from wanna-ui. Below in this guide, the WannaUI name is used to refer to this component.
Import the component styles import 'wanna-ui/lib/styles.css'
Launch the component and pass the required parameters. Important! The sets of parameters for Virtual try-on and 3D modes are different. See the descriptions below.

Example:

import wannaSdk from 'wanna-sdk'
import wannaSdkIframe from 'wanna-sdk/iframe'
import WannaUI from 'wanna-ui'
import 'wanna-ui/lib/styles.css'
import 'wanna-sdk/core'

const WrapperComponent = ({ models, license }) => (
  <WannaUI
    wannaSdk={wannaSdk}
    iframeSrc={wannaSdkIframe}
    models={models}
    license={license}
  />
);

AR mode

For some categories, WANNA provides pre-built UI for virtual try-on.

To launch the UI you should run the component in AR mode using the mode={wannaSdk.MODE_TYPE_AR} prop. When launching the component requests camera access and then shows the video stream.

Notes:

Props footerLeftComponent, footerRightComponent aren't supported in the AR mode. The rest props from the Props list below are supported.

The models' list (models prop) supports only the following fields:

[
  {
    id: '<string>', // required. Loads model by id
    image: <IMAGE>, // optional. Is displayed on the loading screen and in the model picker
    brand: '<string>', // optional. Is displayed in the header
    name: '<string>', // optional. Is displayed in the header
    purchaseUrl: '<link for buy button>', // optional. A link for the Buy now button
  },
  ...
]

Example:

const WrapperComponent = ({ models, license }) => (
  <WannaUI
    wannaSdk={wannaSdk}
    iframeSrc={wannaSdkIframe}
    license={license}
    mode={wannaSdk.MODE_TYPE_AR}
    modelsType={wannaSdk.MODEL_TYPE_SNEAKER}
    theme={wannaSdk.THEME_DARK}
    models={
      [
        {
          id: 'wanna01',
          image: <Image />,
          brand: 'WANNA Design',
          name: 'Devana Fluorescent Lime',
          purchaseUrl: 'https://wanna.fashion/',
        },
        {
          id: 'wanna02',
          image: <Image />,
          brand: 'WANNA Design',
          name: 'Svarog White',
        },
      ]
    }
  />
);

3D mode

For some categories, WANNA provides the 3D Viewer.

To launch the UI you should run the component in 3D mode using the mode={wannaSdk.MODE_TYPE_3D} prop. In comparison with the AR mode, the component will launch immediately without requesting camera access.

Installation

First, add both @wannaby/wanna-ui and @wannaby/wanna-sdk to your project dependencies:

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

Then import component and SDK and use them in your application:

import WannaUI from '@wannaby/wanna-ui';
import WannaSDK from '@wannaby/wanna-sdk';

const WrapperComponent = ({ license }) => (
  <WannaUI
    license={license}
    mode={wannaSDK.MODE_TYPE_3D}
    modelsType={wannaSDK.MODEL_TYPE_BAG}
    models={
      [
        {
          id: 'bag_model_id',
          brand: 'Brand Name',
          name: 'Model Name',
          price: '$ 1,200',
          pois: [
            '',
            'Here you can put the text that will be displayed for the 2nd POI',
            'Here you can put the text that will be displayed for the 3nd POI',
          ],
        },
      ]
    }
  />
);

Notes

In this version, the 3D mode works only for bag models: modelsType={wannaSDK.MODEL_TYPE_BAG}. Also, you need to pass mode={wannaSDK.MODE_TYPE_3D}

Only one model could be passed to the component. If you specify several models in the array, only the first one would be shown in the 3D Viewer. All props are supported.

The models' list (models prop) supports the following fields:

[
  {
    id: '<string>', // required
    image: <IMAGE>, // optional. Is displayed on the loading screen
    name: '<string>', // optional. Is displayed in the header
    price: '<string>', // optional. Is displayed in the header
    pois: [<string>|<null>, ...], // optional. Used in model POIs list in order of dots in model
  },
  ...
]

Component props

The following Props are supported in the WannaUI component.

propTypes = {
  // REQUIRED: --------------------------
  // sdk instance from 'wanna-sdk'
  wannaSdk: PropTypes.object.isRequired,

  // your license to use the sdk
  license: PropTypes.string.isRequired,

  // list of your models
  models: PropTypes.arrayOf(
    PropTypes.shape({
      brand: PropTypes.string,
      id: PropTypes.string,
      image: PropTypes.string,
      name: PropTypes.string,
      purchaseUrl: PropTypes.string,
    })
  ).isRequired,

  // src to imported wanna-sdk iframe
  iframeSrc: PropTypes.string.isRequired,


  // OPTIONAL: -------------------------
  // UI theme. By default the light theme is used.
  theme: PropTypes.oneOf(['dark', 'light']),

  // custom color for loading indicator and the models' picker. By default the cusyom color depends on the UI theme
  mainColor: PropTypes.string,

  // URL to a custom logo image. If specified it will be displayed on the loading screen
  logoUrl: PropTypes.string,

  // URL to a custom watermark image. The watermark is displayed on the virtual try-on photos. By default the WANNA watermark is used 
  watermarkUrl: PropTypes.string,

  // URL to a brand logo. If specified it will be displayed as the brand name instead of brand text 
  brandImageUrl: PropTypes.string,

  // model type to work with. By default 'sneakers' is used
  modelsType: PropTypes.oneOf(['sneakers', 'watch', 'bag']),

  // custom header component, check details and props below
  headerComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

  // custom footer left component, check details and props below
  footerLeftComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

  // custom footer right component, check details and props below
  footerRightComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

  // custom loading component, check details and props below
  loadingComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

  // on error callback, gets { error } object in params
  onError: PropTypes.func,

  // other optional callbacks
  onCameraAccessRequested: PropTypes.func,
  onCheckCameraPermissionsSuccess: PropTypes.func,
  onCheckCameraPermissionsFail: PropTypes.func,
  onFreezeOnCameraChange: PropTypes.func,
  onPhotoSaved: PropTypes.func,
  onPhotoShared: PropTypes.func,
  onModelLoadingFail: PropTypes.func,
  onModelLoadingSuccess: PropTypes.func,
  onModelLoading: PropTypes.func,
  onPhotoTaken: PropTypes.func,
  onTryOn: PropTypes.func,
  onHeaderBackClick: PropTypes.func,
  onModel3dPoiChanged: PropTypes.func,
  onModel3dResetView: PropTypes.func,
  onModel3dShowReferences: PropTypes.func,

  // custom font for the interface. By default Roboto Google font is used
  font: PropTypes.shape({
    file: PropTypes.string.isRequired,
    family: PropTypes.string.isRequired,
  }),

  // mode of sdk initialization. By default, 'ar' is used
  mode: PropTypes.oneOf(['ar', '3d']),
  
  // view mode for the component. By default, 'mobile' is used
  viewMode: PropTypes.oneOf(['mobile', 'desktop']).isRequired,
  
  // 3d mode dimensions units for a model. By default, 'cm' is used
  dimensionsUnit: PropTypes.oneOf(['cm', 'inch']),
  
  // flag indicates whether onboarding should be shown to a user or not. By default, 'false' is used
  showOnboarding: PropTypes.bool,

  // localization object, check details below
  labels: PropTypes.object,
}

Header component

WANNA gives you the full flexibility to customize the provided UI. You can use your own custom Header component passing it as render-prop in headerComponent prop. This component will be used in the WannaUI component, the Error screen, and the Rotate screen.

The Header component will get the following props:

propTypes = {
  // flag indicates that the app is ready. False in Error and Rotate screen, true only in the WannaUI component when app was initialized successfully. By default, 'false'
  appWasInit: PropTypes.bool,

  // flag indicates whether the user touches the screen. Is valid for the 3D mode.
  screenInteraction: PropTypes.bool,

  // title located on the top in the center (model brand in the demo)
  brand: PropTypes.string,

  // subtitle located below the title in the center (model name in the demo)
  name: PropTypes.string,

  // link to the brandImageUrl. If it is specified, the brand logo is displayed insted of the text in the title (brand)
  brandImageUrl: PropTypes.string,

  // model id
  modelId: PropTypes.string,

  // style object
  style: PropTypes.object,

  // mode of sdk initialization. By default, 'ar' is used
  mode: PropTypes.oneOf(['ar', '3d']),

  // view mode for the component. By default, 'mobile' is used
  viewMode:  PropTypes.oneOf(['mobile', 'desktop']).isRequired,

  // handler for left back button, it gets `onHeaderBackClick` prop
  onBack: PropTypes.func,

  ...rest - selected model params list. Gets from models list.
}

Loading component

To match your website better, you can use your own custom Loading component passing it as render-prop in loadingComponent prop. This component will be used in the Main component during the initialization and a model loading.

The Loading component will get the following props:

propTypes = {
  // text labels
  children: PropTypes.node,

  // number showing the progress of model's loading. From 0 to 100
  progress: PropTypes.number,

  // image to be shown together with the loading indicator
  image: PropTypes.node,

  // loading color 
  loadingColor: PropTypes.string,
  
  // UI theme 
  theme: PropTypes.oneOf([...THEME_TYPES]),
  
  // model type to work with. By default, 'sneakers'
  modelsType: PropTypes.string,
 
  // mode of sdk initialization. By default, 'ar' is used
  mode: PropTypes.oneOf(['ar', '3d']),

  // loading type. It is useful if you need to distinguish the loading screen for the sdk initialization and model loading
  type: PropTypes.oneOf([
    LOADING_TYPE_INIT,
    LOADING_TYPE_MODEL,
    LOADING_TYPE_MODE_CHANGE,
  ]),
}

FooterLeft & FooterRight Components

You can fully customize the footer by using your own custom footer components and passing them as render-props in footerRightComponent, footerLeftComponent props. These components are used in the Main component footer when the component is initing and a model is loading.

The components will get the following props:

propTypes = {
  // text labels 
  viewMode: PropTypes.oneOf(['mobile', 'desktop']).isRequired,

  // flag indicates whether the user touches the screen. Is valid for the 3D mode.
  screenInteraction: PropTypes.bool,
  
  // reset model handler, that will set default model position
  on3dReset: PropTypes.func.isRequired,
  
  // on minus button handler, that will zoom out the model when it's called
  on3dZoomOut: PropTypes.func.isRequired,

  // on plus button handler, that will zoom in the model when it's called
  on3dZoomIn: PropTypes.func.isRequired,
  
  // on size reference toggle handler. False if no references or no dimentions set for a model
  onToggleRefenences: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),

  // current selected model object from the 'models' list
  model: PropTypes.object.isRequired,

  // flag indicates if the size reference mode is on or off
  activeShowReference: PropTypes.bool,

  // flag indicates if onboarding is in progress. Should be used to disable all other UI elements for that time period
  onboardingIsRunning: PropTypes.bool,
  
  // flag indicates that model position wasn't changed and there is nothing to reset
  resetDisabled: PropTypes.bool,
}

Labels default values

{
    "buyNow": "Buy now",
    "cameraAccessRequired": "Camera access is required for virtual try-on",
    "canHold": "Can hold",
    "cantDownloadModel": "Can't download the model.",
    "cantSharePhoto": "Can't share a photo.",
    "cantTakePhoto": "Can't take a photo.",
    "cantToggleDimensions": "Can't toggle model dimensions",
    "cantZoomInTheModel": "Can't zoom in the model",
    "cantZoomOutTheModel": "Can't zoom out the model",
    "cantResetTheModel": "Can't reset the model",
    "cantChangeTheModelViewpoint": "Can't change the model viewpoint",
    "copyLink": "Copy link",
    "copied": "Copied",
    "copyFailure": "Can't copy, do it manually",
    "doubleClickToFocus": "Double click to select focus point",
    "doubleTapToFocus": "Double tap to select focus point",
    "feet": "feet",
    "forPhoto": "for photo",
    "hand": "hand",
    "generating": "Generating",
    "initializingApp": "Initializing App...",
    "noImage": "No image",
    "noCameraDefault": "Check Camera permissions for you app in Settings. After that return to this page and press Reload Button.",
    "noCameraWeChat": "Check Settings > WeChat > Camera and turn on the toggle. After that return to this page and press Reload Button.",
    "noCameraFacebook": "Check Settings > Facebook > Camera and turn on the toggle. After that return to this page and press Reload Button.",
    "noCameraInstagram": "Check Settings > Instagram > Camera and turn on the toggle. After that return to this page and press Reload Button.",
    "noCameraChrome": "Check Settings > Chrome > Camera and turn on the toggle. After that return to this page and press Reload Button.",
    "noCameraSafari": "Check Settings > Safari > Camera. And select ‘Ask’ or ‘Allow’. After that return to this page and press Reload Button.",
    "loadingModel": "Loading model",
    "pinchToZoom": "Pinch to zoom",
    "pointTheCamera": "Point the camera at your",
    "pleaseComeBackLater": "Please come back later",
    "reload": "Reload",
    "rotateThePhoneToTryOn": "Rotate the phone to try on",
    "rotateThePhoneFor3d": "Rotate the phone to view in 3D",
    "save": "Save",
    "scanQrcode": "Scan QR-code to try on",
    "share": "Share",
    "sharingPhotoError": "Can't share a photo.",
    "somethingWentWrong": "Something went wrong. But we’re working on it",
    "starting3dViewer": "Starting 3D Viewer",
    "tap": "Tap",
    "toTryOnUse": "To try on use Safari on iOS and Chrome on Android",
    "useSafariOrChrome": "Use Safari on iOS and Chrome on Android",
    "useWiFiToTryOn": "Use a Wi-Fi network to start try-on faster",
    "useWiFi": "Use a Wi-Fi network to start faster",
    "modeChanging": "Changing mode"
}

FAQs

What is @wannaby/wanna-ui?

Is @wannaby/wanna-ui popular?

Is @wannaby/wanna-ui well maintained?

Package last updated on 20 Jun 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install