Skip to content

Embedding

Jump to bottom
Aleksey edited this page Feb 8, 2020 · 7 revisions

Embedding widgets on web page

The simplest way to embed the widget is just copy-paste the Javascript code. Every widget has small "JS" button on the bottom:

JS

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/widgets@v1.0/dist/assets/css/widgets.css">
<script src="https://cdn.jsdelivr.net/gh/bitquery/widgets@v1.0/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:

Loading library

These 2 lines load CSS and Javascript library from widgets project:

<link rel="stylesheet" media="all" href="https://cdn.jsdelivr.net/gh/bitquery/widgets@v1.0/dist/assets/css/widgets.css">
<script src="https://cdn.jsdelivr.net/gh/bitquery/widgets@v1.0/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!

Clone this wiki locally