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:

<div data-3d-viewer style="width:100%; height:500px; position:relative;" data-ff-viewer=""></div>

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:


<script src="https://3dviewer.futurefashionsolution.com/future-fashion-viewer.min.js"></script>
<script>
    window.futureFashion.viewer({selector:"div[data-3d-viewer]", customerId: customerId, productId: productId });
</script>

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:

<style>
    :root [data-3d-viewer] {
        --ff-3d-viever-scene-bg-color:#ebebeb
    }
</style>

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

<iframe src="https://3dviewer.futurefashionsolution.com/?customerId={customerId}&productId={productId}" style="border: 0"></iframe>

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