> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.chrisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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 |