# Installation

## Installing via NPM

Installing the jackpot banner widget via NPM is the recommended way of adding it to your project, if you want to use it in a bundle. Since the widgets are versioned, you can load a specific version - or the latest version - based on your needs, from the `package.json file`, simply by adding it as a dependency and then installing the packages by running `npm install`:
```json
"dependencies": {
"@everymatrix/casino-winners": "^0.0.xxx"
},
```
### Displaying the widget

After the widget is imported inside your project either the NPM way or via CND, in order to display the widget you simply need to place the `<casino-jackpot-banner></casino-jackpot-banner>` tag (along with the appropriate attributes) on the page or in the specific container you would like to have it displayed. Please see the example below:

*note that the values below are hardcoded for the purposes of clarifying what type of data we expect*
```html
<casino-jackpot-banner
visualstructure="typeSpread"
lang="gr"
title="Jackpot Cards"
backgroundsrc="https://imgsource.background.png"
backgroundsrcmobile="https://imgsource.backgroundmobile.png"
currency="EUR"
gameid="999"
endpoint="https://api.everymatrix.com/v1/casino/jackpots"
caticon0="https://imgsource.icon0.png"
caticon1="https://imgsource.icon1.png"
caticon2="https://imgsource.icon2.png"
caticon3="https://imgsource.icon3.png"
iconlabels="platinum, gold, silver, bronze"
clientstyling=".class{property: value}"
clientstylingurl="/media/examples/link-element-example.css"
>
</casino-jackpot-banner>
```

## Parameters of the widget
___
| parameter | mandatory | description |
|---|:---:|---|
| visualstructure | yes | current options: "typeSpread", "typeLeft". Determines the visual structure of the widget |
| lang | no | user language |
| title | yes | string displayed on the widget. Keep char count ≤ 14 for maintaining design and ≤ 36 to avoid overflow |
| backgroundsrc | yes | img source of the background for desktop |
| backgroundsrcmobile | no | img source of the background for mobile. If left empty, will use the desktop source for mobile as well |
| currency | yes | currency of the logged in user. If logged out, a default currency |
| gameid | yes | current options: "998", "999". The id of the game for which to display jackpots |
| endpoint | yes | NWA API |
| caticon0...3 | yes | img source for each of the four icons |
| iconlabels | no | ex. format: "platinum, gold, silver, bronze". Single string containing labels separated by a comma ',' to be displayed below each jackpot in order |
| clientstyling | no | inline styling string. Ex.:".class{property: value}"  |
| clientstylingurl | no | external css file. Ex.: "/media/examples/link-element-example.css" |

## Widget Events
___
The widget can send Javascript events to the template website through postMessage(). 
The widget currently supports the following events:

| EventName | Description | Params |
| ------ | ------ | ------ |
| JackpotBannerClicked | The event is triggered when the widget (any part of it) is clicked| none |










