Using API methods and events

Modified on Thu, 27 Jul 2023 at 12:35 PM

The official API documentation can be found here.

The main entry point to use the API is the FancyProductDesigner class:

var fpd = new FancyProductDesigner(document.getElementById('fpd-target'));

The fpd variable will give you access to all methods and properties of the FancyProductDesigner class.

For example if you want to access the current showing view:


This will return an object of FancyProductDesignerView

Accessing all view instances:

//returns an array


In order to use the methods of e.g. the FancyProductDesigner class, you need to wait until the designer is ready to receive these methods. You can not use e.g. the loadProduct method during the loading process when the designer is loading the HTML from the templates.

In order to be sure you can use the methods, please wait until the ready event is executed:

fpd.addEventListener('ready',() => { 

    //use api methods in here



The FancyProducDesigner and  FancyProductDesignerView class has numerous events.

Example using events of FancyProducDesigner:

fpd.addEventListener('productCreate',(evt) => { 


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article