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 loadednew FPDProductsModule(fancyProductDesigner, document.getElementById('custom-module-wrap'));})
```|  |
| products | FPDProductsModule |
| --- | --- |
| images | FPDImagesModule |
| text | FPDTextModule |
| designs | FPDDesignsModule |
| manage-layers | FPDLayersModule |
| names-numbers | FPDNamesNumbersModule |
| layouts | FPDLayoutsModule |
| text-layers | FPDTextLayersModule |

Updated on: 31/07/2026