Assets Ticker Manual

Assets Ticker

Support

Introduction
The Assets Ticker is a widget that provides real-time data on trading symbols.
The widget includes the following types:
- Tape
- Tape Cards
- Cards
- Table
- Cross Rates
The plugin is available for PandaTS customers who use the Mobile app and WebTrader. You can also use the free version that is limited to Crypto and Forex assets.
Plug-in Installation

To implement the Assets Ticker widget, insert the following <script> tag just before the closing </body> tag. Make sure to replace yourBrandName with the brandSlug provided by the Panda team in the brandSlug attribute. If you'd prefer to use the free version, you can omit the brandSlug attribute. Here's an example:
```
  <script src="https://wm.pandats.com/pts-assets-ticker/pts-assets-ticker.js" brandSlug="yourBrandName"></script>
```
Dom Integration

To integrate the Assets Ticker Widget, add one of the following <div> tags to your page. The script will find all <div> tags with "pts-assets-ticker" class and deploy a Ticker in each one of them. The type of Ticker should be specified in another class as shown in the following example:
```
  <div class="pts-assets-ticker tape"></div>
  <div class="pts-assets-ticker tape-cards"></div>
  <div class="pts-assets-ticker cards"></div>
  <div class="pts-assets-ticker table"></div>
  <div class="pts-assets-ticker cross-rates"></div>
```

Tape

Live example:

Integration with data-attributes:

  <div
    class="pts-assets-ticker tape"
    data-link="https://platform.panda-fx.com/"
    data-assets="btcusd,usdjpy,eurusd"
    data-direction="left"
    data-speed="7"
    data-stop="false"
    data-icons="true"
    data-background-color="#fff"
    data-text-color="#000"></div>

Data attribute options:

Attribute	Type	Mandatory	Description
data-link	String	No	Link destination for assets
data-assets	Array	Yes	Assets to display. For the free version use assets from the Panda Assets List
data-direction	String	No	The moving direction of the ruler
data-speed	Number	No	Time (In seconds) it takes one asset to move the distance of its own width
data-stop	Boolean	No	Stop / Move the Ruler
data-icons	Boolean	No	Show / Hide icons
data-background-color	String	No	Background color for the ruler
data-text-color	String	No	Text color for the ruler

Tape Cards

Live example:

Integration with data-attributes:

  <div
    class="pts-assets-ticker tape"
    data-link="https://platform.panda-fx.com/"
    data-assets="btcusd,usdjpy,eurusd"
    data-direction="left"
    data-speed="7"
    data-stop="false"
    data-icons="true"
    data-background-color="#fff"
    data-text-color="#000"
    data-chart="baseline"></div>

Data attribute options:

Attribute	Type	Mandatory	Description
data-link	String	No	Link destination for assets
data-assets	Array	Yes	Assets to display. For the free version use assets from the Panda Assets List
data-direction	String	No	The moving direction of the ruler
data-speed	Number	No	Time (In seconds) it takes one asset to move the distance of its own width
data-stop	Boolean	No	Stop / Move the Ruler
data-icons	Boolean	No	Show / Hide icons
data-background-color	String	No	Background color for the ruler
data-text-color	String	No	Text color for the ruler
data-chart	String	No	baseline / candlestick

Cards

Live example:

Integration with data-attributes:

  <div
    class="pts-assets-ticker cards"
    data-link="https://platform.panda-fx.com/"
    data-assets="btcusd,usdjpy,eurusd"
    data-icons="true"
    data-background-color="#fff"
    data-text-color="#000"></div>

Live example (with chart and range):

Integration with data-attributes:

  <div
    class="pts-assets-ticker cards"
    data-link="https://platform.panda-fx.com/"
    data-assets="btcusd,usdjpy"
    data-icons="true"
    data-background-color="#fff"
    data-text-color="#fff"
    data-chart="baseline"
    data-range="true"></div>

Data attribute options:

Attribute	Type	Mandatory	Description
data-link	String	No	Link destination for assets
data-assets	Array	Yes	Assets to display. For the free version use assets from the Panda Assets List
data-icons	String	No	Show / Hide icons
data-background-color	Number	No	Background color for each card.
data-text-color	Boolean	No	Text color for each card.
data-chart	Boolean	No	baseline / candlestick
data-range	Boolean	No	Show / Hide the range (must be used with chart)
data-text-color	String	No	Text color for the ruler
data-chart	String	No	baseline / candlestick

Table

Live example:

Integration with data-attributes:

  <div
    class="pts-assets-ticker table"
    data-link="https://platform.panda-fx.com/"
    data-categories="forex,crypto"
    data-icons="true"
    data-display-limit="5"></div>

Data attribute options:

Attribute	Type	Mandatory	Description
data-link	String	No	Link destination for assets
data-categories	Array	Yes	Categories to display. For the free version use categories from the Panda Assets List
data-icons	Boolean	No	Show / Hide icons
data-display-limit	Number	No	Number of rows in display

Cross Rates

Live example:

Integration with data-attributes:

  
  <div class="pts-assets-ticker cross-rates"
    data-currencies="eur,usd,jpy,gbp,chf,aud,cad,nzd"
    data-max-rows="5"
    data-max-columns="11"
    data-theme-up="#0ebf95"
    data-theme-down="#e95796"
    data-theme-highlight="#3b8dee"
    data-link="https://platform.panda-fx.com/"
    data-icons="true"></div>

Data attribute options:

Attribute	Type	Mandatory	Description
data-currencies	Array	Yes	List of currencies to cross. For the free version use the currencies from the Panda Assets List
data-max-rows	Number	No	Number of rows in display
data-max-column	Number	No	Number of columns in display
data-theme-up	Hex	No	Color for positive change
data-theme-down	Hex	No	Color for negative change
data-theme-highlight	Hex	No	Color for highlight
data-link	String	No	Link destination for assets
data-icons	Boolean	No	Show / Hide icons

Custom Icons

It is easily possible to use a custom icon design for any asset shown by the Ticker, in just three steps:
Step one:
Download this file and find the pts-assets-override folder, then add it to the root of your website repository.
Inside pts-assets-override folder, you should see the assets folder and the custom-assets-index.json file as shown in the following example:

Step two:
Add override-path attribute to the Forex Calculator <script> tag, with the path to the pts-assets-override folder location (Relative to the root folder) as shown in the following example:
```
  <script src="https://wm.pandats.com/pts-forex-calculator/pts-forex-calculator.js" brandslug="yourBrandName" override-path="/pts-assets-ticker"></script>
```
Step three:
Add your custom icon file to the assets folder, and also to custom-assets-index.json as shown in the following example:
```
  [
    "example"
  ]
```
The custom asset file should have the same name as the asset name (displayed), in small letters

Powered by Panda Trading Systems