@cxco/ui-faq/README.md

FAQ Module using @cxco default packages

# `cxco-ui-faq`

> TODO: description

## Usage

This package is a `@cxco/core` plugin and as such it needs it to work. It also needs `@cxco/api-dcx` to connect the core to DigitalCX.

```javascript
import CxcoCore from '@cxco/core'
import cxcoDcxApi from '@cxco/api-dcx'
// import the UI-FAQ package
import cxcoFaqWidget from '@cxco/ui-faq'

const instance = new CxcoCore({ useWindowConfig: true, useWindowApi: true })
const rootElement = document.createElement('div')
// use it as a Cxco Core plugin
instance.use(cxcoFaqWidget(rootElement))
instance.use(cxcoDcxApi({}))
```

## Configuration

For a non-customized version of the "Default FAQ Module" the only thing you need to include in your HTML page is this:

````HTML

<script>
    window.cxcoConfig = {
    /* project/database configuration */
        project: {
            publicApiKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
            culture: 'xx',
            customerKey: 'customerA',
            key: 'projectB'
        },
        faq: {
            classificationId: 97,
            classificationName: 'Classification Name',
            /* HTML element where the FAQ will attacht to*/
            parentSelector: '[data-cxco-faq]'         
        }
    };

    cxco = window.cxco || [];

    (function (d, t) {
        var g = d.createElement(t),
            s = d.getElementsByTagName(t)[0];
        g.src = '//projects.elitechnology.com/jsprojects/cxco/default-faq/init.js?v='+(+new Date);
        g.async = true;
        s.parentNode.insertBefore(g, s);
    }(document, 'script'));
</script>
````

### **FAQ Options** `window.cxcoConfig.faq`

|option| optional| description| example|
|---|---|---|---|
|classificationId | `mandatory` | Classification Id to load the contextual FAQs from | `1` | 
|classificationName|`optional`| Classification Name to be displayed above the first column | `"All Categories"`|
|parentSelector|`mandatory`|  A DOMString selector to define where the bot is injected | `[data-cxco-faq]`|
|showNumbering|`optional`| Show numbers next to the Category names | `"All Categories"`|
|urlQuestion|`optional`| URL format to read from, and open the corresponding FAQ | `"#{categorycrumbs}/{categoryname}/{faqid}/{question}"`|
|maxBreakpoints|`optional`| Sets the maximum amount of breakpoints for each category columns | `1`|