The viewer supports italian and English by default as languages, but if needed, more languages can be added as well.
lang
to the desired language. https://3dviewer.futurefashionsolution.com/?customerId=123&productId=123&lang=it
lang
to desired language. window.futureFashion.viewer({selector:"div[data-3d-viewer]", customerId: customerId, productId: productId, lang: 'it' });
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:
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 id="ff-viewer" 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.
How can i remove the background from the viewer?
Contact your dedicated product manager.