Skip to content

JSFiddle

Aleksey edited this page Feb 8, 2020 · 2 revisions

JSFiddle displaying widgets

You can use excellent JSFiddle tool to create, modify and play with bitquery widgets.

Examples

Load resources

First you have to load widgets CSS and JS. This is done in a left pane of JSFiddle using plus sign under Resources:

JSFiddle Resources

CSS and JS are entered independently as 2 resources:

https://cdn.jsdelivr.net/gh/bitquery/[email protected]/dist/assets/css/widgets.css
https://cdn.jsdelivr.net/gh/bitquery/[email protected]/dist/widgets.js

Note that the version ( @v1.0 ) may change in the future!

As a result you will get the following information:

JSFiddle Resources

For some widgets the bootstrap will help to display the widgets better, so optionally load CSS

https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css

Or other 4.X latest from the page Bootstrap download

Javascript

Javascript is copying directly from the widget, look Embedding widgets for details.

HTML

This is one line of <div> with widget container, also copied from the widget JS code. Name of container varies from widget to widget, but you can modify it assuming that you also change the HTML selector on Javascript code.

Press Run

Press Run and get the result.

Clone this wiki locally