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

# Initial Setup

### Please check out the JSDoc that documents all available options and methods.
### 
### Requirements

* ****If developing locally, you need to run the example index.html with a local web server like Mamp or Xampp.****
* You need coding knowledge in jQuery, HTML, CSS and (PHP).****

### 
## Include JS/CSS files
### Include necessary files in your HTML document

First of all include all necessary files in the head part of your HTML document.

```
<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>
```
## Setting up products & designs

When you init the FancyProductDesigner plugin, you can easily pass the URLs of the products and design JSON files or directly the JSON objects in the plugin options (see [productsJSON](https://jquerydoc.fancyproductdesigner.com/classes/Options.defaults.html#property_productsJSON) and [designsJSON](https://jquerydoc.fancyproductdesigner.com/classes/Options.defaults.html#property_designsJSON) options).

#### Products

To understand the required JSON scheme for products, please [open this file](http://assets.fancyproductdesigner.com/docs/products.json). (It's not a valid JSON, because it includes comments for explaining the different keys and values).

#### Designs

To understand the required JSON scheme for designs, please [open this file](http://assets.fancyproductdesigner.com/docs/designs.json). (It's not a valid JSON, because it includes comments for explaining the different keys and values).

****You can find more JSON examples in the example/json folder of the downloaded archive!****

### 
### Call the Plugin

Now you can call the plugin with the main `` `div id="fpd"` `` as selector in a javascript block. You also need to bind a data string to the plugin, because its a object-oriented plugin.

```
const appOptions = {};const fpd = new FancyProductDesigner(    document.getElementById('fpd-target'),     appOptions);
```

---