Skip to main content

Getting Started

First of all add the necessary JS and CSS files to your web page.

<link rel="stylesheet" type="text/css" href="css/FancyProductDesigner.min.css" />
<script src="js/fabric-5.3.1.min.js" type="text/javascript"></script>
<script src="js/FancyProductDesigner.min.js" type="text/javascript"></script>

Create a container element for the product designer anywhere in your page.

<div id="fpd-target" class="fpd-sidebar fpd-shadow-2"></div>

In the class attribute you can also define the initial layout (See demos folder).

Now initialize an instance of FancyProductDesigner on that container element.

const appOptions = {};

const fpd = new FancyProductDesigner(

You can find all app options here.



fpd.getOrder(); //

//access current view instance
fpd.currentViewInstance.toDataURL() // export the current selected view as data URI


fpd.addEventListener('ready', () => {
//wait for this event in order to make any api method call