Embedding
The simplest way to embed the widget is just copy-paste the Javascript code. You also can use JSFiddle examples to play with before embedding the widget.
To get the code for a widget, find a small "JS" button on the bottom of the widget:
By pressing it you will get a complete code, that you can copy and paste to your own page and it will work as original widget.
Look at the example code to embed:
<link rel="stylesheet" media="all" href="https://cdn.jsdelivr.net/gh/bitquery/[email protected]/dist/assets/css/widgets.css">
<script src="https://cdn.jsdelivr.net/gh/bitquery/[email protected]/dist/widgets.js"></script>
<div id="transfers_timegraph"></div>
<script>
widgets.init('https://graphql.bitquery.io', 'apikey', {locale: 'en', theme: 'light'});
var query = new widgets.query(`
query($currency: String!, $address: String!, $from: ISO8601DateTime, $till: ISO8601DateTime){
binance {
transfers(from: $from, till: $till,
transferType: [BLOCK_REWARD,BURN,CLAIM_HTL,DEPOSIT_HTL,HTL_TRANSFER,ISSUE,MINT,TRADE_BUY,TRADE_SELL,TRANSFER]){
sum_in: amount(calculate: sum,
currency: {symbol: $currency},
receiver: {address: $address}
)
sum_out: amount(calculate: sum,
currency: {symbol: $currency},
sender: {address: $address}
)
count_in: count( uniq: transfers,
receiver: {address: $address}
)
count_out: count( uniq: transfers,
sender: {address: $address}
)
date{
month: date(format: "%Y-%m")
}
}
}
}
`);
var wdts = new widgets.transfers_by_time('#transfers_timegraph', query, 'binance.transfers');
query.request({"limit": 10, "offset": 0, "currency": "BNB", "address": "bnb1qu59r9degdxqtzvhsqupcrnnwtr6qdv3n3usgg", "from": null, "till": null});
</script>
It consists from the following parts:
These 2 lines load CSS and Javascript library from widgets project:
<link rel="stylesheet" media="all" href="https://cdn.jsdelivr.net/gh/bitquery/[email protected]/dist/assets/css/widgets.css">
<script src="https://cdn.jsdelivr.net/gh/bitquery/[email protected]/dist/widgets.js"></script>
Note that @v1.0 denotes the version to use. You can specify exact version ( @v1.0.55 ) as well as the major version ( @v1.0) or even just ( @v1 ). Using @v1.0 format will ensure that the widgets will not have modified interfaces, but will get all subsequent bug fixes ( denoted as the third number of version ).
In a simple scenario you just copy/paste these lines in the same place where to place widgets. However, if you going to place many widgets on the page or the web site, we recommend to include these lines just once in the head of the web site and do not insert them for every widget!
A line:
<div id="transfers_timegraph"></div>
defines where you want widget content to be displayed. You can style this container using CSS to specify place, width and height of it. Widget will try to adopt to the size you specified. This is especially usefull to build mobile UI.
A line:
widgets.init('https://graphql.bitquery.io', 'apikey', {locale: 'en', theme: 'light'});
initializes the library and specify some parameters. Look Customizing widgets section for more details.
If you use multiple widgets on the page, this line can be placed just once.
Lines
var query = new widgets.query(`
query($currency: String!, $address: String!, $from: ISO8601DateTime, $till: ISO8601DateTime){
...
}
`);
is a complete query for data to display the widget. Typically you will not touch it. However, you can play and modify the query even interactively, using provided GraphQL schema, look Interacting with widgets section for details.
The query has a set of parameters, starting with dollar sign. Reason to use parameters is that you may want to specify parameters from the page, for example to display the data for specific address in a date range as in this example.
Lines
var wdts = new widgets.transfers_by_time('#transfers_timegraph', query, 'binance.transfers');
query.request({"limit": 10, "offset": 0, "currency": "BNB", "address": "bnb1qu59r9degdxqtzvhsqupcrnnwtr6qdv3n3usgg", "from": null, "till": null});
compose the query, widget and parameters and command to display results in a container, defined by #transfers_timegraph HTML selector. So the widget is displayed then.