Widgets

Prerequisites

Mandatory :

  • JQuery 3+
  • Google Charts API Javascript Library
  • XrpCommunity API Javascript Library
  • XrpCommunity Widget Javascript Library

Insert this code snippet before </body> in your page: 

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://api.xrpcommunity.pw/scripts/XrpCommunityAPI.js"></script>
<script type="text/javascript" src="https://api.xrpcommunity.pw/scripts/Widgets.js"></script>

If you want to use default CSS, insert this code snippet in your <head></head> page section : 

<link rel="stylesheet" href="https://api.xrpcommunity.pw/css/widgets.css" />

Nota : You can override the default CSS with you own classes

Examples

View on JsFiddle

Single pair widget market price
Code to insert in your page
<widget data-type="PW.Table" data-exchange="{exchangeName}" data-pair="{pairName}" data-symbol="{symbol}"></widget>
Parameters
  • {exchangeName} Exchange name (example : kraken)
  • {pairName} Pair Name (example : XRPEUR)
  • {symbol} Pair Name (example : EUR)
Example
<widget data-type="PW.Table" data-exchange="kraken" data-pair="XRPEUR" data-symbol="EUR"></widget>
Single pair widget sparkline
Code to insert in your page
<widget data-type="PW.Sparkline" data-exchange="{exchangeName}" data-pair="{pairName}" data-symbol="{symbol}"></widget>
Parameters
  • {exchangeName} Exchange name (example : kraken)
  • {pairName} Pair Name (example : XRPEUR)
  • {symbol} Pair Name (example : EUR)
Example
<widget data-type="PW.Sparkline" data-exchange="kraken" data-pair="XRPEUR" data-symbol="EUR"></widget>
FIAT currency Price
Code to insert in your page
<widget data-type="PW.Fiat" data-currency="{fiatSymbol}" ></widget>
Parameters
  • {fiatSymbol} FIAT currency symbol (example : USD,EUR,KRW ...)
Example
<widget data-type="PW.Fiat" data-currency="USD" ></widget>

More widgets to come soon ....