# Price Widgets
Supra provides embeddable widgets for displaying cryptocurrency data on websites. These widgets can be customised and be integrated using HTML iframes.
### Pre requisites
Users who plans to display these widgets need to have access to a SUPRA API key. Please feel free to request your key [here](https://docs.google.com/forms/d/e/1FAIpQLSfHZr8BHLTY8q_MjbuKZPpdgQS0oGmRIrsn9H-HrieH9eQjFw/viewform).
### Customisation options
* Number of price feeds
* Widget size
* Text colour
* Background colour
### **Horizontal Moving Price Ticker**
This ticker can be customised to add any number of asset prices, and prices are updated real time. All price tickers are moving left side.
Simply copy paste the code snippet below.
{% code overflow="wrap" %}
```html
```
{% endcode %}
### Vertical Price Widget
Vertical ticker real time prices and the tickers are static, scrollable and can customise for any number of asset prices.
\
Copy and paste following snippet.
{% code overflow="wrap" %}
```html
```
{% endcode %}
### Customisation Options
1. textColor : Sets the colour of the text.\
Example:\
`Hex: textColor=black`\
`RGB: textColor=rgb(0, 0, 0)`
2. subTextColor : Sets the colour of the sub-text.\
Example:\
`Hex: subTextColor=%23444 (This sets the color to #444)`\
`RGB: subTextColor=rgb(68, 68, 68)`
3. gridBg : Sets the background colour of the grid.\
Example:\
`Hex: gridBg=yellow`\
`RGB: gridBg=rgb(255, 255, 0)`
4. gridBgHover : Sets the background colour of the grid on hover.\
Example:\
`Hex: gridBgHover=green`\
`RGB: gridBgHover=rgb(0, 255, 0)`
5. mainBG : Sets the main background colour.\
Example:\
`Hex: mainBG=red`\
`RGB: mainBG=rgb(255, 0, 0)`
6. chartBgColor : Sets the background color of the chart.\
Example:\
`Hex: chartBgColor=white`\
`RGB: chartBgColor=rgb(255, 255, 255)`
### Hex Color Codes and URL Encoding
When using Hex values in the URL, ensure that you encode the hash (#) as %23. For example:
* Hex color #444 becomes %23444.
* Hex color #ffffff becomes %23ffffff.
#### Example with Encoded Colors
If you are using Hex values, here’s how the URL would look with the parameters applied:
{% code overflow="wrap" %}
```html
```
{% endcode %}
#### Example with RGB Colors
{% code overflow="wrap" %}
```html
```
{% endcode %}
\
Copy and paste following snippet.
{% code overflow="wrap" %}
```html
```
{% endcode %}
### Customisation Options
1. textColor : Sets the colour of the text.\
Example:\
`Hex: textColor=black`\
`RGB: textColor=rgb(0, 0, 0)`
2. subTextColor : Sets the colour of the sub-text.\
Example:\
`Hex: subTextColor=%23444 (This sets the color to #444)`\
`RGB: subTextColor=rgb(68, 68, 68)`