Future Fashion 3D viewer integration document

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

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?
For script integration use the following code snippet:

For iframe integration use the following code snippet: