Articles on: HTML5 App (Developer Version)

Placing a FPD module into an own HTML element

As our plugin is modular-built, you can easily put all FPD modules into a custom HTML element. That allows to use the modules outside of the product designer mainbar.

var fancyProductDesigner = document.getElementById('fpd-target').instance;

fancyProductDesigner
.addEventListener('ready', function() { //wait until the ui is loaded

new FPDProductsModule(fancyProductDesigner, document.getElementById('custom-module-wrap'));

})

JavaScript

data-module	JS Class
products	FPDProductsModule
images	FPDImagesModule
text	FPDTextModule
designs	FPDDesignsModule
manage-layers	FPDLayersModule
names-numbers	FPDNamesNumbersModule
layouts	FPDLayoutsModule
text-layers	FPDTextLayersModule

Updated on: 06/08/2025

Was this article helpful?

Thank you!