Future Fashion 3D viewer integration document

This page illustrate how you can integrate your site with the Future Fashion 3d viewer.

Language

The viewer supports italian and English by default as languages, but if needed, more languages can be added as well.

iFrame Integration

set the query parameter lang to the desired language.
for example: https://3dviewer.futurefashionsolution.com/?customerId=123&productId=123&lang=it

Script Integration

Set the option lang to desired language.
for example: window.futureFashion.viewer({selector:"div[data-3d-viewer]", customerId: customerId, productId: productId, lang: 'it' });

Script Integration

This integration is used to show the viewer inside of an existing element on-page.
The first thing you have to do is going in the section of your HTML page where you want to show the viewer and add a div element like this:

you could change the style properties width and height as you want.
Now you have to go in the end of your HTML page and add the next scripts:

You have to change the params customerId and productId with the code indicate from Future Fashion. The selector param is a CSS selector that identifies the div tag add before. If you want, you can customize some viewer options style adding a style element after the script tag:

The properties you can customize are:

  • --ff-3d-viever-bg-color
  • --ff-3d-viever-scene-bg-color
  • --ff-3d-viever-text-color
  • --ff-3d-viever-secondary-text-color
  • --ff-3d-viever-white
  • --ff-3d-viever-font-font-family
  • --ff-3d-viever-border-radius
  • --ff-3d-viever-modal-backdrop
  • --ff-3d-viever-modal-bg-color
  • --ff-3d-viever-modal-text-color
  • --ff-3d-viever-modal-title-font-size
  • --ff-3d-viever-modal-title-font-weight
  • --ff-3d-viever-modal-header-text-color
  • --ff-3d-viever-modal-footer-text-color

iFrame

This integration is used to show the viewer inside of an iframe tag.
To add this integration you have to go in the page where you want to show the viewer and add an iframe tag like the next

You have to change the params customerId and productId with the code indicate from Future Fashion.

FAQ

How can i remove the background from the viewer?